js和css是如何影响dom树构建的

Master.Yuan

已于 2022-05-23 11:26:17 修改

阅读量382

点赞数 1

分类专栏：前端认知文章标签： css javascript 前端

于 2022-05-07 17:18:25 首次发布

本文链接：https://blog.csdn.net/yuanwen52/article/details/124634869

版权

前端认知专栏收录该内容

10 篇文章 0 订阅

订阅专栏

浏览器会下载HTML解析页面生成dom树，遇到css标签就开始解析css，这个过程不会阻塞。但是如果遇到了js脚本，此时假如CSSOM还没构建完，需要等待CSSOM构建完，再去执行js脚本，然后再执行dom解析，此时会阻塞。

就是说：js会阻塞dom的生成，而样式文件又会阻塞js的执行。

用如下代码示例来说明：script脚本阻塞了dom的生成，此时CSSOM还没有构建完，需要等待CSSOM构建完，再执行js脚本。

此时dom还没解析完，导致如下代码执行出错（没有查找到该元素）

document.getElementById('son2').style.border = '1px solid gray'

因为CSSOM已构建完，所以son1的边框颜色发生变化了。

效果如下：

<style type="text/css">
       .father{
           height: 200px;
           border: 1px solid red;
           display: flex;
           padding: 10px 10px;
       }
       .son1{
           width: 50px;
           border: 1px solid black;
       }
       .son2 {
           margin-left: 20px;
           width: 40px;
           min-height: 10px;
           border: 1px solid green;
       }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1" id="son1"></div>
        <script>
            let son1 = document.getElementById('son1')
            son1.style.border = '1px solid blue'
            document.getElementById('son2').style.border = '1px solid gray'
        </script>
        <div class="son2" id="son2"></div>
    </div>
</body>

Master.Yuan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js和css是如何影响dom树构建的

浏览器会下载HTML解析页面生成dom数，遇到css标签就开始解析css，这个过程不会阻塞。但是如果遇到了js脚本，此时假如CSSOM还没构建完，需要等待CSSOM构建完，再去执行js脚本，然后再执行dom解析，此时会阻塞。就是说：js会阻塞dom的生成，而样式文件又会阻塞js的执行。用如下代码示例来说明：script脚本阻塞了dom的生成，此时CSSOM还没有构建完，需要等待CSSOM构建完，再执行js脚本。此时dom还没解析完，导致如下代码执行出错（没有查找到该元素）documen..
复制链接

扫一扫

专栏目录