Slow hit test on large number of block elements
Reported by
insensi...@gmail.com,
Nov 3 2016
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36 Steps to reproduce the problem: 1. Go to https://jsfiddle.net/58k80jth/ 2. When page is ready, open Developer Tools -> Timeline 3. Click 'Record' button in Timeline 4. Move mouse during 3-5 seconds on JsFiddle result area with red squares 5. Click 'Stop' in Developer Tools 6. You will see that timeline is filled with 'Hit test' events, although events are not needed and there are no subscription to browser events (You can also look at the attached screen shot 'hit_test_timeline.png') What is the expected behavior? I expected to see clear timeline in this case What went wrong? Timeline is filled with 'Hit Test' events. I tried setting 'pointer-events: none' to created elements and/or document.body - this does not help. Also I noticed that: - hit test time increases if I increase number of elements in provided fiddle - hit test time reduces in 6-8 times if I not set 'position: absolute' on created elements Did this work before? N/A Does this work in other browsers? Yes Chrome version: 54.0.2840.71 Channel: n/a OS Version: 10.0 Flash Version: Shockwave Flash 23.0 r0 There are no visual results in the provided fiddle for simplicity. But this issue cause performance issues, if developer tries, for example, create a graphical demo with large number of block elements and animate just a single element without any mouse interactions
,
Nov 5 2016
I just attached a screenshot mentioned in the issue description. To see 'Hit test' events in the timeline you might have to 'zoom in' timeline by mouse wheel as additional step to reproduce. Actually, you screenshot also shows this issue. In a pie chart in the screenshot you provided we can see that most of the time browser spent on 'Rendering' step. 'Hit testing' is also categorized by Chrome as 'Rendering' so we see the same issue on your screenshot. Can you please re-check to classify this issue?
,
Nov 7 2016
Able to reproduce the issue on windows-7 using chrome stable version 54.0.2840.87 and canary 56.0.2910.0 This is regression issue broken in M50.Please find the bisect information as below Narrow Bisect:: =============== Good ::50.0.2625.0 -- (build revision 370090) Bad:: 50.0.2626.0 -- (build revision 370259) ChangeLog: ================ https://chromium.googlesource.com/chromium/src/+log/5dc7e9437e00c35c6fa2d30f365824b8f96b778b..883acd6a5e0d3effbd7420926ee4f592e4525bf8 Possible suspect ================== f9fc6aeef30d310d1f03818ff187add0f60d32eb Review URL: https://codereview.chromium.org/1592973002 sergeyv@ could you please look into this issue if it is related to your change,else please help us in finding the appropriate owner for this issue. Thanks,
,
Nov 8 2016
Just for your information: today I just downloaded Chrome 50.0.2624.0(which is older than shown in previous comment) and the problem already there - please look at the attached screen shot. Maybe this issue is non-regression or appeared much earlier?
,
Nov 22 2016
Still able to reproduce the issue on Win 10.0 using latest chrome version 57.0.2926.0. sergeyv@ Could you please look into this issue. Thanks!
,
Nov 29 2016
Alph, could you please take a look?
,
Dec 6 2016
Doesn't look like DevTools bug. DevTools just show the truth here.
,
Jan 3 2017
,
Jan 11 2017
,
Jan 11 2017
Assigning this to myself to see if it's related to 676764, that I am fixing.
,
Jan 12 2017
As per comment #10, removing the Needs-Bisect label. Thanks...!!
,
Jan 24 2017
The demo of another use-case where this issue is prevalent: https://jsfiddle.net/bb4ggpaL/1/
,
Apr 5 2018
I found a solution for the "hit test"-problem which works in the examples given in the initial post and in comment#12.
Step 1)
Add the following css:
html, body{width:100%;height:100%;overflow:hidden;}
Step 2)
Add a wrapper-div and place the huge amount of elements within
Step 3)
Add the following css to the wrapper:
#wrapper{z-index:-1;position:relative;}
You'll no longer encounter any hit-test performance issues in the developer tools on mousemove. However, all elements within the wrapper will become inaccessible to event-listeners (click, touch, mouse).
In cases where you either just need to drag things around (a game-map) or the control is handled by the keyboard alone, that solution will solve the problem entirely, as the you can still attach event-listeners for the mouse and keyboard to the document instead.
Oh, and here is a demonstration of the solution:
Original: https://jsfiddle.net/58k80jth/
Solved: https://jsfiddle.net/7k2ndbos/
,
Apr 5 2018
Thanks, Kenny! I will try to check this solution in our project to see if it solves our problem. However, this issue still seems to be relevant since your proposed solution solves the problem only for specific case. |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by hdodda@chromium.org
, Nov 4 2016Labels: Needs-Feedback
437 KB
437 KB View Download