This article covers Web performance in three parts

  • Why is Web performance important
  • How do I test Web performance
  • How to improve performance

1 Why does speed matter

I don’t really want to say this part, as if I were gathering evidence about how important money is, but I’ll do it anyway. .

For example, performance is about user experience, which further affects retention and conversion rates.

2 How to measure speed

Evaluation of a Web application includes many indicators, such as RAIL Model, which evaluates response, animation, idle, and load.

Recommend some other commonly used testing tools, such as Chrome DevTools, WebPageTest, lighthouse.

Among them, WebPageTest is an online test site, which can generate evaluation report for the specified domain name. The results are as follows

Lighthouse is available in Chrome, or you can use Lighthouse – CLI. The result is as follows

With the –locale=zh-cn parameter, you can specify the Chinese report. Please refer to the marking indicator here. PageSpeed Insights also uses Lighthouse data.

3 How to improve performance

I plan to introduce this part in two parts

  • Load content
  • Content rendering

3.1 Content Loading

This section introduces how to reduce the impact of page loading on website performance. It can be divided into the following ideas: a page loading, from the request, transmission, download and other details to consider

3.1.1 Reducing the number of requests

  • SSR is used to speed up the rendering of the first screen, which is beneficial to SEO
  • Http2 server push can also speed up first screen rendering, but it has nothing to do with SEO
  • Use CSS styles instead of images or Sprite or Base64 to represent images
  • Code package merge
  • The local store

3.1.2 Reduce download times

  • Using HTTP caching

3.1.3 Reducing the total number of downloads

  • Compress resources, including code and images, including packaging compression and HTTP compression
  • Use less third-party libraries
  • tree shaking
  • Some third-party packages are provided by runtime, such as externals of Webpack, for library development

3.1.4 Reduce network transmission time

  • cdn
  • http/2
  • To reduce the header payload

3.1.5 other

  • Resolution of the code
  • Lazy loading, such as script’s defer or async properties, or loading on demand
  • Pretreatment,Rel attribute of the link tagRelated optimizations include
    • Dns-prefetch Parses DNS in advance
    • Preconnect Establishes connections in advance (including DNS queries, TCP connections, and TLS negotiation)
    • Prefetch may be required for the next navigation and should be fetched in advance
    • Prerender next navigation may be required and should be done prerender, such as rendering an HTML
    • Preload has a higher priority than Prefetch and is required in the current navigation

3.2 Content Rendering

This section will focus on Rendering Performance and focus on Rendering Performance based on the five-step Rendering process. Most devices have a screen refresh rate of 60fps, which means that each frame of rendering takes 16ms to prepare, and only 10ms to do anything other than render itself during each frame, after which frames are dropped, known as jank.

3.2.1 the parse

The first step in rendering is to parse the HTML, and this refers to all operations that cause the page to render, such as animations, transitions, Scroll, or other interactions.

  • When rendering for the first time, many factors are related to content loading. Note that script will block page parsing, CSS will not block, but the next operation of the page can only be done after csSOM parsing is completed. For details, refer to critical path optimization.

  • Use Windows. RequestAnimationFrame () can be executed at the beginning of the frame image changes, rather than the other timer, which may occur at the end of the frame time, lead to the frame.

  • For long hours, if it is pure calculation can use web worker to finish and then open a worker thread, otherwise can use Windows for high priority tasks. RequestAnimationFrame (), The use of low priority window. RequestIdleCallback () will converted into multiple small calculation for complicated calculation.

  • Minimize dom manipulation, which is inherently performance-intensive

3.2.2 Style calculation

The style calculation is divided into two steps

  • Figuring out which elements apply the current style can be done by reducing the complexity of the selectors, such as using the BEM naming convention, which resolves the selectors from right to left, with care when creating them.
  • Matching the style to the corresponding element can be done by reducing the number of elements to evaluate the style.

3.2.3 layout

Layout calculates the coordinates of each element to be displayed

  • Use the flexBox instead of the old model, which has a lot of boxes
  • Avoid stashing or layout thrashing caused by forced synchronous layout. A page contains two trees, one representing the actual DOM and one representing the DOM in memory that is being manipulated by JS. Manipulating the former is performance-costly. When reading the element style, it forces the element to render, that is, modifying the actual DOM
function resizeAllParagraphsToMatchBlockWidth() { // Puts the browser into a read-write-read-write cycle. for (var i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = box.offsetWidth + 'px'; }}Copy the code

Should be modified to

// Read. var width = box.offsetWidth; function resizeAllParagraphsToMatchBlockWidth() { for (var i = 0; i < paragraphs.length; i++) { // Now write. paragraphs[i].style.width = width + 'px'; }}Copy the code
  • Use Document Fragments and why You should Use them to organize consecutive DOM insertions. If inserted separately, each insertion is a macro task that causes the page to render. If this method can be used to reduce the number of renders.

3.2.4 paint

Here we calculate the drawing order, and layout is followed by paint. There are no specific optimization steps

3.2.5 compositing

This step layers and rasterizes the previously captured information separately

  • Use willchange or Transform: translateZ(0) to separate the elements that need to be changed into separate layers. The main layers themselves consume performance, so don’t use too many elements
  • Select DOM modifications that require only composition processing, including transforms or opacity
  • Reduce animation complexity, those involving fuzziness consume more performance, for examplebackground: red; 和 Box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5);Compared with the
  • For the Region marked as non-fast Scrollable Region, that is, the Region with event binding, if there is interaction, the main thread will be triggered to process, can be used in the event listenerpassive: trueSolution, for specific referencehere.
  • Throttle and debounce

End and spend