Performance information

[benjaminapetersen]

trafficstars

I'm looking at a handful of options around the idea of element queries. I just pulled your repo and did a small experiment that made me curious about performance.

Essentially, I generated 1000, then 2000, then 3000 DOM nodes with a single class using element queries just to test the impact on the page. A quick snippet:

<!-- using angular to make the DOM, class="tester" is the one node with the queries -->
  <div ng-controller="list.items">
    <div ng-repeat="item in list" layout row outline>
        <div outline>{{item.id}}</div>
        <div flex outline class="tester">{{item.random}}</div>
        <div outline>{{item.string}}</div>
    </div>
  </div>

The queries I used are the same as those from the README.md file, just changing header to .tester:

  .tester {
    background-color: #fefefe;
  }
  .tester[min-width~="500px"] {
    background-color: #eee;
  }
 .tester[min-width~="500px"][max-width~="800px"] {
      background-color: #eee;
  }

What I found was interesting.

• 1000 elements baseline is < 1 second to generate
• 1000 elements w/elementQuery added is 2-3 seconds to generate
• 2000 elements w/elementQuery added is 6-7 seconds to generate
• 3000 elements w/elementQuery added is 14-15 seconds to generate

So there is a pretty massive performance hit. At minimum this should probably be addressed in the README file.

[dandv]

@benjaminapetersen : given that this repo hasn't seen a commit since Jun 2013, what other options have you found?

[benjaminapetersen]

Back Alley Coder has a good write up, has a lot to say about performance, and an implementation. I'm experimenting with an Angular Directive based approach, but not quite ready to roll yet. There are a few others here and there.

[smnbbrv]

@dandv https://github.com/marcj/css-element-queries