Web page rendering optimization

Due to the pressure of business, we strive to do everything faster. Planning suffers from this and many things are not taken into account. For example, it is easy to forget about performance and, after some time, to face the fact that on weaker machines and tablets, the abundance of moving elements terribly slows down and twitches in convulsions. Let's see what can be done if you encounter such a problem or would like to avoid it.

Let's start from afar, with the thing with which you read all this. Most screens update the image about 60 times per second and this creates the illusion of movement. With each update, the image changes slightly, so it seems to us that all transformations take place smoothly. In fact, we are talking about frames, as in film.

If the image (in our case, the web page) does not have time to render, we can discern that it is twitching, the smoothness is gone, and we skip the frames. To show 60 frames within 1 second (1000ms) we need to show a new frame in about 16.6 ms. In other words, if we see motion jumps, the new image does not have time to render in 16 milliseconds.
')
To identify the problem, we need to consider the steps of how the browser creates the page and understand what the processor is doing instead of the useful and necessary activity. The whole process of assembling the page is described in detail in the work of Tali Garciel “How the browser works” . If you simplify, then when the page loads, the browser parses the html and css into nodes, forms trees from them, combines them, and calculates how each node should look.

Then two processes occur:

• Layout - the position and size of elements is calculated.
• Paint - styles are applied and elements are drawn directly.

When you change something on the page, the browser must re-calculate and update the changed elements. In itself, the redrawing of elements is an expensive operation in processor time and should be avoided unnecessarily.

We can verify this by looking in the Chrome Dev Tools and using the Timeline (as of May 2015, it looks like this).



Timeline allows you to record various browser activities while interacting with it and to estimate how much they take up CPU time. If we are talking about rendering, then we can estimate how much it costs to processor time to redraw one or another element. Not all of them have the same value when redrawing. Some more expensive and complex, others less. This is determined empirically by recording and studying the timeline.

Dev Tools also has an option to Show paint rectangles, which allows you to determine if a redraw is occurring at the moment. The element that is being redrawn is highlighted. This option is enabled in the Rendering tab.



Consider a simple example. Suppose we have a certain block that we animated in a rather simple way - by changing the left property of an absolutely positioned element.

.elem{ width: 200px; height: 100px; background-color: lightgray; color: white; position: absolute; left: 100px; top: 100px; transition: 1s ease; } .elem--active{ left: 400px; } 

If we consider this action with the option enabled above, we will see that in the process of movement the redrawing goes on constantly. In fact, nothing changes in this block and it does not need to be redrawn. Consequently, these are unnecessary actions from which you need to get rid of in order to keep within 16 milliseconds.



How can we do this? If you look at the specification (http://www.w3.org/TR/css3-transforms/#transform-property), then it says in the description of the translate property that if a property has a value other than empty, then it will create a separate context and the item will be displayed in a new layer.

Historically, browsers have combined the entire web page into a single layer, but over time it became necessary to isolate some elements separately and manage them using a graphics processor (GPU). This greatly reduces the load on the CPU.

Rewrite our CSS for use with transform: translateX ().

 .elem--active{ transform: translateX(400px); } 

And now let's try to call the same interaction.



The region stopped redrawing constantly, and a separate layer was created. Animation has become smoother due to the fact that transform uses subpixel precision (image processing technique to improve the quality of its display). The left property is tied to the pixel grid and the movements in the first variant were more “pulled”.

It should be noted that separate layers are also created under a number of other conditions. If we recall how and why layers appeared, then it is quite possible to guess about the list of these conditions - these are all elements whose purpose is to actively change and redraw. For example: tags