This is the 27th day of my participation in the First Challenge 2022

preface

Performance optimization is an important index to distinguish a front-end engineer ability, a never performance optimization engineers to make a good product, because any a good product is necessarily after fine grinding products, and the performance optimization is the process of grinding, whether in practice or interview performance optimization problems are in this study the issue, Let’s solve this problem together

Optimization idea

When we enter a URL into the browser address bar and the result is displayed, we all know that the time is mainly spent on network transport and page rendering, so we mainly optimize the performance from these two aspects.

Network transmission performance optimization

1. Use HTTP2

HTTP2 has the following optimizations relative to HTTP1:

  • Binary frame layer
  • multiplexing
  • The first compression
  • Request priority
  • Server push
  • Flow control

2. Compress resources

Resource packaging compression mainly uses Webpack to compress the following:

  • Compressing JS code: Compressing JS code through webpack’s Production mode.
  • Compress HTML code: Use Minify of the HTml-webpack-plugin for compression.
  • The code for compressing the CSS: Use cssnano to compress the CSS, which is configured in postcss.config.js.

3. Image resource optimization

It is not files but pictures that occupy a lot of network resources in network transmission. If the pictures are optimized, the results can be seen immediately. The main optimization measures are as follows:

  • Try not to put images in HTML.
  • Use Sprite images: Sprite images reduce the number of requests.
  • Use font ICONS: Font images work like images, but with a much smaller footprint than image requests.
  • Use WEBP: WebP images save network bandwidth relative to countries.

4. Use the CDN

CDN refers to the deployment of node servers in different locations of the network, and the distribution of source site content to all CDN nodes, so that users can get the required content nearby. CDN improves website response speed and reduces latency.

5. Use preloading

When a page is loaded, many third-party resources may be loaded, but the priorities of these resources are different. Some important resources need to be obtained in advance. Therefore, we can use the LINK tag to perform DNS pre-resolution, pre-loading, and pre-rendering to manage the loading of page resources.

6. Reduce DNS lookup

Try to keep your resources under the same domain name, because fewer domain names mean fewer DNS queries.

7. Use anti-shake and throttling policies when sending requests

Anti-shake throttling prevents sending too many repeated requests in a short period of time.

Page rendering performance optimization

1. Reduce rearrangement and redrawing

  • Rearrangement: When the layout of elements is changed, causing the page to be rearranged.
  • Redraw: All changes to the visual presentation attributes of an element cause redraw.

Rearranging and redrawing can affect performance, so reduce the frequency of rearranging and redrawing as much as possible to improve page performance. Rearrangement is processed by CPU, while redrawing is processed by GPU. The processing efficiency of GPU is relatively higher. Rearrangement must be redrawn, but redrawing does not necessarily cause rearrangement, so rearrangement and redrawing should be minimized as much as possible.

2. DOM elements are updated offline

When operating on DOM elements, try to use the documentFragment object for offline operation and insert the page again after the element is assembled.

3. Avoid CSS and JS blocking

CSS resources are preferred to JS resources, which should have as little impact on DOM construction as possible.

A classic problem

RQ1: How to optimize the first screen loading?

The main methods include the following steps:

  1. Dynamically loaded routing

When configuring a route, the route is loaded as a function. The route is loaded only when the given route is parsed.

  1. Use caching wisely

Set strong cache, negotiated cache, localstorage, etc.

  1. The UI framework loads on demand

Don’t import the entire UI library, try to load it on demand.

  1. Avoid reloading components

You can use WebPack to pull out packages that are used multiple times and put them into a common dependency file to avoid reloading components.

  1. Compress image resources

Sprite, font ICONS, WebP, etc.

  1. Enable Gzip compression

  2. Use SSR server rendering

The component or page generates HTML strings from the server and sends them to the browser.