Slow style recalculation when adding new <style> tag to the page with lot of dom nodes. |
||||||||||||||
Issue descriptionChrome Version : Version 54.0.2840.100 (64-bit) URLs (if applicable) : https://adwords-next-nightly.qa.adz.google.com/aw/campaigns?ocid=24390&__u=4113224306&__c=8639657110 What steps will reproduce the problem? (1) Set the page size to be 500 rows and scroll to the bottom: https://screenshot.googleplex.com/kaCze9NtfVc (2) Hover over any row and click the pencil icon What is the expected result? The popup should open immediately. What happens instead? It takes about a second for popup to appear. The time is spent in recalculating style: https://screenshot.googleplex.com/uJRsMcP7ykC Seems excessive, especially that none of the added styles apply to anything on the page - we load the popup content lazily, and the style for it are added only when needed - and they will apply only to the popup as they do have [randomstring] attributes added. More details in https://b.corp.google.com/issues/32926724
,
Nov 28 2016
,
Nov 28 2016
Repros in canary - It really is quite slow. Has it always been so slow?
,
Nov 28 2016
Not really, but our app grew a lot during this time. I checked on Chromium 45.0.2454.104 (64-bit) and the results are similar: https://screenshot.googleplex.com/vDkjk4xN0LW
,
Nov 29 2016
Able to reproduce the issue on windows-7, Mac-10.11.6 and Linux Ubuntu-14.04 using chrome stable version 54.0.2840.99 and latest canary 57.0.2935.3 with below steps. 1.Opened Chrome 2.Navigated to the url https://adwords-next-nightly.qa.adz.google.com/aw/campaigns?ocid=24390&__u=4113224306&__c=8639657110 3.Scrolled to the bottom of the page. 4.Hovered over the row and clicked the pencil icon Observed that the popup not open immediately. This is non-regression issue observed from M30#30.0.1551.0.Hence marking it as Untriaged to get it addressed. Thanks.
,
Nov 30 2016
Do you have a test case available to non-googlers?
,
Nov 30 2016
,
Nov 30 2016
I just created very simple test: https://x20web.corp.google.com/~rkj/slow_styles.html Click start few times and notice how performance degrades drastically. Then add single style and see how slow it is. Example: https://screenshot.googleplex.com/WmLtW8Z11Lo
,
Nov 30 2016
Updated the file with 'Use class' checkbox. When you add a style that has only class sellector it is fine. When it is attribute then it is slow. From my other experiments using tagname is also slow (even if the tag is unique and doesn't appear anyway on the page yet).
,
Dec 1 2016
The test is still inaccessible to me behind corp.google.com.
,
Dec 1 2016
This is because attribute selectors (without being qualified by any other selectors) are put into the bucket of rules which are matched against every element. So, if you have 3000 attribute selectors and 3000 nodes we will try to match selectors 3000*3000 times during a full style recalc. FWIW, Gecko is slower than Blink in the dropbox case when adding 3000 nodes. In order to fix this, we would need to group attribute selector rules in a hash map based on attribute like we do for class, id, and type selectors. See issue 541041 .
,
Dec 1 2016
Is there a plan to do this, or we should move Angular to use shimming with classes instead of attributes?
,
Dec 2 2016
,
Dec 2 2016
@meade this might be something we should prioritize?
,
Dec 4 2016
I've put it on our backlog to be discussed when we make 2017 plans.
,
Feb 13 2017
,
Aug 2 2017
,
Oct 30 2017
,
Oct 31 2017
,
Nov 23 2017
,
Nov 23 2017
This is super fast now since we removed style sharing and uncommon_attribute_selectors. |
||||||||||||||
►
Sign in to add a comment |
||||||||||||||
Comment 1 by ajha@chromium.org
, Nov 24 2016Labels: M-54