Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

When we type the url into the browser, how does the browser load the desired page content? The browser turns HTML, CSS, and JavaScript files into the page we see through key render paths. This process is an important part of our front end, and interviews are often asked about.

What are the key render paths (CRP)

Critical Rendering Path (CRP) is the process by which a browser converts Web code (HTML, CSS, JavaScript) into pixels that can be displayed on the screen. It consists of the following stages:

  1. downloadHTML
  2. Read and parseHTMLTo buildDOMTrees, meet<link rel="stylesheet" >TAB and downloadCSS
  3. readCSSAnd buildCSSOM 树
  4. Merge the DOM and CSSOM trees into one render tree
  5. Using the render tree, calculate the Layout, calculate the size and position of each element (rearrange Layout)
  6. Render pixels onto the page (redraw Paint)

How to optimizeCRP

Optimizing CRP means loading the HTML, CSS, and JavaScript associated with the first screen as quickly as possible, minimizing the time spent in THE CRP process. This usually means fast first screen loading and less white screen time.

Reduce first rendering resources: split the first screen and non-first screen

Static resources are divided into critical resources (required for the first screen) and non-critical resources (required for the first screen).

Lazy loading can be used for non-critical resources. Asynchronous loading of JS and CSS.

HTML, CSS, JavaScript code can also be reduced, compressed (try not to exceed 14KB), or cache processing.

Those interested in HTTP 14KB can do their own research. To put it simply, the TCP protocol layer of HTTP has a slow start process. When transmitting data for the first time, only 14KB of data can be transmitted. If more than 14KB of data is transmitted, TCP requires multiple round-trips.

The attached:

  • TCP Slow Start / 14KB rule
  • Why is the first screen HTML limited to 14KB?

Reduce the critical path length and request times

  1. Front screen style andJSUse inline form, noticeJSInline should be placed</body>Before, becausejavascriptWill block rendering (run synchronouslyJSThe script will stopHTMLUntil the script is finished.)
  2. mergeJSFile into each file and keep the file size as small as possible14kb)

Reduce the size of critical resources

  • HTML: reduceDOMThe level and quantity of
  • JavaScript: Compresses code to remove unnecessary code, removing line breaks, whitespace, and comments. The common one is to usewebpackThe tool compresses the code.UglifyjsWebpackPlugin】; usewebpackThe 【tree shakingOptimize code references.
  • CSS: Delete redundant codes and compress codes.

Static resource images

Merge images using Sprite images, as small as possible image resource size

For optimization of front-end resources, you can also refer to the previous article: [Front-end Performance Optimization approach]

conclusion

If this article helped you, please like 👍 and follow ⭐️.

If there are any errors in this article, please correct them in the comments section 🙏🙏.