write in front
Today I will talk about one of the points in the performance optimization part. This point is called willchange. The main reasons for mentioning it are as follows: First, many people know that using this can improve performance but don’t know the reason. Second, when we use it Although it can improve performance, it does not mean that it can be used arbitrarily. Third, let’s talk about its working principle. I will try my best to explain these three things below.
what is willchange
You can first take a look at MDN's explanation of willchange . First of all, it is a CSS attribute value. It roughly means that after setting this attribute, the element is equivalent to telling the browser in advance what you may do later. For example, if you want to Reverse, move, change transparency, etc. Of course, if you are not sure about the changes you may make later, you can directly write auto. At this time, it means letting the browser think about the operations we may do later. This is browsing The browser itself will find a way to predict your changes, but a better situation is that before you use it, it is best to do what you want to do later, so that the browser can make accurate preparations for your advance notification. This is what wilchaneg does. one thing.
What does the browser do when we add the willchange attribute to a block box?
As mentioned in the above paragraph, when setting willchange, it is equivalent to telling the browser in advance what we may do later. So how does the browser prepare after knowing it? It first lists the elements for which you set the willchange attribute into a separate layer. After this layer is independent, your subsequent operations are equivalent to having no connection with other elements. It processes this piece separately and uses GPU acceleration alone. Processing, here GPU acceleration can be understood as a processing method that is stronger and faster than the CPU rendering capability. However, because the things that the GPU can do are relatively limited and are generally related to display, its performance is stronger because of the things it can do. Relatively simple.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="shouLayout" style="background-color: aqua;">1</div> <div class="shouLayout" style="background-color:#f40">3</div> <div class="shouLayout" style="background-color: aquamarine;">4</div> <div class="shouLayout" style="background-color: black;">5</div> <div class="shouLayout" style="background-color: brown;">6</div> <div class="shouLayout" style="background-color: chartreuse;">7</div> <div class="shouLayout" style="background-color: cornflowerblue;">8</div> <div class="shouLayout" style="background-color: darkblue;">9</div> <div class="shouLayout" style="background-color: darkgreen;">10</div> </body> <style> .shouLayout { will-change: transform; } </style> </html>
Why can performance be improved after adding layers (how does the browser render a page with high performance)
Here we will briefly talk about the browser rendering process. Early browsers tiled a page into the screen. After getting the html code, (the js parsing process will not be explained here) through the style proxy, that is, browsing The device's own preprocessing styles and user-defined styles are calculated according to the style priority to get the final calculated style result, which is the final style list. The picture is drawn according to the style. The drawing process can refer to canvas, because canvas It also works by calling the drawing function of the browser itself, and the final drawing result is displayed to the user. This is a process of browser rendering. Of course, the real thing is much more complicated than what I described, but here I just explain willchange. Improve Let me explain the reasons for performance. As mentioned earlier, if they are all tiled, then when we change the geometric position of one of the elements, we change its coordinates. Drawing is also done through coordinates. The coordinates are drawn by adding pixels. , when changing the position of the elements, it will cause reflow, that is, re-layout, and then continue to re-draw and repaint. This is very performance-consuming. The rendering of the entire page itself is very complicated. One of the small changes also led to so many rearrangements. The operation will cause the page to be very unsmooth. In order to solve this problem, the browser later came up with a more ingenious solution, which is to layer the page according to the level. One layer is often not moved, and the other layer is often changed. In this way, the page is often changed. When a layer changes, it will only affect its own layer and not the immovable layer. This greatly reduces the number of rearranged elements. At the same time, each individual layer will use an independent GPU to accelerate processing. See At this point, maybe you can understand why willchange can improve performance, because it creates an independent layer, which conforms to one point of browser performance optimization.
Analyze an example
A demonstration interface that is quite popular recently in window12 is implemented using html. We can take a brief look at it.
- First of all, its basic page layering is quite serious.
- The layering becomes more serious when we open a control
- You can see that it is divided into many layers to do different things, but it does not use any optimization methods. It just uses z-index to place different controls on different z-axes.
- Let’s take a look at his source code
- It can be clearly seen that when we switch to different levels, it is actually changing the z-axis arrangement of different divs. Of course, the processing methods are different, but this will cause some lags visible to the naked eye. Because of this particularity, there is rarely a need to simulate an operating system or even an interface in a browser. After all, the operating system itself is an extremely complex software, and what the browser itself can do is relatively limited. This kind of operational interaction is extremely In many cases, lags will inevitably occur even after optimization!
How to use it reasonably
Some people here may say, if I just add willchange to all elements, will the performance be invincible? Of course not, we can take a look at the layering of the CSDN homepage.
We can clearly see that the homepage of CSDN's official website has only three layers, one is the scroll bar, one is the toolbar, and the other is content. Why didn't he separate the modules one by one? Because adding a new GPU consumes browser performance, it improves performance and consumes performance at the same time. Therefore, the best thing is to find a balance in the middle, rather than mindlessly tending to one. direction!
Write to the back
I believe that after writing this, everyone has a certain understanding of this attribute and how to use it reasonably later. One more thing to say here is that the layer analysis of the browser is not displayed by default. You can click on the tool behind the browser. More options can be debugged! If you like it, you can follow it, bye! ! !