“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

preface

Web front-end performance optimization, a platitude topic, is also the most concern of every enterprise and every project. In order to maximize the user experience, we have to think through every detail to achieve the solution we want as much as possible.

In the interview, we were often asked about performance optimization. If we randomly interspersed some optimization schemes, the interviewer would feel disorganized, and our answers would not have a sense of control. Therefore, we should be more thoughtful and orderly to describe a relatively complete process of front-end performance optimization

In this article I will summarize performance optimization ideas in a few general directions from the browser – > resources – > images – > code level

Optimization module

Browser:

  • Reduce HTTP requests. For example, Chrome allows up to 6 TCP connections to the same Host domain at the same time. Different browsers vary

  • To use HTTP2.0, you need to configure a WEB server that supports H2, and install a TLS certificate to enable the browser and server to connect to HTTP2.0 via H2.

    1. Data is transmitted in binary format, 1.1 is text format
    2. Using Hpack for message header compression transmission can save the network traffic occupied by message headers. 1.1 Each request will carry a large number of redundant header information, which wastes a lot of broadband resources
    3. Asynchronous connection multiplexing
    4. Server Push: The Server side can Push resources to the client side more quickly
    5. Maintaining backward compatibility with HTTP 1.1 semantics is also a key aspect of this release

  • Set the browser cache policy mainly to set the cache policy: strong cache and negotiated cache (in preparation)

  • White screen time to do loading animation to enhance user experience

Resources:

  • Static resources CDN Static resources such as CSS, JS, and IMG can be CDN cache. In this way, the resources can be synchronized to all parts of the country and the world, so that users can access them faster

  • Static resource individual domain name

    1. Limit of concurrent browser requests (limit on the number of concurrent requests supported by the same domain name (including secondary domain name) at the same time)
    2. Cookie transmission, a separate domain name, does not carry cookies
    3. Convenient streaming and caching (static and static separation, which is conducive to CDN caching of static resources)

  • If the browser supports gzip parsing, the server will push the gzip resource. Content-encoding :gzip is displayed in the HTTP header

  • Do server render (SSR) now mainstream box react, vue caused a pain point, is the page construction is handed over to the client to render, the construction process is no doubt in the row after the request to HTML/JS resources, that is, at least two HTTP requests before the construction, this is undoubtedly one of the key points leading to the blank screen. So do SSR pages, can directly return to the page, reduce a lot of first screen rendering time

  • Putting CSS at the top of the file and JavaScript at the bottom of the file can block document loading with single-threaded JS

Image:

  • Font ICONS instead of picture ICONS some common small ICONS, such as arrows, forks, can use font ICONS, reduce requests, rendering faster

  • Genie figure some small ICONS with enterprise characteristics, such as Taobao shopping cart, smiling face doll, can use genie figure, let a picture with multiple small figure, and then use CSS background positioning to show the appropriate place, can greatly reduce the request

  • Image lazy loading In order to render the first screen faster, the image can be replaced with a loading image. When the page is in the visible area, it can be replaced with a real image. If there is a high definition image with a large first screen, you can first render a low definition thumbnail image, and then replace it with a high definition image after the basic construction of the home page is completed

  • For example, if we have an active page that uses a high-resolution image, we can load it on the front page of its entry. When we enter the page, the browser will read the image from its cache

  • PNG is the most popular format for WEB images. It is a lossless compression format

  • Images smaller than 10K can be packaged in Base64 format and processed using webpack URL-loader

Code:

  • Be careful with global variables

    1. Global variables are defined in the global execution context and are at the top of any scope chain. Local can not find will keep looking up, affecting the performance
    2. The global execution context remains in the context execution stack until the program exits, which is not conducive to GC collection
    3. Naming pollution

  • Caching global variables caches local global variables that cannot be avoided in use

  • Reduce redraw backflow: When the size, layout, hiding, etc. of the element changes, the Render DOM needs to be rebuilt. This is called redraw: elements that update their appearance and style without affecting their layout are called redraw

  • Throttling and anti-shaking

  • Use fewer closures and reduce memory leaks

  • Reduce the number of data reads, such as for loop optimization, reduce the number of length reads

    let arr = [1.2.3]
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
/ / optimization
for (var i = 0, len = arr.length; i < len; i++) {
  console.log(arr[i])
}
Copy the code

  • Document fragments to optimize the node to add a dom: document createDocumentFragment ()

  • Reduce the level of judgment to reduce if else, return earlier if does not satisfy the logic

  • Literals and constructors such as arrays, objects, strings, etc. are declared faster than new

Project Proposal (additional)

  • Long list optimization
  • web worker

    Web workers are js running in the background, independent of other scripts, and do not affect your page performance. The result is passed back to the main thread via postMessage. This will not block the main thread during complex operations.
  • Avoid nested ifarme pages

    Blocked onload, causing the user to feel slow to load

    Sharing the browser connection pool with the parent page consumes the maximum NUMBER of HTTP connections in parallel with the parent page, so resources load more slowly

    Is not conducive to seo

    Compatibility is not good, such as small program embedded H5, H5 and the use of ifarme

Webpack Optimization (extra)

  • Reduce code size
  • According to the need to load
  • Extract the third library code
  • Webpack DLL optimization

At the end

Overall, there are more than 20 small points in the above categories of optimization schemes. If you have better and more front-end performance optimization methods, welcome to add! There will be other optimization schemes in the future, I will continue to supplement this article!! Welcome to collect!