Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Performance information #26

Open
benjaminapetersen opened this issue Jul 2, 2015 · 3 comments
Open

Performance information #26

benjaminapetersen opened this issue Jul 2, 2015 · 3 comments

Comments

@benjaminapetersen
Copy link

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
Copy link

dandv commented Jul 8, 2015

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

@benjaminapetersen
Copy link
Author

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
Copy link

smnbbrv commented Sep 1, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants