156250 2016-04-05 14:21:37 -0700 Web Inspector: Aggressive DOM updates slow down page and Inspector (protocol starving) 2017-01-01 22:27:29 -0800 1 1 1 Unclassified WebKit Web Inspector Safari Technology Preview Mac OS X 10.11 RESOLVED FIXED InRadar P2 Normal --- 158504 158513 1 jamie webkit-unassigned bburg graouts inspector-bugzilla-changes webkit-bug-importer oldest_to_newest 1180974 0 275695 jamie 2016-04-05 14:21:37 -0700 Created attachment 275695 Simple test page Steps to reproduce: 1. Load the test page 2. Click "Start" 3. Open the inspector with alt+cmd+i (should open on elements tab with body closed) 4. Note ms/frame (~10 on my early 2015 MacBook Air) 5. Switch to console tab 6. Note ms/frame increases (~40 on my machine) To be clear: I expect some slow down when the elements tab is open, but only modest slow down when the console tab is open. 1180975 1 webkit-bug-importer 2016-04-05 14:23:28 -0700 <rdar://problem/25561452> 1180990 2 timothy 2016-04-05 15:12:46 -0700 The protocol traffic from the DOM agent is starving things. You basically can't do anything in the Inspector with this much protocol traffic. We should look at coalescing the DOM agent events. Note: Chrome Canary DevTools hang worse for me. I can't even type in the Console there. If you start on Console in Chrome, you are fine. But if you ever show the Elements panel, and later switch to Console is hangs. I can type in Safari Web Inspector, just without autocomplete results, or anything happening quickly after pressing enter. 1181198 3 jamie 2016-04-06 01:05:09 -0700 Honestly this repro is more of a generic stress test. Did you see the effect I mentioned where the lag is only introduced after switching inspector tabs? 1181241 4 timothy 2016-04-06 07:11:18 -0700 Yes, switching tabs does have an effect in Web Inspector. The effect is much worse in Chrome Dev Tools. We should fix this. In general any where the page is busy, that causes a lot of Inspector protocol traffic, which makes it hard to do any outgoing commands. Also it taxes the CPU and starves the Web Inspector process. 1262492 5 bburg 2016-12-22 17:49:04 -0800 We did some performance work for this. Please reopen if you find pages that stall out still (and are not stupid microbenchmarks). 1262527 6 jamie 2016-12-22 22:13:53 -0800 Thanks Brian. Just to clarify: is the "Simple test page" attached to this ticket an example of a stupid microbenchmark? (Totally frank question, keen to learn what constitutes a useful repro). 1262594 7 bburg 2016-12-23 12:21:00 -0800 (In reply to comment #6) > Thanks Brian. Just to clarify: is the "Simple test page" attached to this > ticket an example of a stupid microbenchmark? (Totally frank question, keen > to learn what constitutes a useful repro). I hate to be dismissive, but unfortunately yes :(. I was using d3 SVG animations (from d3 gallery) as a more realistic test case that does spam attribute changes. In trunk it is not silky smooth but it's usable at least. If you find otherwise, then there is cause to optimize it further. 1262601 8 jamie 2016-12-23 13:13:01 -0800 Ok, that's useful to know. The original case that led to this ticket was an ember app that slowed down noticeably with the inspector open (it still does) but I figured there was way too much noise to be useful so whittled it down to something minimal that still demonstrated the particular issue. 1262606 9 bburg 2016-12-23 15:12:46 -0800 (In reply to comment #8) > Ok, that's useful to know. The original case that led to this ticket was an > ember app that slowed down noticeably with the inspector open (it still > does) but I figured there was way too much noise to be useful so whittled it > down to something minimal that still demonstrated the particular issue. Performance here also depends on the distribution of attribute updates to DOM elements, how often elements are added/removed, how many different properties are being changed, etc. It would probably be better to start with the real world example so that I can capture some of these properties before trying to optimize our implementation. 1263252 10 jamie 2017-01-01 22:27:29 -0800 Just a note that the issues I described previously match those described here: https://bugs.webkit.org/show_bug.cgi?id=158117 275695 2016-04-05 14:21:37 -0700 2016-04-05 14:21:37 -0700 Simple test page repro.html text/html 1377 jamie PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPlNhZmFyaSBJbnNwZWN0 b3IgUGVyZiBSZXBybzwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGJ1dHRvbiBvbmNs aWNrPSJ0b2dnbGUodGhpcykiPlN0YXJ0PC9idXR0b24+CiAgICA8c3BhbiBpZD0iYXZnIj48L3Nw YW4+IG1zL2ZyYW1lCiAgICA8c2NyaXB0PgogICAgICB2YXIgc3RhdGUgPSAncGF1c2VkJzsKICAg ICAgdmFyIGF2Z1dpbmRvdyA9IDEwOwogICAgICB2YXIgZWxDb3VudCA9IDEwMDA7CiAgICAgIHZh ciBlbHMgPSBuZXcgQXJyYXkoZWxDb3VudCk7CiAgICAgIHZhciB0aW1lcyA9IG5ldyBBcnJheShh dmdXaW5kb3cpOwogICAgICB2YXIgYXZnRWwgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYXZn Jyk7CgogICAgICBmdW5jdGlvbiByZW5kZXIoKSB7CiAgICAgICAgZm9yICh2YXIgaSA9IDA7IGkg PCBlbENvdW50OyBpKyspIHsKICAgICAgICAgIHZhciBlbCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1l bnQoJ2RpdicpOwogICAgICAgICAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChlbCk7CiAgICAg ICAgICBlbHMucHVzaChlbCk7CiAgICAgICAgfQogICAgICB9CgogICAgICBmdW5jdGlvbiB1cGRh dGUoKSB7CiAgICAgICAgdmFyIHRoZW4gPSBwZXJmb3JtYW5jZS5ub3coKTsKICAgICAgICBlbHMu Zm9yRWFjaChmdW5jdGlvbihlbCkgeyBlbC5pbm5lckhUTUwgPSBNYXRoLnJhbmRvbSgpIH0pOwog ICAgICAgIHZhciBub3cgPSBwZXJmb3JtYW5jZS5ub3coKTsKCiAgICAgICAgdGltZXMucHVzaChu b3cgLSB0aGVuKTsKICAgICAgICBpZiAodGltZXMubGVuZ3RoID4gYXZnV2luZG93KSB7IHRpbWVz LnNoaWZ0KCk7IH0KICAgICAgICB2YXIgYXZnID0gdGltZXMucmVkdWNlKGZ1bmN0aW9uKHQsIGkp IHsgcmV0dXJuIHQgKyBpIH0sIDApIC8gYXZnV2luZG93OwoKICAgICAgICBhdmdFbC5pbm5lckhU TUwgPSBhdmc7CgogICAgICAgIGlmIChzdGF0ZSA9PT0gJ3BsYXlpbmcnKSB7CiAgICAgICAgICBy ZXF1ZXN0QW5pbWF0aW9uRnJhbWUodXBkYXRlKTsKICAgICAgICB9CiAgICAgIH0KCiAgICAgIGZ1 bmN0aW9uIHRvZ2dsZShidXR0b24pIHsKICAgICAgICBpZiAoc3RhdGUgPT09ICdwYXVzZWQnKSB7 CiAgICAgICAgICBidXR0b24uaW5uZXJIVE1MID0gJ1BhdXNlJzsKICAgICAgICAgIHN0YXRlID0g J3BsYXlpbmcnOwogICAgICAgICAgdXBkYXRlKCk7CiAgICAgICAgfSBlbHNlIHsKICAgICAgICAg IHN0YXRlID0gJ3BhdXNlZCc7CiAgICAgICAgICBidXR0b24uaW5uZXJIVE1MID0gJ1BsYXknOwog ICAgICAgIH0KICAgICAgfQoKICAgICAgcmVuZGVyKCk7CiAgICA8L3NjcmlwdD4KICA8L2JvZHk+ CjwvaHRtbD4K