前端性能优化八:js阻塞DOM树

发布时间:2023年12月23日

1. js执行会阻塞DOM树的解析和渲染吗?

. html的解析会被js打断:
    a. 解析过程中遇到<script>标签时,便会停止解析过程,转而去处理脚本.
    b. 如果是内联脚本,浏览器会先去执行这段内联的脚本:
       (1). 如果是外链脚本,会先加载脚本,再执行.
       (2). 在处理完脚本后,浏览器则继续解析HTML文档.
    c. 所以,一般js文件放到最后面.. 所有浏览器在下载js文件时,会阻塞页面上的其它活动:
    a. 其它资源的下载、页面内容呈现等.
    b. 只有当js下载、解析、执行完,才会进行后面的操作.
    c. CSS资源、图片image资源是并行下载的,新版浏览器中的默认的并行加载数目是6.

在浏览器从服务器接收到HTML文档后,并把HTML在内存中转换为DOM树,在转换节点的过程中如果引入了CSS文件以及添加了images,则会在文档加载的同时并行的加载CSS文件以及图片。但是JS不一样,因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现.在没有使用异步加载(async)或者是延迟加载(defer)的情况下,只有在一个JS文件加载解析完后才能加载后面的JS文件。利用延迟脚本和异步脚本可以实现脚本的并行加载。以下讨论都是在没有这两个属性的情况下。

文章来源:https://blog.csdn.net/wanmeijuhao/article/details/135146478
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。