Notes: Optimization of front-end performance (summary)

Three parts of optimization

• Optimization of pictures
• Reduce http requests
• Reduce the size of http requests

Enable Gzip compression

Picture optimization

• Image lazy loading
• When lazy loading, use the default image to occupy the place first, and load the real image in turn after loading
• Use pictures in base64 format
• Use webp format pictures
• Small background picture synthesis (sprite picture)
• Use svg pictures
• The front desk directly adds the width and height when requesting the picture, and the server sends the processed picture directly
• For pictures with higher resolution, the server first sends a blurry picture with a very low resolution, and waits until the user clicks on the large picture, or when the network is idle, the high-definition picture will be requested to be replaced

Reduce http requests

• Route lazy loading
• Use kepp-live cache for important pages
• Secondary page preload
• Give the user an animation effect when loading
• Combine css and js files
• Avoid repeated resource requests
• Avoid redirection
• Cache large files returned by request

Reduce http request volume

• Reduce the size of cookies
• Try to use json format for data transmission

Plug-in optimization

• Use on-demand loading

CSS optimization

• Do not use empty selector

div：{
    
    }

• Animation effects are directly converted to Bezier curves and matrix operations using conversion tools
• Reduce the prefix in front of the selector (the selector is searched from right to left, with more prefixes, and more query time)
• Use css3 animation more and less js animation (because css3 has hardware acceleration enabled)
• Delete useless html tags

js optimization

• Cache DOM node

const _div = document.querySelector('div')
// 使用时直接用 _div
// 不要再使用的时候用document.querySelector('div')

• Avoid using eval and Function

• Reduce redraw and reflow

• Avoid unnecessary loops, use break and countnue reasonably

• If there are videos and audios on the page, do not set auto play, when the user clicks, it will be requested and played

• Minimize the use of closures, and pay attention to whether there is cleared memory every time you use closures

• Try to avoid binding events to dom one by one, and use higher-performance event delegation