1.DNS
1. Firstly, DNS resolution takes a lot of time, so we can pre-resolve DNS to obtain the IP address
2. Reduce the distance between the user and the server, CDN proxy server distribution network.
2. Cut back on three handshakes and four waves
1. Establish a long-term connection
2. Sprite (Sprite) Put multiple images on one image
3. File packaging, delete redundant files (webpack)
3. Parse files in advance
Preloading, I’m not going to use it right now but I’m going to use file preloading.
4. Optimization of pictures
1. Selection of picture type
The pictures are divided into bitmap and vector map. Bitmaps are made up of glowing pixels, and each pixel is described by binary data, usually PNG, GIF, JPG, which takes up a lot of memory. Vector graph is composed of points, lines and planes. It has a small memory and is generally SVG.
- PNG: lossless compression (the pixels will not disappear during compression), occupies a large memory, and will be more clear after amplification. Usually used to make small logo
- JPG: lossy compression (when the compression of many not very important pixels will be removed, the download speed is faster), the footprint is small, the picture will be more blurred after enlargement.
- GIF: supports dynamic diagrams
- SVG: Small memory, no distortion, good compatibility because SVG images written in code are expensive to learn and consume performance for rendering. Usage: Alibaba vector icon
2. Sprite (Sprite) as mentioned above
3. Use CSS instead of images
5. Anti-shake and throttle
6. Browser cache (strong cache and negotiated cache)
Lazy loading and preloading
8. Reduce backflow and redraw
9.DOM diff
10. Place <script></script> under the body to prevent blocking rendering.
Finally:
There is time for detailed updates.
Recommend everyone to see yahoo military regulations 35 optimization. Jianshu.com/p/4cbcd202a…