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

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文件。利用延迟脚本和异步脚本可以实现脚本的并行加载。以下讨论都是在没有这两个属性的情况下。