You can start from network optimization, static file optimization, JS optimization, CSS optimization: faster request response, fewer requests, smaller file size, reduce browser rendering pressure. Specific ones are:

  • CDN

  • SSR

  • Front screen progressive loading

  • Server side file Compression (Gzip)

  • Code compression

  • Webpack tree shaking

  • According to the need to introduce

  • HTTP requests do not contain cookies

  • Reduce HTTP requests: Sprite diagrams for HTTP 1.x

  • HTTP Multi-ADDRESS request HTTP 1.x The number of requests from the same domain name is limited. If the number exceeds the threshold, the requests will be blocked

  • Using HTTP2.0 (FAQ: What are the upgrades to HTTP1.x? Multiplexing; Binary frame splitting; Server push; Data flow priority; Head compression)

  • Share common code

  • Use caching whenever possible

  • The interface requests on demand

  • Reduce the dom

  • Lazy loading of images

  • Route lazy loading

  • Script labels asynchronously load perform preloading on the bottom etc

  • Reducing script tags

  • Reduce variables and use fewer global variables (to find the global from the local)

  • Reduce loops and optimize algorithms

  • Event delegate, where child DOM events are responded to by the parent element

  • Throttling and anti-shaking

  • Asynchronous processing

  • Reduce the closure

  • multithreading

  • Reduce backflow and use pseudo-elements to reduce JS manipulation of the DOM

  • Merge to add DOM nodes

  • Content-visibility Does not render outside the screen

  • Reduce the complexity of CSS selectors

  • Remove event listeners and timers

  • Virtual rolling

  • vue Object.freeze()

  • Vue uses functional templates