This is a front-end blogger without routines. He is keen on all kinds of front-end oriented operations. He often writes wherever he thinks. If you are interested in technology and front-end effects, you can leave a message~ The blogger will step on the pit for everyone after seeing it. the ~
Homepage: Oliver Yin's homepage
Motto: Get up when you fall~
Table of contents
4.1 Establish http link optimization
4.2 Transmission and download of resources (front-end and back-end interaction)
I. Introduction
Recently, our partners have encountered some problems in the project, which are related to performance, so we discussed some methods for optimizing front-end performance, so we have this article~
Read it patiently, you may gain something~
2. Content overview
This article first understands the entire link process from the life cycle of the page, and then briefly summarizes the points that can be optimized for each process. There is no specific method in this article, but an overview first. In the next article, we will analyze each achievable method in detail. The general content of this article is summarized as follows:
3. Page life cycle
What is a life cycle? In layman's terms, it is the process of a thing from birth to death. This process is called the life cycle, so when applied to the page, the life cycle naturally refers to the birth of the page to the creation of the page;
So, let's think about it, when did the birth of the page start? Is the rendering on the page similar to mounted in Vue? In fact, it is not , the life cycle of the page starts, in fact, it should be counted from the URL input in the browser, until the page is rendered ;
The general process is as follows:
When we enter a url in the browser, the browser will first create a network request thread for the url . During the creation process, the url will be parsed, such as parsing out the host, parsing out the port prot, etc.;
When the creation is completed, it is natural to start creating an http request . In the process of this request, there will be what we usually say "3 handshakes, 4 waves";
If the request is established successfully, the backend will send the frontend package to the browser in the form of a data packet . This frontend package is our daily frontend development project code, mainly Html+CSS+Javascript;
The browser starts to work after receiving the data packet, and the work exists in the rendering process in the browser , roughly as follows:
So what does this have to do with our performance optimization? There must be a relationship. If there is a problem with any link in this link, it is reflected in the perception of end users that "the webpage cannot be opened", "it is very slow to open", "seriously stuck" and other problems ;
Therefore, only by knowing the complete link can we optimize each link in this link, so as to achieve the ultimate goal of front-end performance optimization;
The performance optimization we talk about every day is often aimed at the fourth link, which is at the code level, but sometimes this cannot solve the problem. If there is a performance problem, the first thing to confirm is which link the performance problem is in Appeared ~
4. Performance optimization
4.1 Establish http link optimization
The most important optimization in this link is to reduce the number of http requests . This is the core purpose of optimization. The most direct method is to merge resources . For example, under normal circumstances, it is necessary to initiate two http requests to obtain resources. For some construction methods, two resources are packaged and merged into one, so that only one request is required;
Of course, reducing http requests also includes using some lazy loading techniques , for example, the request for pictures should be made when the pictures are about to be displayed in the visible area;
Then there is the http protocol. Of course, the protocol of modern browsers has been upgraded. Under normal circumstances, this optimization point should not need to be done. In the http1.0 protocol, "3 handshakes, 4 waves" In the process, you need to continuously create http requests. When you reach http1.1 or above, then the tcp protocol can be reused at this time, but if your project is really http1.0 protocol, then it is time to upgrade...
4.2 Transmission and download of resources (front-end and back-end interaction)
From the perspective of the front end, there are still not many optimizations we can do in this link. There are roughly two core purposes:
- Compress resources and reduce response packet size ;
- Use some caching techniques to avoid repeatedly sending requests to download resources ;
The first point is to compress resources and reduce the data package, so the time for single-page applications like Vue and React will be shorter when they are first loaded . The common ones are tools such as webpack and rollup . By compressing the project with these tools, the code size can be greatly reduced without affecting the code logic;
In addition, these tools often merge resources at the same time during the packaging process. For example, we originally wrote 3 js files. After packaging, the tools will automatically help us merge them into 1 tool. Making good use of these tools is an optimized one. focus;
The second point is to use some caching technologies . Browsers generally have a set of default execution methods for these caching technologies. Therefore, single-page applications often only request all resources when they are loaded for the first time, and use caching from the second time. , but there is one thing to note here, caching will also cause untimely updates . For example, we update the content, but users still use the old resources. Therefore, caching is a double-edged sword, and a reasonable caching strategy is also optimized. a trick of
4.3 Rendering optimization
This link is what our front-end really needs to pay attention to in daily life. It is different from the above two links. The above two links are actually mainly about the use of tools, especially for projects built on scaffolding. As long as they use their own packaging tools reasonably, they can Solve the problem of compression and merging;
But this link is different. It needs the code we write every day to improve performance. I personally think that the core is to reduce unnecessary redrawing and reflow , reasonable code writing and manual release of unnecessary variables ;
In the case of tight performance, high-performance operations will most likely cause the browser to fail to respond. Once there is no response, the only way to do this is to close the browser;
I believe everyone understands redrawing and reflow. Here is a brief explanation of the last two points. The meaning of reasonable code should not cause some logical errors, such as infinite loops. Once the infinite loop appears, the result goes without saying...
The next step is to manually release unnecessary variables. I feel that the daily implementation is basically not in place, and it relies more on the garbage collection mechanism of the browser, such as this:
// 通过接口获取到了一大串数据
let result = {//...后台数据}
function handle(){
// 正对数据进行了一大串的操作
}
// 结束以后释放
result=nullWhen we no longer need this data after performing a series of operations, the variable result needs to be released manually. Only in this way will the data in the cache be cleared and no longer retained, otherwise we can only wait. , it will not be cleaned up until the browser executes the garbage collection mechanism by itself. Although the browser's own execution is not a big problem in most cases, but... how to say, the garbage collection mechanism will only clean up and no longer Variables used, sometimes variables will be occupied all the time because of our coding problems, so the browser will not clean them up , and the accumulation of more and more memory will eventually lead to the final result. Needless to say...
V. Summary
This article mainly outlines the points that can be optimized on the entire link from an overall perspective. There are roughly the following optimization methods:
- The purpose of loading optimization is to reduce the loading time of the first screen by reducing http requests and lazy loading technology;
- The purpose of construction optimization is to reduce the volume and quantity of resources, and rationally use mainstream construction tools, such as webpack, to merge and compress resources;
- The purpose of cache optimization is to avoid repeated requests, but the cache strategy needs to be carefully considered, after all, there are advantages and disadvantages;
- Rendering optimization , the purpose is to reduce high-performance operations, such as reducing redrawing and reflow, reasonable code, and timely release of resources;