Browser Thematic series – Block rendering

CSS

1. Block rendering

Blocking rendering simply refers to whether the browser needs to pause the first rendering of a page until the resource is ready

CSS is treated as a resource that blocks rendering, which means that the browser will not render any processed content until CSSOM is built

For example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <! -- External network resources cannot be accessed without ladder -->
    <link rel="stylesheet" href="https://www.youtube.com/s/player/4a1799bd/www-player-webp.css">
    <link rel="stylesheet" href="./1.css">
    <title>Document</title>
</head>
<body>
    <h1>content</h1>
</body>
</html>
Copy the code

1.css

h1{
    color: red;
}
Copy the code

Before downloading extranet style resources, the page will display a blank screen

If there is a timeout error in the download of the style resource blocking rendering, it will skip and use the CSS resource that has been downloaded to parse and build CSSOM

So wait a while before the page is displayed (after the resource has timed out)

2. Block HTML parsing

For example,

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <h1>red1</h1>
    <link rel="stylesheet" href="https://www.youtube.com/s/player/4a1799bd/www-player-webp.css">
    <h1>red2</h1>
</body>
</html>
Copy the code

It can be seen that the page is still in the white screen state. At this time, in the developer tool, it can be seen that the H1 node after the link node in the Dom tree is not resolved

red2

is not found in the Dom tree

red2

is parsed and rendered when the resource fails to download

3. How to unblock

In rendering tree construction, it is required to have both DOM tree and CSSOM tree to build. Blocking in either 🌲 build will cause page display exceptions, resulting in serious performance problems

HTML and CSS are resources that block rendering

HTML is obviously required, because without DOM, we have nothing to render
CSS is not necessarily necessary
- The browser downloads all CSS resources, whether they are blocked or not
- CSS is the resource that blocks rendering. It needs to be downloaded to the client as soon as possible to reduce the first rendering time

throughThe media typeorMedia queriesSome CSS resources can be marked as resources that do not block rendering

If we have SOME CSS styles that are only used under certain conditions (such as when displaying a web page or projecting a web page onto a large display), we can address these use cases with CSS “media types” or “media queries.

<! -- Applies to all cases, always block rendering -->
<link href="style.css" rel="stylesheet">

<! -- Only when printing content, when the page first loads -->
<! -- This style sheet does not need to block rendering -->
<link href="print.css" rel="stylesheet" media="print">

<! -- Media query executed by browser: when qualified -->
<! The browser will block rendering until the stylesheet is downloaded and processed.
<! When the page is first loaded, if the condition is not met, the rendering will not be blocked, but the corresponding resource will still be downloaded.
<link href="other.css" rel="stylesheet" media="(max-width: 400px)">
Copy the code

Using media queries, we can customize the look and feel based on specific use cases (such as display or print) as well as dynamic situations (such as screen orientation changes, resizing events, and so on)

<! -- Block rendering, for all cases -->
<link href="style.css"    rel="stylesheet">

<! -- default all, equivalent to not writing -->
<link href="style.css"    rel="stylesheet" media="all">

<! -- With dynamic media queries that will be calculated when the page loads -->
<! -- Portrait (portrait - height greater than width).css may or may not block rendering depending on the direction of the device when the page loads -->
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">

<! -- only applies when printing a web page, so it doesn't block rendering when the web page is first loaded in the browser -->
<link href="print.css"    rel="stylesheet" media="print">
Copy the code

Use media queries to solve the above problems:

Only when the screen width is loaded<=400pxIs blocked, otherwise rendering is not blocked

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <! -- External network resources cannot be accessed without ladder -->
    <link rel="stylesheet" href="https://www.youtube.com/s/player/4a1799bd/www-player-webp.css" media="(max-width: 400px)">
    <link rel="stylesheet" href="./1.css">
    <title>Document</title>
</head>
<body>
    <h1>content</h1>
</body>
</html>
Copy the code

4. Summary

CSS is a resource that blocks rendering, and the browser will not render any processed content until CSSOM is built
Use media types or media queries to unblock rendering
The browser downloads all CSS resources, whether they are blocked or not

JS

1. Block rendering

JavaScript can query and modify DOM and CSSOM

So when the HTML parser encounters a script tag, it suspends DOM building, handing control to the JS engine, and when the JS engine finishes running, the browser resumes DOM building where it left off

The inline script blocks the rendering example

The page goes white when it first loads, and it takes 5 seconds for the content to render
Note Inline JS blocks DOM parsing and rendering

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>

<body>
    <h1>AAA</h1>
    <script>
        let d = Date.now()
        while (Date.now() < d + 1000 * 5) {}</script>
    <h2>BBB</h2>
</body>

</html>
Copy the code

The external synchronization script blocks the rendering sample

You can see it’s going to render firstAAARender after 5 sBBB
The external script also blocks DOM parsing and rendering. However, because the contents of the script cannot be determined, the built DOM is rendered first to ensure that the loaded script can obtain the latest DOM

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>

<body>
    <h1>AAA</h1>
    <script src="./test.js"></script>
    <h2>BBB</h2>
</body>

</html>
Copy the code

test.js

let d = Date.now()
while (Date.now() < d + 1000 * 5) {}Copy the code

2. Remove the blockage

Declaring JavaScript scripts explicitly asynchronous prevents them from blocking DOM builds and rendering

Adding asynchronous keywords to the script tag instructs the browser not to block DOM builds while waiting for the script to become available

Defer: Download asynchronously, then wait for the HTML parsing to complete (the DOM is built) and execute in the order you downloaded it
Async: Downloads files asynchronously. After the download is complete, the files are executed immediately. The execution is still blocked

Defer Usage examples

After 5 seconds you can see the renderAAAandBBB
The console prints after another 5 secondsrender success.render success2

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <h1>AAA</h1>
    <script defer src="./test.js"></script>
    <script defer src="./tes2.js"></script>
    <script>
        let k = Date.now()
        while (Date.now() < k + 1000 * 5) {}</script>
    <h1>BBB</h1>
</body>
</html>
Copy the code

test.js

let d = Date.now()
while (Date.now() < d + 1000 * 5) {}console.log('render success');
Copy the code

tes2.js

console.log('render success2');
Copy the code

Example of async usage

After 4 seconds you can see the renderAAA
Render after 4 sBBB
And then the console printsrender success.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <h1>AAA</h1>
    <script async src="./test.js"></script>
    <script>
        let k = Date.now()
        while (Date.now() < k + 1000 * 4) {}</script>
    <h1>BBB</h1>
</body>
</html>
Copy the code

test.js

let d = Date.now()
while (Date.now() < d + 1000 * 4) {}console.log('render success');
Copy the code

3. Summary

Js scripts block DOM parsing and rendering, whether inline or inline

Outreach: Since the contents of the outreach script cannot be determined, the built DOM is rendered first to ensure that the loaded script gets the latest DOM

Declaring JavaScript scripts explicitly asynchronous prevents them from blocking DOM builds and rendering

Adding asynchronous keywords to the script tag instructs the browser not to block DOM builds while waiting for the script to download

Asynchronous keyword

Defer: Download asynchronously, then wait for the HTML parsing to complete (the DOM is built) and execute in the order you downloaded it
Async: Downloads files asynchronously. After the download is complete, the files are executed immediately. The execution is still blocked

conclusion

JS and CSS are resources that block page rendering
You can use media query to solve the problem that the CSS is blocked in specific scenarios
Blocking can be prevented by adding asynchronous properties to script

Add: CSS can actually be converted to JS using a packaging tool. When the page loads, load THE JS resource asynchronously and then apply the style. This is also a way to prevent CSS from blocking rendering

reference

Developers – Critical path rendering

The original text is first published in personal blog, the special series will sort out many articles, and we learn together, common progress, if there is a mistake, please correct

Browser series

1. Browser Thematic series – Caching Mechanisms
2. Browser Thematic series – Principles of rendering
3. Browser Thematic series – Block rendering
4. Browser Thematic Series – Local Storage
5. Browser Special Series – Web Security
6. Browser Series – Browser kernel
7. Browser Thematic series – Cross domain and cross site
8. Browser Thematic Series – Event loops

Browser Thematic series – Block rendering

Browser Thematic series – Block rendering

CSS

1. Block rendering

2. Block HTML parsing

red2

red2

3. How to unblock

4. Summary

JS

1. Block rendering

2. Remove the blockage

3. Summary

conclusion

reference

Browser series

Related Posts

Use of the rich text editor WangEditor

Rollup Plugin (1)

“ReactNative principle” JS layer rendering diff algorithm