Front-end performance optimization

1. Reduce the number of requests (merge)

  • Failure to merge results in:
    • There are inserted uplink requests between files, adding n-1 network latency
    • It is even more affected by the loss of packets
    • The proxy server may be disconnected
  • The merger has its own problems:
    • First screen rendering problem
    • Cache invalidation
  • Suggestions for file merging are as follows:
    • Common library merge
    • Separate pages are merged

2. Image processing

  • Sprite figure
    • You can reduce the number of HTTP requests, but when the consolidated image is large, the load is slow
  • Base64
    • Embedding the content of the image in HTML in Base64 format reduces the number of HTTP requests
    • But because Base64 encoding uses eight bits to represent six bits of information, the encoding increases the size by 33%
  • Use font ICONS, SVG images, and so on instead of normal images

3. Reduce redirection

  • When a page is redirected, the transfer of the entire HTML document is delayed
  • Nothing is rendered on the page until the HTML document arrives
  • If you must use redirects, such as HTTP to HTTPS, use 301 permanent redirects.
    • If you use 302, you will be redirected to an HTTPS page every time you visit HTTP
    • Permanent redirects, after the first redirect from HTTP to HTTPS, return the PAGE directly to HTTPS each time you visit HTTP

4. Use caching

  • Cache-control/Expires Indicates a strong cache
  • Last-modified/eTag negotiated cache

5. Do not use CSS @import

  • CSS @import causes additional requests

6. Avoid empty SRC and href

  • The a tag sets the empty href, which redirects to the current page address
  • The form sets the empty method, which submits the form to the current page address

7. Reduce resource size (compression)

  1. HTML compression
  2. CSS compression
  3. JS compression and chaos
  4. Image compression
    1. You can use WebP images on Android
    2. Enable Gzip compression

8. Optimize network connection (using CDN)

  1. Using content distribution network, it can redirect users’ requests to the nearest service node according to the network traffic and the connection of each node, the load status, the distance to the user and the response time.
  2. Its purpose is to enable users to obtain the required content nearby, solve the situation of Internet users, improve the response speed of users to visit the website.

9. Use DNS preresolution

  • Browser Cache ↓
  • System Cache ↓
  • Router cache ↓
  • ISP DNS cache ↓
  • Root DNS server ↓
  • Top-level domain name Server ↓
  • Primary DNS ↓

10. Parallel connection

11. Persistent connections

12. Pipe connection

13. Optimize resource loading (resource loading location)

2. JS file is placed at the bottom of the body, and is linked first, then this page 3. 4. Try not to write style and script tags between the bodyCopy the code

14. Resource loading time

1. Preload enables the browser to load specified resources in advance and execute them when necessary. 2. Prefetch tells the browser to load resources that may be used on the next page, and speeds up the loading of the next page. Lazy resource loading and resource preloading - Lazy resource loading and resource preloading are off-peak operations. They do not perform operations when the browser is busy and load resources when the browser is busy, optimizing network performanceCopy the code

15. Reduce redraw backflow (Style Settings)

1. Avoid using deep selectors or other complex selectors to improve CSS rendering efficiency 2. Avoid using CSS expressions. 3. Elements with proper height or minimum height may cause backflow. Size the picture. When loading for the first time, the occupied space will go from 0 to full, and there may be displacement and backflow 5. Do not use the table layout, because a small change can cause the entire table to be rearranged. 6. Avoid JS for effects that can be achieved using CSSCopy the code

16. The DOM optimization

1. Cache DOM 2. Reduce DOM depth and DOM number 3. Batch DOM manipulation 4. Batch CSS style manipulation 5. DOM manipulation in memory 6. DOM element offline update 7. Event agent 9. Shock prevention and throttling 10. Timely cleaning of the environmentCopy the code

17. Better performance apis

1. Use the pair selector. 2Copy the code

18. Webpack optimization

1. Dynamic import and load on demand 1. Impact () 2. Long cache optimization 1. Replace hash with chunkhash so that the cache is still valid when chunk is unchanged 2. Use Name instead of ID 4. Common code inlineCopy the code