Front-end performance optimization

1.) Reduce DOM manipulation

  • Manipulating the DOM is performance-costly because it causes DOM rearrangement (reflow) and redrawing
  • Frameworks like VUE/REACT don’t require DOM manipulation (recommended)
  • Reading and writing separation
  • Batch DOM creation based on document fragments or string concatenation
  • Modify styles using transform whenever possible
  • To modify styled elements, do so in a separate document flow (layer) whenever possible.
  • .

2.) Reduce the number and size of HTTP requests on the page

HTTP has concurrency limits, multiple HTTP requests need to wait for resources to load back before rendering.

  • Resource merge & compress (e.g. CSS merge into one, JS merge into one, Sprite graphics…->webpack)
  • Lazy loading of images/audio/video [Render the page for the first time, reduce HTTP requests to optimize white screen wait time, request real images when the page is rendered]
  • Reduce the size of the image as much as possible, or use a font icon, without compromising the image’s authenticity
  • Use inline when CSS code is low
  • Open the HTTP
  • Enable GZIP compression for the server
  • Each step takes some time. BASE64 directly encodes the image, and the browser only needs to render it. Base64 code is too long, which is not convenient for development and maintenance, and also increases the page request time. Therefore, in the project, we will compile and generate Base64 based on Webpack, and do not use it too much.

3) Front-end skeleton screen rendering: client skeleton screen + server skeleton screen render quickly for the first time, reducing the white screen

  • SEO Search engine optimization
  • SEM Baidu bidding ranking
    • Website Alex Rankings
    • Key words weight
  • Vue :nuxt.js react:next.js
    • Server rendering is good for SEO optimization, while client rendering is not
    • In the case of “high server concurrency pressure”, server rendering can achieve page rendering faster
    • Disadvantages: The server is under too much pressure, and the front and back ends are not completely separated.
    • The server only needs to complete the rendering of the first screen information, the rest of the screen or to the client to complete
  • Pure front-end skeleton screen scheme

4) Ultimate solution: use CDN

assorted

1) CSS

  • The CSS style sheet is placed in the header import to pre-request style resources when rendering the DOM-tree, making the page render faster
  • CSS selectors should not be too deep
  • Use CSS3 animations whenever possible, or requestAnimationFrame if JS animations are required
  • Avoid table layouts
  • Reduce the use of filter in the CSS
  • Do not use @import to import CSS resources
  • Avoid USING CSS expressions

2) Reduce the number of DNS resolution times [real projects tend to increase the number of resolution, to deploy multiple server resources, but can do DNS resolution]

3) Implement strong cache and negotiated cache of resource files

4) Data acquired based on Ajax/FETCH is cached for data that is not frequently updated [local storage]

5) Avoid 404

6) Implement event binding based on event delegate

7) Function of anti – shake and throttling, reduce the trigger frequency

8) Using the HTTP2.0 version of multiplexing & Active Push & Reduced header transmission & binary format transmission

9) Cookie stores as little information as possible [reason: Cookie will be taken with each request to the server]

10) Low coupling and high cohesion “encapsulation” in code writing

11) Avoid dead recursion

12) Some code should be used sparingly in JS: with, eval….

13) Although it is convenient to use regular expressions to process strings, complex regular expressions also bring performance consumption

14) Performance comparisons (good -> bad) for/while, built-in methods (e.g. ForEach), for of, for in

15) Reduce the use of closures “cause: stack memory”, it is better to manually release unused memory “memory optimization”

16) Audio and video are played by streaming information

17) Remove useless timers in time

18) Avoid multi-level nesting of loops “Cause: time complexity is too high” and avoid dead loops “cause: block RENDERING of JS engine threads”

19) The script is at the bottom of the page and can be deferred /async, which becomes asynchronous

20) Use WebP for images whenever possible

21) Use webworker