含有JavaScript的情况下DOM解析流程

最新推荐文章于 2024-07-01 16:12:06 发布

加油挣米粒呀

最新推荐文章于 2024-07-01 16:12:06 发布

阅读量388

点赞数

本文链接：https://blog.csdn.net/qq_45147812/article/details/106430414

版权

当从服务器接收HTML页面的第一批数据时，DOM解析器就开始工作了，在解析过程中，如果遇到了JS脚本，如下所示：

<html>
    <body>
        <script>
        document.write("***")
        </script>
    </body>
</html>

那么DOM解析器会先执行JavaScript脚本，执行完成之后，再继续往下解析。

那么第二种情况复杂点了，我们内联的脚本替换成js外部文件，如下所示：

<html>
    <body>
        <script type="text/javascript" src="***.js"></script>
    </body>
</html>

这种情况下，当解析到JavaScript的时候，会先暂停DOM解析，并下载foo.js文件，下载完成之后执行该段JS文件，然后再继续往下解析DOM。这就是JavaScript文件为什么会阻塞DOM渲染。

我们再看第三种情况，还是看下面代码：

<html>
    <head>
        <style type="text/css" src = "theme.css" />
    </head>
    <body>
        <p>123456</p>
        <script>
            let e = document.getElementsByTagName('p')[0]
            e.style.color = 'blue'
        </script>
    </body>
</html>

当我在JavaScript中访问了某个元素的样式，那么这时候就需要等待这个样式被下载完成才能继续往下执行，所以在这种情况下，CSS也会阻塞DOM的解析。

所以这时候如果头部包含了js文件，那么同样也会暂停DOM解析，等带该JavaScript文件下载后，便开始编译执行该文件，执行结束之后，才开始继续DOM解析。

加油挣米粒呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
含有JavaScript的情况下DOM解析流程

当从服务器接收HTML页面的第一批数据时，DOM解析器就开始工作了，在解析过程中，如果遇到了JS脚本，如下所示：<html> <body> <script> document.write("***") </script> </body></html>那么DOM解析器会先执行JavaScript脚本，执行完成之后，再继续往下解析。那么第二种情况复杂点了，我们内联的脚
复制链接

扫一扫