Home > Developer > JavaScript
Key rendering path and rendering path
The key rendering path, that is, the necessary steps for page rendering on the browser:
<Html>
<Head>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1">
<Title> Critial Path: Hello world! </Title>
<Link rel = "stylesheet" href = "/a.css">
<Script src = "/B. js"> </srcipt>
</Head>
<Body>
......
</Body>
</Html>
Analyze the rendering steps of the above Code (brief process)
1. parse html and generate dom.
2. Request css and js, and parse html at the same time. Cssom is generated after the css request is complete.
3. Wait for cssom to complete, execute js, and block dom generation.
4. Generate a rendering tree based on dom and cssom
5. Calculate the position and size of the rendering tree Element
6. Draw and present the image to the screen.
Optimizing the key rendering path can greatly shorten the time for first page presentation. In addition, understanding the key rendering path can also lay the foundation for building a high-performance interactive application.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
