Today I mainly share a few practical solutions for performance optimization. During my internship in the company a few months ago, I summarized some practical projects through reviewing. This is for children's shoes who have just encountered front-end performance problems. I hope to provide you with Some entry-level guidance.
Talking about the topic of performance optimization, it is too big, not only the performance optimization of the front-end, but also the performance optimization of the entire link. Coordination of front-end, back-end, server, network and other modules.
I’m working on performance optimization. Some of the points about performance optimization are that the author of "Front-end Performance Optimization", Ali’s revised words, gave me some pointers, plus the application and feedback in actual combat, which made me feel something. , Write the value of it.
The scope of performance optimization shared today is also based on some of the businesses and technology stacks used by my previous company. There are specific optimization scenarios, and it is more interesting when we talk about performance optimization.
Facing technology stacks and scenarios
If it is not for companies that have particularly strict technology stack requirements, these technology stacks are indispensable for front-end development. HTML5 + CSS3 + jQuery, some companies are still using JSP, .Net to develop, for this traditional technology, we need to use some special means to optimize.
Getting rid of frameworks like Vue that is abandoning traditional DOM manipulation and only focusing on traditional performance optimization, how do we start?
PS: This article does not talk too much about framework performance optimization, only starting from traditional performance optimization points.
Start with positioning problems
Once, there was a problem with an online project. It took a long time for a certain part of the page to be rendered. What went wrong?
The positioning problem, what caused the slow loading of part of the content of the page? Is it the data acquisition process, the page JS loading process, or other rendering and drawing processes?
Locate the problem through the performance of the artifact commonly known as the browser console.
Here I take a certain website as a project object, as a demonstration.
That part takes a long time. Through this diagram, you can analyze which link has a longer rendering time.
After locating the problem, start to optimize. But the premise of optimization is to specify the basic content of optimization, otherwise we don't know where to start optimization.
Data request time is too long
Sometimes when we are working on a project, the amount of data is too large, and the process of getting the data from the server takes too long. To shorten this time, we need to reduce the number of requests and the time for a single request.
To reduce the number of requests, we can get the data once as much as possible instead of dividing it into multiple requests. If there are too many requests, it will cause thread blocking.
We can make appropriate optimizations in combination with specific businesses and merge some of the returned [data] to reduce the number of requests.
However, the time required for a single request is too long and it is time-consuming. When we transmit a large amount of data, we can only compress the data so that the single request will become faster.
There are other solutions, such as lazy loading, where the page presents the user with the part of the content, instead of requesting all the content back in one go. For another example, the audio uses a streaming file instead of requesting the entire audio to be played back to the user, but in the form of streaming, playing and requesting at the same time.
Avoid redrawing and reflow
In addition, the most important thing is the optimization of the page. First review the working principle of the browser.
Animation: How does a browser work?
One of the links is the rendering link, which renders the synthesized render tree through the calculated pixel positions and styles to the page, and finally presents it to the user.
Although the page we see in the browser does not feel, but this process is very time-consuming, especially when we slightly change the position, size or style of an element on the page, it will cause the entire page to re-render.
If there is a lot of content to be rendered on the page, every time the user changes a place, it will cause all the rendering, the performance is very time-consuming, and finally the user experience is not good, and the page becomes unresponsive in severe cases.
It is mentioned in many articles that we have seen that we should try to avoid frequent manipulation of the DOM, so as to avoid page reflow and redrawing.
We found out what improvements Vue has made. Since operating the DOM leads to poor performance, I will not operate the DOM, so Vue abandoned the traditional DOM operation and opened the data-influenced view mode. (PS: In the later analysis of the Vue source code article, I will mainly share this part of how it is implemented ingeniously, and then take everyone to write a simple version of Vue by themselves)
But very helpless, some companies do not use Vue, there are too many such companies, and the leaders said they just don't want to use Vue. Just want to use traditional HTML5 + CSS3 + jQuery, so what should we do for optimization?
I personally made some performance optimization summaries based on this. Since Vue is not allowed, the specific scene decided still involves operating the DOM. Although I can't give up the traditional DOM, then I try to reduce the operation of the DOM as much as possible. Yes, thinking in this direction, we can summarize the following A few points of content, the small book is focused on.
1、
Separate read and write operations
Our frequent changes to the position and size of the page style will cause page reflow and redrawing. Contemporary browsers have made a little optimization for this. If the current line of code changes the size or position of the element, it will not immediately cause the page to re-render, and Determine whether the next line also changes the element size and style.
div.style.background = '#fff'
div.style.color = 'red'
If so, these consecutive codes will be counted into a rendering queue until the next line of code is not the code that changes the style, and then the page rendering is performed uniformly, which greatly reduces page reflow and redrawing.
According to the browser rendering queue mechanism, when we write code, we separate the read and write attribute operations, like the following.
var curLeft = div.offsetLeft;
var curTop = div.offsetTop ;
div.style.left = curLeft + 1 + 'px'
div.style.top = curTop + 1 + 'px'
If you do not separate the read and write operations, but mix the read and write operations to write, this will cause continuous reflow and redraw.
2、
Centralized style changes
In the same way, when we use JS to change styles in batches, we must change the styles collectively.
box.style.cssText = 'width:200px;height:200px'；
box.className = 'aa'
3、
Cache layout information
We usually pass the size of the JS dynamic layout, which we usually do.
// 以下会引发两次回流
div.style.left = div.offsetLeft + 1 + 'px'
div.style.top= div.offsetTop + 1 + 'px'
But according to what we have summarized above, this is not good because it will cause multiple redraws.
If we do this, first cache the obtained layout information through variables, and then change the style uniformly.
// 修改为：只会触发一次回流
var curLeft = div.offsetLeft;
var curTop = div.offsetTop ;
div.style.left = curLeft + 1 + 'px'
div.style.top = curTop + 1 + 'px'4、
Batch modification of elements
If we change the elements in batches, we can take them out and change them separately, and then put them back on the page, so that no matter how many times you change, only one reflow will be triggered.
// 文档碎片
let frg = document.createDocumentFragment();
for(let i = 0;i < 5;i++){
let newLi = document.createElement('li');
newLi.innerHTML = i;
frg.appendChild(newLi);
}In addition, we can also use character window splicing.
// 字符串拼接
for（let i= 0；i< 5;i++）{
str += `<li>${i}</li>`
}
box.innerHTML = str
5、
Animation optimization
Sometimes we want to use animation, which frequently changes the state of elements, causing constant reflow and redrawing.
Therefore, in order to make the performance better, we apply animation effects to absolute or fixed position attributes (out of document flow).
Although it will be in a new plane, it will also cause reflow, but it will not affect other elements, so it looks better.
6、
Enable CSS hardware acceleration (GPU acceleration)
CSS3 can use transform to change the style and use other elements locally, because transform enables hardware acceleration and avoids [reflow] and [redraw].
box.style.transform = 'translateX(200px)'
Other attributes of hardware acceleration: transform \ opacity \ filters. So you can use these attributes as much as possible to use these attributes to change the element.
7、
Sacrificing smooth speed for speed
Every time the animation moves by one pixel, the CPU usage is 100%, and the animation looks a little jerky because the browser is struggling with reflow.
If you move 3 pixels at a time, the smoothness may appear to be reduced, but it will not cause the CPU to jitter in slower machines.
summary
The above is a summary of several optimization solutions for the performance problems of some traditional web pages. But these points alone are not enough.
As mentioned at the beginning, performance optimization is not only a matter of front-end or back-end engineers, but also performance optimization of the entire link.
Whether it is performance optimization or other aspects such as algorithms and networks, it should form a kind of ideological knowledge system of its own. By constantly encountering problems, solving problems, and then constantly improving this system, this is a small goal we ultimately want to pursue.