This paper is participating in thePerformance optimization combat record”Topic essay activity
Front-end performance optimization is a question that every project will encounter and you will often be asked in interviews how you do performance optimization in your project. Here are some of the ways I do performance optimization in my project.
1. Location of CSS and JS resources
This point is optimized for loading.
CSS puts header, JS puts footer.
Current engineering practices: Never mind, webPack builds are arranged automatically.
Remark:
1. Js files used to calculate REM on mobile terminals should be placed in the header before CSS to avoid secondary page layout.
2, CSS will block HTML rendering and JS execution, JS will block HTML parsing and rendering, so CSS is likely to block HTML parsing and rendering.
2. Resources are confused and compressed
This point is to reduce the size of resources, marking the focus, the optimization effect of this method is obvious.
Confusingly compressing resources can reduce code readability for security purposes and reduce resource size.
Current engineering practices: Never mind, webPack builds are arranged automatically. (Handwritten configuration of their own remember to match confusion)
3. Resources plus Gzip
This point is to reduce the size of resources, marking the focus, the means of optimization is obvious, generally can reduce resources by more than 50%.
If the resource is not connected to the CDN, add gzip to the nginx on the application server.
Current practice: Many projects put static resources on the application server for online construction or graph convenience, so this point is also the point where many applications are not optimized.
4. Merge resources
The point is to reduce the number of requests.
In the browser, a maximum of six requests can be made for the same domain name. If the number of requests exceeds the limit, the request queue will wait. Reducing the number of requests reduces the number of TCP handshakes and the impact of network jitter.
Current engineering practice: webpack by default merges the third package in node_modules and combines it into a chunk file, so this part is not concerned.
There is a strategy involved here, and other related optimization methods will be described after the explanation.
5. Make pictures as Sprite /iconfont/base64
This point is also used to reduce the number of requests and focus, and can sometimes be used to achieve good optimization results (when a project has a lot of cutbacks).
The image here is the cut image used in the project, Sprite image is not concerned with now, basically do not do that.
Iconfont: For monochrome ICONS only. For multicolor ICONS, you can only use SVG or images as Base64
Base64: pictures do base64 directly, this is also commonly used, generally to 4KB (some set 10KB, according to their own project situation) the following pictures do base64.
Current engineering practice: Webpack urL-loader to do this function, can be matched (Vue scaffolding comes with).
6. HTTP cache
This point is to re-reuse local resources after the first access, reducing requests.
You are advised to add the HTTP cache to the CDN only. Do not add the HTTP cache to the application server.
For hash Chunk resource packages, the cache duration can be longer, for example, 30 days or 90 days.
For other non-Hash chunk resource packages, the content may be changed without changing the address. Therefore, it is forbidden to set the cache length too long, which is generally 1 hour. In this way, when the CDN is updated, the user’s browser can also be updated one hour later.
Remark:
1. CDN cache is not of two types, one is the cache of node server and the other is the local cache of user’s browser. Usually, in NP, only the cache of node server is refreshed, but the cache of user’s browser is not refreshed.
2. The HTTP cache on the mobile app only follows the HTTP cache policy during the lifetime of the current app. When your app is killed and exits, the cache will become invalid.
7. Compress the image/use the appropriate image size
This point is to reduce the size of resources, mark key points, the optimization effect is obvious, many projects are pictures of hundreds of KB or even more than 1M.
1) Cut image compression before use, generally use 2 times of cut image, use Tinypng.com for compression, compression once.
2) Online pictures.
8. Lazy loading of images
This point is to reduce the number of requests to visit the first screen, and mark the key point. The effect is obvious for pages with many pictures, while the content displayed on the first screen on the mobile terminal is less, and the optimization effect is also obvious for the list page.
Just use the Vue-LazyLoad component.
Remark:
Image lazy loading and route lazy loading are not the same thing, well distinguished, but essentially reduce the first screen load of resource requests.
9. CDN resources
The original purpose of resource release CDN is to allow users to send requests to the server more quickly (the node server is close to users), but now the network speed is very fast, and the delay on the network node is not as obvious as before, so this optimization method is not very obvious.
CDN is also used for caching, but the application server can also add caching after weighing the pros and cons.
Mobile terminal application static resources such as commodity management and learning center are not put on CDN, and the whole page loading time TP90 is within 2 seconds.
10. Avoid redrawing/reducing DOM structure complexity
This point is optimized rendering, the effect is not obvious.
Now that the browser kernel is powerful, rendering time is in most cases much less than request time.
11. Make proper use of lazy route loading
This point is only for the front-end application with the separation of the front and back ends. The optimization effect depends on the situation, and sometimes the opposite effect may be formed.
During the interview, I asked almost every interviewee, but I didn’t answer them well.
Lazy route loading conflicts with 1.4 Resource Merging.
1) Resource merging is generally for third-party packages that are not frequently modified, and business JS codes are generally not merged.
2) Routing lazy loading is to split the JS code of the page into chunk packages one by one, and load JS resources only when the page is loaded.
3) Users frequently visit the page, do not use lazy load routing, frequently visited page is mainly the home page; For pages frequently visited by users, users must load the chunk JS of the page to access the page. Lazy route loading will lead to loading the resource manifest file first, and then loading the chunk package of the page, thus forming a serial request for resources. It could have been loaded in one load but it had to be split up into two and it was serial rather than parallel.
In fact, the chunk package of a page is not very large, and merging it into the main chunk will not significantly increase the request time, but the network delay consumption caused by more requests is obvious.
12. Component libraries are loaded on demand
This point is for the front-end application with the separation of front and back ends. The optimization direction is to reduce the size of resources and mark the key points, and the optimization effect is obvious.
A complete component library is as large as 40+ components, and the size of the whole package plus GZIP is at least 100KB or more (Element-UI 300KB +). However, there are only a dozen or twenty commonly used components in our project, so we do not need to use so many components.
Remark:
In addition to the most efficient reuse of static resource caches by multiple systems, CDN is considered for third-party packages instead of NPM installation. The specific situation is measured by many systems, and the optimization of individual systems is not obvious.
13. Lazy loading of third-party packages
This point is to reduce the resources loaded on the first screen, but the resources that need to be loaded on the whole page are not reduced, but the segmentation process is done, marking the key point, and the optimization effect is obvious.
There are only so many things that can be displayed on the screen. For content that is not on the screen and relies on a third-party CDN package, or for a user to manually trigger a function that relies on a third-party CDN package (which is not needed in the general page rendering process), you can lazy-load the CDN package. There is no need to introduce it directly in HTML. Used with dynamic script inserts.
This reduces the stress of loading a rendering on the first screen.
Remark:
When the third-party package is loaded when it is needed, users will feel slow due to the long loading of third-party package, which is its disadvantage. This problem is solved by the following optimization point.
14. Perform preload and prefetch for resources
This point is to load the resources to be used in advance, and then directly use the loaded resources to perform the request. The optimization effect depends on the situation.
Preload preloads the resources to be used on the current page (not executed). Prefetch preloads the resources to be used on the next page (not executed).
This optimization point can optimize the loading effect of the first screen according to the situation, which is good for the subsequent operation experience.
In combination with 2.3 Lazy loading of third-party packages, in order to improve user interaction experience, we will be preloaded by our lazy loading of third-party packages using Preload, so that users can directly execute pre-loaded resources when they interact.
At the same time, for projects with separated front and back ends, routing lazy loading is used. At this time, prefetch is added to load the resources of the next page in advance, so that users can switch pages without feeling, and there will be no page delay.
Current engineering practice: Vue scaffolding (since 3.0) comes with this function by default, with its own Webpack configuration plus @vue/preload-webpack-plugin.
Manual writing:
<link href=/ js / 6.719 bfbca. Js rel=prefetch>
<link href=/css/app.5abb7818.css rel=preload as=style>
<link href=/js/app.d22ec8fc.js rel=preload as=script>
Copy the code2.5 Use multiple Picture system domain names
This point is to expand concurrent requests, the optimization effect depends on the situation, for the home page of this commodity map a lot of pages, the effect is obvious.
As mentioned above, one domain may have 6 concurrent requests, but the page may have more than 6 images. In order to make the images render faster, use multiple image system domain names to increase the number of image loading requests.
Img10.xx.com, img11.xx.com, img20.xx.com, img30.xx.com, etc.
2.6 Performing DNS Pre-resolution for Domain Names
This point is to reduce the connection time, the effect is general on PC, mobile has a certain effect, because the mobile DNS resolution is poor.
As mentioned above, using multiple image system domain names brings multiple DNS resolution, sometimes the page load time will be stuck in the DNS resolution; In addition, at least one back-end interface domain name will be requested on a page (as many as 2 or 3), so it is good to add a layer of DNS pre-resolution.
Example:
<link rel="dns-prefetch" href="//img10.xx.com">
Copy the codeAdd the domain name you want to use directly to the HTML header, without using webpack to generate.
2.7 Upgrading the WebPack Version
This point is also essentially reducing resource size.
The resource packages packaged with WebPack1 and WebPack2 are larger than those packaged with WebPack3 and WebPack4.
The packaging mechanism of Webpack is being optimized. After upgrading Webpack with the old projects of Webpack 1 and Webpack 2, the package size can be significantly reduced.
2.8 Small bag for big bag, handwriting for small bag
This point is also essentially to reduce the size of the resource, depending on the package used.
Some third-party packages are very powerful and complete, but we only use a small function in them. Introducing such a large and complete package into the project is not worth the cost. You can choose to find a small package that can achieve the same function or replace it by hand.
If dayJS replaces Momentjs, momentjs would be close to 100 KB without gzip.
For example, if the page uses a Promise, you don’t have to type the entire Babel-Polyfill, just make an ES6-Promise.
Third, summary
Performance optimization methods can be summarized into the following directions:
3.1. Reduce the size of resources on the first screen
1.2 Resource confusion compression, 1.3 Resource Plus Gzip, 1.7 Compressed image/Use of appropriate image size, 1.8 Image lazy loading, 2.1 Rational use of Route lazy loading, 2.2 Component library loading on demand, 2.3 Lazy loading of third-party packages, 2.7 WebPack upgrade, 2.8 Package replacement, Handwriting for small bags
3.2 Reduce network consumption/make proper use of network requests
1.4 Resource Merging, 1.5 Image Making Sprite/Iconfont/Base64, 1.6 HTTP Caching, 1.9 CDN loading of resources, 2.4 Preload and Prefetch of Resources, 2.5 Using Multiple Image system domain names, 2.6 DNS pre-resolution of Domain names
3.3 Optimized Rendering
1.1 CSS, JS resource location, 1.10 Avoid redrawing rearrangement/reduce dom structure complexity
For pages visited for the first time, the optimization effect of reducing the first screen resource size is the most obvious.
conclusion
To page load fastest, in fact, the return to nature, simple page, no resources, no framework, with native directly, it can use CSS to achieve don’t use js, one page is only a js and CSS file, this page must be able to achieve seconds away, but the reality is now the front end of the application becomes more sophisticated, Only some small pages of apps can be so simple, not frame.
Remark:
Tmall those double 11 technical articles, so many pictures of the active page can be opened in seconds, mainly rely on the support of the client, or use cross-end technology to do hot update, or the client loaded in advance cache good active page, to use the time to switch over.
Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.