Remember a front-end "Performance Optimization", first screen optimization

First of all, we must know that performance optimization is nothing more than two points: faster requests, lighter posture

Faster request

1. Find out about DNS cache, there is not much content, just search it
2. CDN (big picture, big file, class library), now all kinds of cloud can provide this, see who does it better (hit rate, return rate), the core principle is load balancing: you will find it after you request An optimal server node. In fact, you probably know it. In fact, you can't touch these codes. Qiniu and Tencent Alibaba Cloud have prepared them for you. If you spend money to deploy it, just request the address directly.
3. Browser caching, two points: strong caching, negotiation caching. Simply put, the former directly uses the content requested for the first time, and no more requests will be initiated within the expiration time. The latter will ask every time the back-end content has changed? Make another decision.
4. Under the understanding of http2, it will be more complicated, mainly for header information compression, caching, and link reuse. For multiple requests, the speed is not a little bit or two.
5. Resource consolidation, domain name fragmentation. The former represents the Sprite image, and the small icon can actually be implemented with css and base64, so there is no need to make a request. Domain sharding is to split the request into multiple domain names, because the number of requests for the same domain name by the browser is 6-8 times, and hundreds of requests cannot be thrown out in parallel at the same time, and they have to be queued. If you use http2, you don't need to do resource consolidation and domain fragmentation.

Lighter posture

1. Gzip compression comes as standard (requires back-end cooperation). But the pictures can’t be pressed, let Qiniu handle them, they have their own api
2. Pictures in webp format, special compression, but there are browser compatibility issues, you can judge by the front end, otherwise the original format will be displayed
3. Lazy loading of pictures can barely be counted as this category, you must be ready to show you before loading pictures
4. Lazy loading of routes can be considered, but for large projects, the principle is to split the logic code files into many small files, and then load them after this route. The corresponding files will optimize the loading of the first screen.
5. Another thing is to remove the .map file when packaging. It seems to be canceled by default. It is about finding error information.

By the way, introduce a hyperlink to an article from a previous ignorant period