From a URL to browser rendering, there are roughly three stages:

1. Set up request 2. Get resource 3Copy the code

All three phases can affect performance. Normally, we use some kind of performance measurement tool to identify the points of poor performance. Targeted optimization, will get twice the result with half the effort. In accordance with the three blocks, the optimization methods will be briefly described:

Establish request phase

  • From the URL to establishing the connection, there is first DNS resolution. Therefore, you can use DNS acceleration and other security measures to prevent network exceptions caused by DNS hijacking and failure.
  • After the request is established, it is generally forwarded to the NGIX load balancing server. In this part, you can optimize the load strategy, such as using a weighting algorithm.
  • Based on a combination of considerations, you can choose to switch HTTP protocols, such as removing HTTPS (which is slow due to the encryption process) and using HTTP2 (multiplexing, header compression and other features to improve speed).

This part of the optimization is largely up to the DevOPS engineers, but there’s not much you can do about the front end.

Resource Acquisition phase

This part of the experience is that developers do more things and benefit better. What we call the common means of performance optimization, are all here.

  • First, look at the number of requests. According to the actual situation, to send the request for compression, redundancy, merge, split, etc. This is mostly at the code level. It is expensive to make an HTTP request once, so try to minimize the number of requests. However, if the amount of data requested at one time is too large, it is also not appropriate to consider splitting the request.
  • Compress static resources. This mainly relies on WebPack, such as common CSS, JS, HTML compression. In addition, to avoid performance problems with large single files, choose appropriate code splitting strategies when compiling with Webpack (common segmentation by component, segmentation by route, lazy loading)
  • Large resource optimization, such as pictures, videos. Images can be reduced resolution, Sprite diagram, use SVG replacement and other ways. The video is compressed. When rendering them on the front end, use asynchronous/lazy loading to prevent blocking the page.
  • Cache optimization. Use the browser cache strategy to cache large resources. CDN is also used to speed up the acquisition of static resources.

Browser rendering phase

  • Rendering is done by the browser. The render order of the browser is to build the DOM tree, then calculate the style tree, and finally render. During the DOM building phase, JS will be executed when JS is encountered. Since this is a single-threaded job, a common tactic is to put CSS and JS files behind the HTML to prevent javascript from blocking the DOM build.
  • During the execution of JS, minimize DOM rearrangement and redraw. The Reat and Vue frameworks currently in use are well optimized for this.
    1. Diff algorithms of the two frameworks are compared to their peers, so when using, we try to reduce cross-layer operations, and try to use the Hidded attribute to control dom display, rather than directly destroy or new generation.
    2. In addition, due to the design principle of the React, we as far as possible use PureComponent, UseCallback means to avoid the child components such as repeated rendering.
  • React synthesizes events, using event delegates. But Vue doesn’t, so it uses event delegates on its own to improve performance.
  • Use throttling or stabilization to reduce false starts and repeated triggers for users

Optimization of code logic

As a rule of thumb, most performance problems occur in everyday coding. The optimization of the code is very detailed and cumbersome. It is recommended to read “Efficient Front End: Web Efficient Programming and Optimization Practices” for further improvement. The scenarios that have the greatest impact on performance are as follows:

  • Use of large arrays (use Set,Map,Obj and other data structures instead of array lookup)
  • Logic of exponential time complexity
  • Recursive operations (tail-recursive optimization if possible)

Avoid using any of the above algorithms, and if you do, optimize and terminate loops/recursions where appropriate, otherwise you may overflow the stack.