Speed: Creating elements with Shadow DOM is slower than creating similarly rendered elements without Shadow DOM. |
|||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36 Steps to reproduce the problem: 1. Unzip the reproduction and run the `runner.html`. 2. Let the test run and observe the output displayed in the browser What is the expected behavior? The test creates a set of custom elements (1) rendered with Shadow DOM and another set (2) rendered without Shadow DOM but with the exact same number of elements and styling. Test (1) and test (2) should be roughly on par in performance. Note, the repro includes a second set of tests (3) and (4) that remove all the style elements. It's also expected that test (3) and (4) have similar performance. What went wrong? While tests (3) and (4) [the bottom 2 in the runner] have roughly similar performance (within about 5%), tests (1) and (2) [the top 2 in the runner] have significantly different performance with the Shadow DOM version being 25-30% slower. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 62.0.3202.94 Channel: stable OS Version: OS X 10.12.6 Flash Version:
,
Nov 29 2017
,
Nov 30 2017
Tested the issue on Mac OS 10.12.6 using chrome M62 #62.0.3202.94 and M64 #64.0.3281.0 and followed below steps: 1. Launched chrome and downloaded attached zip file 2. Opened runner.html in chrome & safari and observed as attached in screencast. Attached screencast for reference. @sorvell-- Could you please check attached screencast and confirm us if we have missed any steps in reproducing the issue and also please help us with the expected result screenshot. Thanks!
,
Nov 30 2017
,
Nov 30 2017
The video accurately captures the results I am seeing. * card 1: test rendered with Shadow DOM * card 2: test rendered without Shadow DOM (~30% slower) We would hope that the score for card 2 and card 1 is roughly comparable so that there is no performance penalty for using Shadow DOM. * card 3: test rendered with Shadow DOM and with <style> elements removed * card 4: test rendered without Shadow DOM and with <style> elements removed (+/- 5%) I include these versions to help demonstrate that it looks like including styling inside Shadow DOM significantly degrades the performance of this test because without them the performance is fairly comparable. Test info: the tests run in iframes 25x and the cards display (1) the "min" minimum time, (2) the "med" median time, and (3) the standard deviation; also, the numbers in parens are scores normalized against the highlighted test. Safari performs worse on this test than Chrome, but that is not the focus of this issue.
,
Nov 30 2017
Thank you for providing more feedback. Adding requester "hdodda@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Dec 1 2017
Tested the issue on Mac OS 10.12.6 , windows 7 & 10 , ubuntu 14.04 using chrome M62 #62.0.3202.94 and M64 #64.0.3282.0 and issue is reproduced. This issue is seen from M55 and the test doesnt run in earlier versions of chrome. This is a Non-regression issue and hence marking it as untraiged for further updates on this. Thanks!
,
Dec 4 2017
,
Dec 11 2017
Ran three iterations of both styled shadow and styled non-shadow cases and think I've found one possible explanation. The non-shadow version calls ApplyMatchedStandardProperties only 73 times because the MatchedProperties cache is hit, while the shadow one calls ApplyMatchedStandardProperties every time (27811). See attached screen-shots.
,
Dec 12 2017
Tried to remove the !IsAtShadowBoundary(element) in ApplyMatchedCache (which was what caused the cache to not fully trigger), but it didn't help the end result.
,
Jan 18 2018
,
Jan 30 2018
,
Feb 5 2018
,
Feb 5 2018
,
Mar 2 2018
I modified the test to compare performance between using <style> element, constructed CSSStyleSheet, and not applying style on the custom elements (all three cases uses shadow root). It seems using constructed CSSStyleSheet is around 20-30% faster than using <style> element. (To run the test, just open the runner.html, just like the original test)
,
Jun 18 2018
rakina is actually driving this for some time now, reflecting the reality to the owner. |
|||||||||||||||
►
Sign in to add a comment |
|||||||||||||||
Comment 1 by ericwilligers@chromium.org
, Nov 29 2017