preface

Increasingly complex front-end pages make front-end performance optimization more and more important.

The body of the

1. Code layer optimization

1.1 HTML to optimize

1.1.1 DOM optimization

  • Optimized node modification: usecloneNode, clone the node, modify the node, and replace the original node with relpace.
  • Optimized node addition: createDocumentFragment, add a new node toDocumentFragment. The final will beDocumentFragmentMount to the parent node.
  • Optimize CSS styles: Use changes in preference when changing CSS styles dynamicallyclassName. Or usestyle.cssTextAssign CSS once.
  • To reduce the number of DOM elements in a page, you can use thedocument.getElementsByTagName( '*' ).lengthGets the number of all elements on the page
  • Optimize DOM operations: Reduce reflow and repaint times, especially reflow.
    • Reduce DOM access times. Cache using variables for multiple accesses
    • When changing the DOM style, you can change the DOM firstDisplay: none;Then you manipulate the element.

1.1.2 Script tag was introduced

  • willscriptOn thebodyFinally, preventjavaScriptBlock rendering
  • Try to usedeferMode Asynchronous loadingscript
  • Use the CDN

1.1.3 CSS optimization

  • Render the body first. Refactor the HTML and CSS layouts. For example, use the twin wing layout, the Grail layout

1.1.4 javaScript optimization

  • Using the front-end cache:localStorage.sessionStroageEtc.
  • Multithreading is implemented using Web Workers

1.1.5 HTML

  • Use skeleton screen
  • uselazy-loadLoading pictures
  • Use virtual scrolling for big data lists to reduce DOM elements

1.2 CSS optimization

  • Avoid the wildcard character *
  • The CSS selector hierarchy should not be too deep; Descendant selectors have the highest overhead and the selector depth should be minimized.
  • Avoid label selectors: CSS selectors are matched from right to left, for example:#app .container p{}; It matches all of them firstpThe label. Match again.container , and finally match#app. Directly topaddclassEasier to match and improvecssBuilding efficiency
  • Avoid writing styles in HTML
  • Use link instead of @import

1.3 optimization of javaScript code

  • Use closures wisely
  • Using event Delegate
  • In a timely manner to destroysetTimeout.setInterval
  • Use global variables wisely and release unnecessary memory when necessary
  • useswitchStatements instead ofelse-if
  • Use throttling and anti-shaking

1.4 Animation Optimization

  • Use CSS3 animations whenever possible
  • Use requestAnimationFrame instead of setTimeout
  • Using GPU acceleration

2. Build tool optimization

2.1 Reduce packaging time

  • Optimize the loader
    • Appropriate use of include, exclude
    • Using caching:loader: 'babel-loader? cacheDirectory=true'
  • Pack more: happyPack
  • Pre-package libraries that don’t change very much using the DllPlugin

2.2 Reduce packing volume

  • Js code compression
  • CSS compression
  • SplitChunks separate code blocks
  • Image compression
  • Small picture conversion base64
  • ScopeHoisting
  • TreeShaking
  • Load on demand:()=> import('index.js')

Here is a separate article to optimize the project using Babel and Webpack

3. HTTP optimizations

3.1 the DNS and TCP/IP

Preload and preparse using link tags

  • dns-prefetch: <link rel="dns-prefetch" href="https://baidu.com/" >; Perform DNS pre-resolution in advance.
  • preconnect: <link rel="preconnect" href="https://baidu.com">; Establish a TCP connection in advance. HTTPS establishes a TLS connection
  • prefetch: <link rel="prefetch" href="https://baidu.com/a.png">; Download the resource when the browser is idle
  • prerender: <link rel="prerender" href="https://baidu.com.com">; Render in advance. All resources are loaded, executed, rendered and saved in memory by the browser ahead of time. Use it with caution because it consumes browser resources
  • preload: <link rel="preload" href="https://baidu.com/index.css">; In essence, it affects the loading order of resources by preloading resources that might otherwise be downloaded later.

3.2 the HTTP request

  • Keep-alive is preferred to maintain the long connection.
  • Reduce unnecessary HTTP requests by using Sprite diagrams
  • Use Base64 to transcode images. Reducing HTTP requests
  • Enable Gzip compression
  • Deploy static resources on a separate server to reduce cookies when requesting static resources

3.3 HTTP cache

  • Use HTTP caching properly, and use both strong and negotiated caching.
  • In spa applications, the index. HTML and strong cache are disabled. CacheControl: no-store

Here is a separate article on HTTP caching

4. Image resource optimization

  • JPG: lossy compression, small size, commonly used for large image background or rotation image
  • PNG: lossless compression, large volume, high quality, transparent. Commonly used for logo
  • SVG: Vector image, small size, zooming in and out without distortion
  • Base64: Generally used for small page ICONS
  • Webp: support transparent, support dynamic pictures, support lossy compression or lossless compression, but poor compatibility

Follow public account

Like the students can pay attention to the public account