Menu
I'm trying to figure out why my application performs very bad. So I did a performance record within DevTools and I can see that frames usually takes about 150 ms which is too long.
However I don't understand why the frame takes so much time. There is some javascript handling an input event, some DOM manipulation and some paint. It all takes about 60 ms. So why is the frame 150 ms long?
EDIT I've enabled some timeline-related devtools experiments as wOxxOm suggested. There is some kind of Update Layer task.
406
To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.
Chrome: From the options wrench icon on the upper right, select Tools and then View Source, or right-click and select View page source. To see the source for frames, right-click within the frame, and from the pop-up menu, select Inspect Element.
To be able to visually identify what was going on when you profiled your website, Timeline is painted in different colors. JavaScript execution time is marked in yellow and it's called Scripting. The purple area shows the Rendering and the green parts of the Timeline show the Painting process.
The Request Payload - or to be more precise: payload body of a HTTP Request. is the data normally send by a POST or PUT Request. It's the part after the headers and the CRLF of a HTTP Request.
I would have said it came from too much nodes in your layer, but with some research we can now find that someone already had your problem before. To quote the answerer :
In your case, I would guess that you are triggering a fundamental layer invalidation that is forcing it to update a layer high up on the tree hierarchy which is then trickling down the tree and causing each of those layers to be updated. Although its hard to say without looking at your code.
Either way if this long Update Layer Tree is consistently happening before the Layout is being recalculated, it's most certainly related to that.
I'll advise checking the ressource pointed by Alexander J. Ray, especially the HTML5 Rocks article.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
