1. The HTTP optimizations

  • Reducing HTTP requests

A complete HTTP request needs to undergo DNS search, TCP handshake, the browser sends the request, the server receives the request, the server processes the request and responds to the request, and the browser receives the response. Therefore, you are advised to merge multiple small files into one large file to reduce the number of HTTP requests

  • Using HTTP / 2

Three versions of HTTP

  • Set up HTTP caching properly (strong and negotiated caching)

HTTP cache

2. Load render optimizations

  • Load third-party modules using CDN
  • Load resources on demand
  • Minimize redrawing and reflow

Reflow and Repaint are triggered by actions involving styles, sizes, adding or subtracting nodes, and so on

  • Try to replace JS animation with CSS animation and JS animation with Canvas animation

3. The CSS optimization

  • Reduce the complexity of CSS selectors
  1. The browser reads the selector from the right to the left#block .text p{ color: red; }If the element in the 1p element has a class nametextIf the element in the result 2p element has an id ofblockParent element of;
  2. CSS selector priority: inline > ID selector > Class selector > Tag selector; ID and class selectors are best
  • Use Flexbox layout model
  • CSS is written in the header
  • Avoid using CSS expressions such ascalc()
  • Prefetch can be used for preloading

Both preload and prefetch are optional values for the REL attribute of the Link tag. Preload tells the browser that the page must require resources that the browser must load; Prefetch tells the browser what resources the page may need and the browser may not load them.

4. JS optimization

5. Image optimization

6. Optimized first screen loading

7. Vue optimization

8. The React optimization

9. Package optimization

10. SEO optimization