1. Resource compression and consolidation

  1. HTML, CSS, JS some unnecessaryComments can be removed
  2. CSS if the same style elements canMerge togetherwrite

2. Solve the blocking problem (2+2)

Block Rendering problems refer to the browser series – Block Rendering

3. Reduce redraw reflux (2+4+1)

CSS aspects

  1. Avoid multiple inline styles and combine styles in an external class
  2. Set the position attribute to absolute or fixed (such as animation) for elements that need to be refluxed multiple times

JS aspects

  1. Avoid reading DOM nodes multiple times
  2. If you need to operate the same DOM node for multiple times, you can set the element of the DOM node to display: None. (Because hidden elements are not in the Render tree, modifying hidden elements does not trigger backflow redraw)
  3. Centralize all DOM operations when operating on multiple DOM nodes (for the following reasons)
  4. Transfrom is used instead of DOM node operation for deformation and displacement

pictures

All images must have the width attribute specified

Otherwise, the height and width of the image cannot be determined until the image is fully downloaded, which will inevitably cause the browser to re-render

4. Use the browser cache

See the browser series – Browser cache for details

5. Use CDN cache

See browser series – CDN cache for details

Use pre-resolved DNS

See browser series – DNS resolution and pre-resolution for details

Seven, optimize the page image loading

For details, see the browser series – Optimizing web image loading

Eight, if useful to Canvas

  1. It is possible to create [multiple overlapping canvases] to draw different layers, rather than drawing very complex diagrams [on the same Canvas]
  2. ImgData = ctx.getImageData(0, 0, 60, 60); ctx.putImageData(imgData, 60, 60);
  3. The background image can be used directly if it is not changedTag and put it at the bottom
  4. Try to use integer coordinates rather than floating point numbers.

Canvas details can be found in HTML series — Canvas

9. If you want to switch the display and hide elements for several times

Use visibility:hidden instead of display: None, as this reduces operations on the DOM node