Recalling the key rendering path
Jane said browser rendering - Critical Path Rendering
Rendering performance optimization need to focus on key points
Reduce the number of bytes of the resource request
Reduce the number of critical resources
Shorten the length of the critical path of the presentation
Reduce the number of bytes of the resource request
The three main ways:
Code slimming, such as: to comment
compression
Cache
Reduce the number of critical resources
What are the key resources?
Will block page rendering resources, these resources will be applied in presenting critical path.
html is the first key resources, style.css applies to build CSSOM is the second key resources, app.js block the construction of the DOM, also belong to the key resources
Here, because the js is asynchronous and does not block the key to rendering a path, not a critical resource, so there are two key resources
How to reduce the number of critical resources
css will block rendering, and prevents trip js, if CSSOM not build, you can not build Render Tree.
In fact, the inline style is very friendly rendering performance, but in order to reuse styles, and separate read and write, often not to adopt, for the scene, it can be used inline with inline.
The media queries on the html media elements, you can load the style resource under the circumstances, to avoid unnecessary loading of resources. For example: a small screen load only small resources screen, horizontal screen resources @media all and (orientation: landscape) {h2 {color: red;} / horizontal screen font red /}, it is possible to make room for more resources needed .. .
js block the building of the DOM,
we will postpone js half, or use asynchronous js.
Shorten the length of the critical path of the presentation
What is the key to presenting a path length?
Critical path length is showing the number of resources to take the same path where the number of key lengths and key resources, both for 2.
The browser has to be very smart loader, what resources are needed in the document, if we find the resources to be loaded he would peek after receiving the document, when the parsing is blocked, he would as much as possible to load these resources . When parsing is blocked, where, css and js be downloaded, so the critical path length is still 2
How to shorten the critical path length presentation?
The browser will be loaded in parallel to limit the number of resources, if the page is large, you will need access to resources back and forth several times.
So be reasonable under the circumstances to control the size of the resource file