你所不知道css加載阻塞DOM或js的執行機制

時間 2019-11-07

標籤所不知道 css 加載阻塞 dom 執行機制欄目 CSS 简体版

原文原文鏈接

前言

可能你們都知道js執行會阻塞DOM樹的解析和渲染，那麼你們有沒有想過css加載會阻塞DOM樹的解析和渲染或者會阻塞js的運行嗎？css

今天咱們來談談一下css加載會不會阻塞DOM樹的解析和渲染或者會阻塞js的運行html

如何利用chrome來設置下載速度

咱們打開打開chrome控制檯(按下F12),能夠看到下圖,切換到Network能夠看到我圈起來的地方，點擊add ,從這裏咱們能夠模擬設置當前的網絡狀況， chrome

這樣，咱們對資源的下載速度上限就會被限制成5kb/s，好，那接下來就進入咱們的正題 bootstrap

css加載會阻塞DOM樹的解析渲染嗎？

只有實踐纔出真理：數組

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

<head>
    <title>css阻塞測試</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        p {
            color: orange !important
        }
    </style>
    <script>
        function test() {
            console.log(document.querySelectorAll('p'))
        }
        setTimeout(test, 0)
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <p>你好，css阻塞測試</p>
</body>

</html>
複製代碼

若是css阻塞DOM解析和渲染的話，在css還沒加載完以前，下面的內容不會被解析渲染，那麼咱們一開始看到的應該是白屏，p不會顯示出來。而且此時console.log的結果應該是一個空數組。瀏覽器

可是實際上在css沒有加載完成以前，在控制檯已經能夠獲取到p標籤了，從這裏咱們能夠得知， css加載是不會阻塞DOM解析的。

可是咱們能夠看到，只有當css加載完以後，p標籤纔會顯示你好，css阻塞測試的橙色文本。從這裏咱們得出CSS加載會阻塞DOM的渲染的。bash

對於這種機制，我我的理解是對瀏覽器渲染的一種優化機制。由於加載css的時候，可能會修改下面DOM節點的樣式，若是css加載不阻塞DOM樹渲染的話，那麼當css加載完以後，DOM樹可能又得從新重繪或者回流了，這就形成了一些沒有必要的損耗。因此乾脆就先把DOM樹的結構先解析完，而後等css加載完以後，在根據最終的樣式來渲染DOM樹，造成render樹，這種作法明顯提升性能。網絡

css加載會阻塞js運行嗎？

只有實踐纔出真理：post

<!DOCTYPE html>
<html lang="en">
<head>
    <title>css阻塞js</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            color: orange !important
        }
    </style>
    <script>
        console.log('before css')
        var startDate = new Date()
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <p>你好，css阻塞測試</p>
    <script>
        var endDate = new Date()
        console.log('after css')
        console.log('通過了' + (endDate - startDate) + 'ms')
    </script>
</body>
</html>
複製代碼