1. Rearrangement and optimization

Reduce the rearrangement range

• Try to do it on low-level DOM nodes, rather than in the global-scoped example above. If you want to change the style of p, don’t append class to div. It’s not good to influence child elements with parent elements.

• Do not use the table layout, it is possible that a small change will cause the entire table to be rearranged. If you have to use a table, you can set table-layout: Auto; Or table-layout: Fixed renders the table line by line, which is also used to limit the scope of reflow.

Reduce rearrangement times

• 1. Style set changes

  • Don’t play with styles too often. For a static page, it’s wise and maintainable to change the class name rather than changing the style. For dynamically changing styles, it’s better to edit them all in cssText variables rather than directly touching the element with every minor change.

• 2. Separate read and write operations

  • Multiple reads (or writes) of the DOM should be placed together. Do not add a write operation between two read operations.

• 3. Take the DOM offline

  • Use display: None (shown later to trigger two reorders altogether)
  • Creating a DOM fragment using a documentFragment, batching the DOM on it, and then adding it to the document only triggers a rearrangement.
  • Copy the node, work on the copy, and then replace it!

• 4. Exit the document flow with absolute or fixed

• 5. Optimize the animation

  • You can apply animation effects to elements with position attributes such as Absolute or fixed with little impact on other elements.
  • Enabling GPU acceleration GPU hardware acceleration refers to using the GRAPHICS performance of the GPU to complete some graphics operations in the browser. Since the GPU is specially designed for processing graphics, it is more efficient in terms of speed and power consumption.
    • GPU acceleration typically consists of the following components: Canvas2D, Layout Composition, CSS3 Transitions, CSS3 3D Transforms, WebGL, and Video.

    /* * Change 2d Transform to 3D * to force GPU acceleration * improve animation performance */
    div {
      transform: translate3d(10px, 10px, 0);
    }
    Copy the code

2. White screen optimization

1. Optimize DNS resolution

For DNS Lookup, we can optimize DNS resolution.

• DNS cache optimization
  • Reduces the number of DNS queries. Reducing DNS queries requires reducing the number of requests from different domains, such as trying to download objects from the external domain to the local server.
• DNS preloading policy
  • You can use meta information to tell the browser that your page needs DNS pre-parsing

   <meta http-equiv="x-dns-prefetch-control" content="on" />
  Copy the code

  • You can use the link tag to force DNS preresolution:

   <link rel="dns-prefetch" href="http://ke.qq.com/" />
  Copy the code

• A stable and reliable DNS server

2. Optimize the TCP network link

For network link optimization, there seems to be no better way than spending money!

3. Server processing optimization

Server side optimization is a huge topic that involves Redis cache, database storage optimization or various middleware in the system and Gzip compression…

4. Browser download, parsing, rendering page optimization

According to the browser to the page download, parsing, rendering process, can consider the optimization processing:

• Simplify HTML code and structure as much as possible
• Optimize CSS files and structures as much as possible
• Be sure to place JS code reasonably and try not to use inline JS code

3. Optimization of loading lots of pictures

1. The browser has a connection request limit. Generally, the maximum number of HTTP connections is set to 6

• 1. Lazy loading, no browsing to the picture does not request
     • To determine whether an image is in the first screen, the first thing that comes to mind is to get the position information of the image through the getBoundingClientRect method and determine whether the image is in the viewPort.

     const inViewport = (el) = > {
         const rect = el.getBoundingClientRect()
     
         return rect.top > 0
           && rect.bottom < window.innerHeight
           && rect.left > 0
           && rect.right < window.innerWidth
       }
     Copy the code

• 2. Small pictures are more, you can use Sprite, font ICONS, base64, etc., which can effectively reduce the number of connections
• 3. Under HTTP/1.0 and HTTP/1.1, Chrome supports only six concurrent requests from the same domain, so you can use domain name splitting to increase the number of concurrent requests.
• 4. The connection limit problem can also be solved with HTTP2, which has only one connection per site. Each request is a stream, and each request is divided into multiple binary frames. Frames in different streams can be sent interleaved to achieve multiplexing. This solves the problem of connection number limits

2, the picture is too large, transmission and rendering is relatively slow, there are the following processing methods

• 1. If it’s an album or something you can preload, load the image before and after it when you show the current image
• 2. You can load a thumbnail with a very high compression rate to improve the user experience
• 3. Using progressive JPEGs improves the user experience
• 4. If the display area is smaller than the actual size of the image, it can be compressed to the appropriate size on the server

4. The entire process of the browser from entering the URL to displaying the page

• 1. The user enters the URL and press Enter
• 2. The browser process checks the URL, assembles the protocol, and forms the complete URL
• 3. The browser process sends the URL request to the network process via interprocess communication (IPC)
• 4. After receiving the URL request, the network process checks whether the local cache has cached the requested resource, and returns the resource to the browser process if so
• 5. If not, the network process sends an HTTP request to the Web server. The request process is as follows:
  • 5.1 Obtaining the SERVER IP Address and Port number during DNS Resolution (Is the port number obtained through DNS Resolution? Here’s a question.)
  • 5.2 Establishing a TCP Connection with the Server using an IP address
  • 5.3 Building request Header Information
  • 5.4 Sending Request Headers
  • 5.5 After the server responds, the network process receives the response header and response information and parses the response content
• 6. Network process parsing response process;

  • 6.1 Check the status code. If the status code is 301/302, redirection is required and the address is automatically read from Location. Repeat step 4.

  • 6.2 200 Response Processing:

    Check the response Type content-Type, and if it is a byte stream Type, submit the request to the download manager, and the navigation process ends without further progress

    Subsequent renders, if HTML, inform the browser process to prepare the render process to prepare to render.

• 7. Prepare the rendering process
  • 7.1 The browser process checks whether the current URL is the same as the root domain name of the previously opened renderer process. If they are the same, the original process will be reused; if they are different, a new renderer process will be started
• 8. Transfer data and update status
  • 8.1 After the renderer process is ready, the browser sends a message of “submit document” to the renderer process, and the renderer process receives the message and establishes a “pipeline” for data transmission with the network process.
  • 8.2 After the renderer receives the data, it sends “Confirm submit” to the browser
  • 8.3 After receiving the confirmation message, the Browser Process updates the browser interface status, including security, URL, forward and backward historical status, and Web page update.
• 9. Rendering line
  • Build a DOM tree
    • 1. Input: HTML document;
    • 2. Processing: HTML parser parsing;
    • 3. Output: DOM data deconstruction.
  • Style calculation
    • 1. Input: CSS text;
    • 2. Processing: standardization of attribute values, specific style of each node (inheritance, cascade);
    • 3. Output: styleSheets(CSSOM).
  • Layout (the planned location of elements in the DOM tree)
    • 1. DOM & CSSOM merged into render tree;
    • 2. Layout trees (visible elements in DOM trees);
    • 3. Layout calculation.
  • layered
    • 1. Generate a layer tree (layered context, Clip, similar to layers in PhotoShop) for a specific node.
    • 2. Elements with cascading context attributes (explicit positioning, transparency, CSS filters, Z-Index, etc.) create separate layers;
    • 3. DOM nodes without layers belong to the parent layer.
    • 4. Layers are also created where clipping is required.
  • Draw the instruction
    • 1. Enter: Layer tree;
    • 2. The rendering engine draws each layer in the layer tree;
    • 3. Split it into drawing instructions, generate drawing list, and submit it to the synthesis thread;
    • 4. Output: Draw a list.
  • block
    • 1. The compositing thread will divide larger and longer layers (more than one screen, most of which are not in the viewport) into tiles (256)256, 512512).
  • Rasterization (rasterization)
    • 1. In the rasterization thread pool, bitmaps are generated first for blocks near viewports (rasterization performs this operation).
    • 2. Fast Rasterization: GPU acceleration, bitmap generation (GPU process).
  • Synthesis of drawing
    • 1. Draw block command — DrawQuad, submit to browser process;
    • 2. The Viz component of the browser process, drawn on the screen according to the DrawQuad command.