"Continuous page repainting and debugging page redrawing" in Chrome Dev Tools

Today we will talk about how Chrome Dev Tools help us deal with the extra redrawing of the page.

Past parts:
"Workspace" and "Snippet"
"Sass Support"


')

Training

As always we put the latest Chrome Canary . Optional, but very convenient to use a separate environment for testing. All that we need today, there is already activated.

Situation

Consider the real case. There is a very simple local news aggregator page . Made on AngularJS. But today it is absolutely unimportant. When filtering news using css-animation. And here we notice that it works somehow not very smoothly ...

Identify the problem

Open Chrome Dev Tools ( Cmd / Ctrl + Shift + I ). Open the Timeline tab. Under it go to the Frames tab. From below, we find the Record button, click on it and start making various news filtering on the page.





All events will begin to be recorded in the Dev Tools window with rectangles of different colors. In this case, we are more interested in the upper window, which displays the number of frames per second. The smaller the height of the rectangle -> the closer it is to 60 FPS (60 frames per second) -> the better for everyone. Our application will "sit" in some places. And it “sits” exactly in Rendering (purple color) and Painting (green color). Both of these events are associated with the page rendering.



Now go to settings (gear icon in the lower right corner). In Settings -> General we find the group of settings Rendering . All of these settings help debug page rendering speed. Let's go in order.



Mark the first item " Show paint rectangles ". This setting paints all areas of the page that are redrawn in red. We try to follow the links - all is well. We do filtering - many areas are painted red many times, this is sad.



The next setting is " Show composited layer borders ". It shows which parts of the page Chrome is trying to pass on to the GPU . Similarly, we try to do all sorts of filtering, we see an orange outline around some elements.



Next is the " Show FPS meter ". Vyvglazno-blood-red (is it just me? ...) meter frames per second. It is updated only at the event of redrawing / drawing, for this we are moving the mouse or doing news filtering.

And here we have reached the main topic of this article - " Enable continuous page repainting ". The tool shows in real time how many milliseconds page rendering takes. We do our filtering - we get as many as 149.5 ms on the page's page!



The beauty of this tool is that we can disable various css-properties and immediately see how the rendering time has changed. Hmm, what can we have so much increase the page rendering time when using animation?



We try to disable border-radius and text-shadow for the labels of the source of the news and the time of its publication. A wonderful tool shows that it reduced the page rendering time to 102.4 ms !



Well, you and I initially knew that the matter is still in the animation itself using translateX :) Disable and see the result:



Voila, the maximum time is 17.7 ms . Not perfect, but we reduced the rendering time by 84.7 ms!

Helpful hint: On the Elements panel: to disable certain DOM elements, you do not need to delete them. You can just hide them. It is enough to select an element and press the H key on the keyboard.

Conclusion

This is how you can use Chrome Dev Tools to speed up page rendering. “Continuous page repainting” is a great tool to see real-time performance changes.

What conclusions can be made? Pay attention to the performance of your web application. This is especially true of all animations, shadows, rounding, and other things. Try not to use border-radius and box-shadow together, because this can greatly underestimate page rendering speed.

Hope that post was helpful. All nice coding!