New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 668324 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner: ----
Closed: Nov 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug

Blocked on:
issue 541041



Sign in to add a comment

Slow style recalculation when adding new <style> tag to the page with lot of dom nodes.

Project Member Reported by rkj@google.com, Nov 24 2016

Issue description

Chrome 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
 

Comment 1 by ajha@chromium.org, Nov 24 2016

Components: Blink
Labels: M-54
Components: -Blink Blink>CSS
Labels: Needs-Bisect
Status: Untriaged (was: Unconfirmed)
Repros in canary - It really is quite slow. Has it always been so slow?

Comment 4 by rkj@google.com, 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
Cc: sureshkumari@chromium.org
Labels: -Pri-3 -M-54 -Needs-Bisect M-56 OS-Linux OS-Windows Pri-2
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.

Comment 6 by r...@opera.com, Nov 30 2016

Do you have a test case available to non-googlers?

Comment 7 by r...@opera.com, Nov 30 2016

Cc: r...@opera.com

Comment 8 by rkj@google.com, 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

Comment 9 by rkj@google.com, 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).

Comment 10 by r...@opera.com, Dec 1 2016

The test is still inaccessible to me behind corp.google.com.

Comment 12 by r...@opera.com, Dec 1 2016

Blockedon: 541041
Status: Available (was: Untriaged)
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 .

Comment 13 by rkj@google.com, Dec 1 2016

Is there a plan to do this, or we should move Angular to use shimming with classes instead of attributes?
Labels: Performance

Comment 15 by r...@opera.com, Dec 2 2016

Cc: meade@chromium.org
@meade this might be something we should prioritize?

I've put it on our backlog to be discussed when we make 2017 plans.
Labels: Update-Quarterly
Labels: -Performance Performance-Loading
Labels: Code-RecalcStyle

Comment 20 by meade@chromium.org, Oct 31 2017

Labels: BlockedBug
Cc: -r...@opera.com futhark@chromium.org
Status: Fixed (was: Available)
This is super fast now since we removed style sharing and uncommon_attribute_selectors.

Sign in to add a comment