Front end performance optimization in 10 aspects

Reprinted articles:
Front end performance optimization in 10 aspectsAkik: wait for the wind to come to the blog garden

1. Loading optimization
  1. Compression consolidation
  2. Code Spliting, which can be based on routing or dynamic loading
  3. Third-party modules are placed in CDN
  4. When large modules are loaded asynchronously, such as Echarts, you can use require.ensure to display the corresponding chart after successful loading
  5. Small module moderate merge, some scattered small module merge together to load, faster
  6. You can use pefetch to preload, which is perfect for step-by-step scenarios
2. Image optimization
  1. Minimize using Sprite, IconFont, Base64 inline
  2. Images are lazy to load
  3. WebP replaces other formats
  4. The picture must be compressed
  5. The SRCSET of IMG can be used to display pictures of different sizes according to different resolutions, which not only ensures the display effect, but also saves bandwidth and improves loading speed
3. The CSS optimization
  1. CSS is written in the header
  2. Avoid CSS Expressions
  3. Remove empty CSS rules
  4. Avoid inline style styles
4. Js optimization
  1. Js is written at the bottom of the body
  2. JS uses Defer to put it in the head, preloading the load time without blocking the DOM parsing
  3. The script tag adds crossOrigin to facilitate error collection
5. Rendering optimization

  1. Minimize reflow and repaint, which are triggered by style, size, node addition and subtraction operations.

    1.2 Batch the DOM with a DocumentFragment or InnerHTML. 1.3 The DOM is hidden, or copied to memory, similar to the Virtual DOM, and modified. 1.4 Animation elements must be absolute, out of the document stream, without affecting other elements. Instead of animation with left, top, etc., use transform and opacity and turn on the render layer (will-change or translate3D (0,0,0)). Don’t use Timer 1.6 Mobile Hardware Accelerator to trigger GPU rendering, or Translate3D (0,0,0)

  2. Try to use CSS animation instead of JS animation and Canvas animation instead of JS animation
  3. For initial rendering, you can use skeleton screen or loading to enhance the experience
  4. PWA, can be local cache resources, improve the experience
  5. Frequently triggered events, anti-chattering, throttling, such as scroll, input, etc
  6. Long lists, use paging or scroll loading, virtual lists, remove off-screen DOM
6. First screen optimization

Principle: fast display, smooth scrolling, lazy loading, lazy execution, progressive display

  1. Separate code that is not needed on the first screen
  2. Server-side rendering or pre-rendering, direct rendering after loading HTML, reduce the white screen time
  3. DNS PREFETCH, the use of DNS-PREFETCH reduces DNS query time, PC domain divergence, mobile domain convergence
  4. Reduce critical path CSS. You can inline critical CSS, which reduces load and render time
7. Packing optimization

Mainly Webpack optimizations

  1. Unpacking externals dllPlugin
  2. Extract commonchunkPlugin or splitChunks from public packages
  3. Narrow the scope of various loader configurations include and exclude, noParse skipping files
  4. Enable cache of various loaders
  5. Multi-threading accelerates happypack or thead-loader
  6. Tree-shaking ES module analysis, remove dead code
  7. Scope Hoisting ES6 module analysis, combining multiple modules into one function, reduces the memory occupation, reduces the volume, and prompts the running speed

  8. Webpack long cache optimization

    8.1 JS files use chunkhash, not hash

    8.2 CSS files use Contenthash, not chunkhash, and are not affected by JS changes

    8.3 Vendor extraction, the public library is not affected by the change of business module

    8.4 Inline Webpack Runtime to page, chunkId changes do not affect vendor

    8.5 Ensure that the module ID is stable. Instead of using a number as the module ID, use the hash value of the file content instead. Use hashedModuleIdSplugin

    8.6 Make chunkhash stable and use Webpack-chunk-hash instead of Webpack’s own hash algorithm. Webpack’s own hash algorithm will calculate different hash values for the same file under different development environments, which cannot meet cross-platform requirements.

8. Vue optimization
  1. Routing lazy load components
  2. Keep-Alive cache component to keep the original display state
  3. Add a key to the list item to ensure it is unique
  4. List items bind events, using the Event Proxy (V-For)
  5. V-IF and V-FOR should not be used on the same tag, it will perform V-IF judgment on each item

9. The react optimization

  1. Routing components are lazy to load using React – Loadable
  2. Class component to add shouldComponent or PureComponent
  3. Add Reaction. memo to function component
  4. Add a key to the list item to ensure it is unique
  5. Function components use hook optimization, useMemo, useCallback

10. SEO optimization

  1. Add various meta information
  2. pre-rendered
  3. Server-side rendering