JS 与 CSS 是否阻塞 DOM 的渲染和解析

文章目录

    • CSS 不会阻塞 DOM 解析,但是会阻塞 DOM 渲染
    • JS会阻塞DOM解析
    • CSS 会阻塞 JS 的执行
    • JS 会触发页面渲染
    • 综上所述

CSS 不会阻塞 DOM 解析,但是会阻塞 DOM 渲染

<head>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      var p = document.querySelector('p')
      console.log(p)
    })
  </script>
  <link rel="stylesheet" href="./style.css?sleep=3000">//3s后返回css文件,设置P标签为浅蓝色。
</head>
<body>
  <p>hello world</p>
</body>

      页面初始显示为空白,控制台打印出了p元素,同时浏览器标签页上加载loading,3s后页面显示出浅蓝色的hello world
       由此可知,CSS不会阻塞DOM的解析,如果说CSS阻塞DOM解析的话,那么p标签不会被解析,进而DOM不会被解析完成,CSS请求过程中也就不可能会触发DOMContentLoaded事件。虽然DOM很早就被解析完成,但是p标签却迟迟没有渲染,原因在于CSS样式还未请求完成,在样式获取后hello world才被渲染出来,所以说CSS会阻塞页面渲染。更为严谨一点的说,CSS会阻塞render tree的生成,进而会阻塞DOM的渲染。

JS会阻塞DOM解析

<head>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      var p = document.querySelector('p')
      console.log(p)
    })
  </script>
</head>
<body>
  <script>
    const p = document.querySelector('p')
    console.log(p)//打印null
    for (var i = 0, arr = []; i < 100000000; i++) {
      arr.push(i)
    }
  </script>
  <p>hello world</p>
</body>

      浏览器访问页面,初始时为空白且控制台打印null,浏览器loading短暂延时后,控制台打印出p标签同时页面渲染出hello world
      以上情况很容易说明JS会阻塞DOM解析了,JS执行初控制台打印null,因为此时p标签还未被解析。for循环执行时,可以明显感觉到执行耗时,执行完成p标签被解析,此时触发DOMContentLoaded事件,控制台打印出p标签,同时页面渲染出hello world。
      比较合理的解释就是,首先浏览器无法知晓JS的具体内容,倘若先解析DOM,万一JS内部全部删除掉DOM,那么浏览器就白忙活了,所以就干脆暂停解析DOM,等到JS执行完成再继续解析。

CSS 会阻塞 JS 的执行

<head>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      var p = document.querySelector('p')
      console.log(p)
    })
  </script>
  <link rel="stylesheet" href="./static/style.css?sleep=3000">
  <script src="./index.js"></script>//获取P标签并输出
</head>
<body>
  <p>hello world</p>
</body>

      首先解析到第一个

所以一般将

你可能感兴趣的:(JavaScript,javascript,css,前端)