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

Issue metadata

Status: Fixed
Owner:
Closed: Apr 2014
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 1
Type: Bug

Blocked on:
issue 353217



Sign in to add a comment
link

Issue 350797: Web inspector makes polymer apps look very slow

Reported by esprehn@chromium.org, Mar 10 2014 Project Member

Issue description

Google Chrome	35.0.1880.0 (Official Build 255773) canary
OS	Mac OS X 
Blink	537.36 (@168755)

Loading an app seems to take nearly twice as long with the web inspector open. For example my app takes about 150ms in about:tracing, but 300ms in the Timeline. I'm also seeing createElement take massively more time once the Elements panel is open, and inserting a new <style> is taking n^2 time.

All this combines to make polymer apps look extremely slow using the web inspector tools when in reality they're not nearly as slow as the tools are telling you.
 

Comment 1 by esprehn@chromium.org, Mar 10 2014

Cc: sjmiles@chromium.org sorvell@chromium.org

Comment 2 by esprehn@chromium.org, Mar 10 2014

Blocking: chromium:350785

Comment 3 by esprehn@chromium.org, Mar 10 2014

Blocking: chromium:350788

Comment 4 by pfeldman@chromium.org, Mar 10 2014

Blocking: -chromium:350788

Comment 5 by pfeldman@chromium.org, Mar 10 2014

Blocking: -chromium:350785

Comment 6 by pfeldman@chromium.org, Mar 10 2014

Lets file those on case-by-case basis.

Styles slow down is tracked as https://code.google.com/p/chromium/issues/detail?id=289708.
Please file separate bugs on the timeline vs tracing. Btw, did you request timeline to capture JS stacks on every event?
Same goes for createElement.

We can keep this one open in order to track issues of this kind. I can immediately follow up on the Elements panel bit of it. Consider example:

t = performance.now();
var d = document.createElement('div');
document.body.appendChild(d);
for (var i = 0; i < 5000; ++i) d.appendChild(document.createElement("div")).textContent = "foo" + i; console.log(performance.now() - t);

Once Elements panel is opened, it requests parts of DOM for inspection from the "backend". Backend will now on send updates on the _visible_ parts of DOM to the front-end. In this case we are updating the client with the new number of children in "d" 5000 times.

For microbenchmarks on DOM w/ inspector opened, you should make sure the DOM you mutate is not visible in the Elements panel (collapsed). Try inserting an intermediate layer and the time goes away:

t = performance.now(); 
var dd = document.createElement('div');
document.body.appendChild(dd);
var d = document.createElement('div');
dd.appendChild(d);
console.time();
for (var i = 0; i < 5000; ++i) d.appendChild(document.createElement("div")).textContent = "foo" + i;
console.log(performance.now() - t);



DevTools is no tracing - it provides clients with the serialized flow of updates on the inspected target. It maintains particular bindings to provide traceability (say from Timeline to Elements). So we are balancing the performance vs usefulness of the tool here. Throttling and unsubscribing from the DOM updates in not always an option for us. So you still need to pick the right tool for the task. In this case, DevTools is less efficient than jsperf.com due to its being more generic.

Comment 7 by ericbidelman@chromium.org, Mar 13 2014

Labels: hotlist-toolkit

Comment 8 by ericbidelman@chromium.org, Mar 13 2014

pfeldman@ the problem is that developers have no idea they need to do that. This has tripped up a number of people already. When we try to profile apps, developers will give us numbers and we don't know if they're accurate. The expectation is that the tools will always be 100% accurate. 

At the very least, what about a warning callout? Firebug has a big warning for a similar issue (see screenshot). If someone has the Elements panel open, they should be informed that perf #s many suffer. Bonus: devtools should suggest how to produce accurate numbers.
Screen Shot 2014-03-13 at 12.46.00 PM.png
90.4 KB View Download

Comment 9 by pfeldman@chromium.org, Mar 13 2014

@ericbidelman: lets file those and fix them case by case. So far, style's n^2 is in core as much as in the devtools. And I am still waiting for the timeline case to get filed.

Claiming that devtools makes polymer look slow won't help - we need repro steps that show that devtools slow down polymer cases unproportionally. We do expect some slow down, but it should not skew profile and make polymer cases look particularly bad.

Comment 10 by pfeldman@chromium.org, Mar 13 2014

Owner: esprehn@chromium.org
Over to esprehn for use cases.

Comment 11 by adamk@chromium.org, Mar 13 2014

@pfeldman, I thought  issue 289708  was a pretty clear use case of a devtools pane (in this case the profiler, but it also shows up in the timeline) causing disproportional slowdown. I didn't recall that being due to n^2 behavior, rather some per-stylesheet processing, but maybe I've misread the comments on that bug.

Comment 12 by esprehn@chromium.org, Mar 13 2014

Owner: pfeldman@chromium.org
1) Right click this page and choose "Inspect Element".
2) Switch to the Console tab so the Element inspector is not visible.

Paste this into the console:

var t = performance.now();
var d = document.createElement("div");
document.body.appendChild(d);
for (var i = 0; i < 5000; ++i) d.appendChild(document.createElement("div")).textContent = "foo" + i;
console.log(performance.now() - t);

Most developers I've watched open the console by doing Inspect Element. If you switch away from the Element inspector so it's not even visible anymore you still take the huge 7x perf hit.

Comment 13 by pfeldman@chromium.org, Mar 14 2014

@adamk:  issue 289708  is a great example of what we can iterate against. We've already done some good progress there and we have further plans on improvement. I updated that bug with the numbers.
But the real problem there is n^2, not the inspector.  It is also not specific to polymer (or disproportional), unless polymer == adding hundreds of stylesheets synchronously. If it is, again, n^2 is its real enemy, not inspector. Sounds like  issue 350785  is tracking it.

@esprehn: I just filed  issue 352497  based on your comment in #12. I also updated  issue 350788  with numbers based on jsperf. This is a great example of devtools slowness, but is not so great example of the disproportion: creating polymer nodes is 2.2x slower than divs without inspector, but take same time with the inspector opened once Elements Panel was opened. So I don't see how it is the reason why "Web inspector makes polymer apps look very slow". I'm making 352497 priority for myself anyways - I'll see what I can do there. But we were never optimizing against the DOM microbenchmarks w/ inspector opened.

Should I close this as WontFix, or there are more use cases where polymer is not slowing down things, but inspector makes it look like it does (creates disproportion comparing to the regular DOM operations)?

Comment 14 by pfeldman@chromium.org, Mar 14 2014

Short update on the issues that were reported:

-  Issue 352497  is now closed, inspector still has some overhead, but it improved from 7x to 1.1x slow down.

-  Issue 289708  was originally reported as taking 600ms w/ inspector on load. It is now 130ms on my MBP (vs 50ms inspector-less). Further improvement of this will depend on the feasibility on piggy-backing on the n^2 resolution. We don't want to build any deltas for the inspector.

Comment 15 by pfeldman@chromium.org, Mar 17 2014

Blockedon: chromium:353217
Styles  issue 289708  is fixed, moving on to the timeline  issue 353217 . Once it is addressed, I'm going to close this one unless you file more requests!

Comment 16 by esprehn@chromium.org, Mar 17 2014

Awesome, thanks so much pfeldman!

Comment 17 by pfeldman@chromium.org, Mar 17 2014

@esprehn: could you share the link to the app that was slow with timeline?

Comment 18 by pfeldman@chromium.org, Mar 19 2014

Cc: paulir...@chromium.org

Comment 19 by pfeldman@chromium.org, Apr 21 2014

Status: Fixed
Please reopen if this still is the case.

Comment 20 by bugdroid1@chromium.org, Nov 23 2016

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/v8/v8.git/+/eb3551d0a34dcc64abe871b79e9da1b19516a428

commit eb3551d0a34dcc64abe871b79e9da1b19516a428
Author: kozyatinskiy <kozyatinskiy@chromium.org>
Date: Wed Nov 23 00:45:30 2016

Roll third_party/inspector_protocol to 4ad35c45aca9834b67ec2cb152c816ea1b7ceb48

This roll includes:
  - [inspector_protocol] Introduce protocol::Serializable [1]

[1] https://codereview.chromium.org/2526603002

BUG= chromium:350797 
R=dgozman@chromium.org

Review-Url: https://codereview.chromium.org/2523583005
Cr-Commit-Position: refs/heads/master@{#41197}

[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/include/v8-inspector.h
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/src/inspector/injected-script.cc
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/src/inspector/v8-debugger-agent-impl.cc
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/src/inspector/v8-inspector-session-impl.cc
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/src/inspector/v8-inspector-session-impl.h
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/CodeGenerator.py
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/README.v8
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/lib/Array_h.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/lib/DispatcherBase_cpp.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/lib/DispatcherBase_h.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/lib/FrontendChannel_h.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/lib/Maybe_h.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/lib/Object_cpp.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/lib/Object_h.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/lib/ValueConversions_h.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/lib/Values_cpp.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/lib/Values_h.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/templates/Imported_h.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/templates/TypeBuilder_cpp.template
[modify] https://crrev.com/eb3551d0a34dcc64abe871b79e9da1b19516a428/third_party/inspector_protocol/templates/TypeBuilder_h.template

Comment 21 by bugdroid1@chromium.org, Nov 23 2016

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2dfeded24ecab161d83c6d104c9304efb271c851

commit 2dfeded24ecab161d83c6d104c9304efb271c851
Author: kozyatinskiy <kozyatinskiy@chromium.org>
Date: Wed Nov 23 17:39:54 2016

Roll third_party/inspector_protocol to 4ad35c45aca9834b67ec2cb152c816ea1b7ceb48

This roll includes:
  - [inspector_protocol] Introduce protocol::Serializable [1]
  - [inspector_protocol] Fixed domain_json["has_exports"] flag for exported domains [2]

[1] https://codereview.chromium.org/2526603002
[2] https://codereview.chromium.org/2515343005

BUG= chromium:350797 
R=dgozman@chromium.org
TBR=oshima@chromium.org

Review-Url: https://codereview.chromium.org/2522583002
Cr-Commit-Position: refs/heads/master@{#434199}

[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/ash/common/devtools/ash_devtools_unittest.cc
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/components/ui_devtools/devtools_client.cc
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/components/ui_devtools/devtools_client.h
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/content/browser/devtools/devtools_session.cc
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/content/browser/devtools/devtools_session.h
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/content/browser/devtools/protocol/tracing_handler.cc
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/core/inspector/InspectorDOMDebuggerAgent.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/core/inspector/InspectorHighlight.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/core/inspector/InspectorLayerTreeAgent.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/core/inspector/InspectorLogAgent.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/core/inspector/InspectorNetworkAgent.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/core/inspector/InspectorSession.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/core/inspector/InspectorSession.h
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/core/inspector/LayoutEditor.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/core/inspector/MainThreadDebugger.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/core/inspector/ProtocolParserTest.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/modules/accessibility/InspectorTypeBuilderHelper.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/WebKit/Source/web/InspectorOverlay.cpp
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/CodeGenerator.py
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/README.chromium
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/lib/Array_h.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/lib/DispatcherBase_cpp.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/lib/DispatcherBase_h.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/lib/FrontendChannel_h.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/lib/Maybe_h.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/lib/Object_cpp.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/lib/Object_h.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/lib/ValueConversions_h.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/lib/Values_cpp.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/lib/Values_h.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/templates/Imported_h.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/templates/TypeBuilder_cpp.template
[modify] https://crrev.com/2dfeded24ecab161d83c6d104c9304efb271c851/third_party/inspector_protocol/templates/TypeBuilder_h.template

Sign in to add a comment