css-element-queries icon indicating copy to clipboard operation
css-element-queries copied to clipboard

Published 20 hours ago • verified publisher icon marcj

Performace info for a LOT of queries on a page?

Open benjaminapetersen opened this issue 9 years ago • 6 comments
trafficstars

Would be good to know its limits. How far can it go as a general guideline, what browsers maybe can go further, does IE tank earlier than others and all that.

benjaminapetersen avatar Sep 01 '16 14:09 benjaminapetersen

Care about generating this information?

marcj avatar Dec 20 '16 14:12 marcj

? Asking for help on it?

benjaminapetersen avatar Dec 20 '16 18:12 benjaminapetersen

Yes :p

marcj avatar Jan 05 '17 16:01 marcj

In slapdash testing that I conducted over the summer (so, please note that these tests use months-old versions of the plugins), css-element-queries could just barely handle 6 nested <div>s (~25s to first render):

https://ericportis.com/etc/ecq-perf-test/css-element-queries.html

A screen capture of the test, which takes twenty five seconds to render initially, and is also very slow to update on window resize

Any more <div>s than that and Chrome would prompt me to kill the tab.

[edit: deleted comparison to another library]

eeeps avatar Jan 29 '18 22:01 eeeps

On the project page http://marcj.github.io/css-element-queries/ you can go to the section "Performance Demo" at the very bottom and try it out. I guess your demo is slow, because you're using "em" units and we need to calculate it every time, or it might be due to the unrealistic nesting. Please try your demo with newest version + with px units so we might see what the reason is.

PS: Your second link shows on by Chrome just a black screen. PS: I know you want to push your polyfill, but please don't do it this way.

marcj avatar Jan 30 '18 01:01 marcj

@marcj – I’ve deleted the second link/comparison from my comment. I don’t work on a polyfill and don’t want to push any library over any other. I’m pretty embarrassed to have barged into your repo and made a bad first impression! The work you’ve done on css-element-queries is amazing – it’s the most widely-used E/CQ library out there, by a lot, for good reasons – and the last thing I want to do is disparage you, or it.

I did these tests over the summer as research for a talk I gave at SmashingConf on element/container queries. I was trying to understand the what browser folks were fussing about when they warned about the potential awful performance of looping re-layouts, and so the test is designed to push implementations to their nesting limit.

I wanted to publish these results somewhere, but explicitly did not want anyone to think that I was saying any library was better, or worse, than any other. As you say, the scenario is patently unrealistic. I saw this issue the other day and thought it might be a useful place to share – huge, huge, apologies, if I'm out of bounds.

I re-ran the test as you suggested, and got some weird results. I'll try to figure out what's going on soon.

eeeps avatar Jan 30 '18 23:01 eeeps