本文探讨了HTML页面加载过程中JavaScript如何阻塞页面渲染，包括执行脚本和加载资源带来的阻塞。介绍了三种无阻塞加载脚本的方法：defer、async以及动态脚本元素，以提高页面加载效率和用户体验。
HTML页面加载和解析流程
- 用户在地址栏第一次输入网址需要请求html页面，浏览器发送一个html页面的请求，服务器响应请求，并返回一个html页面 ；
- 浏览器开始下载html页面的代码，发现
<head>标签内有一个<link>标签引用外部CSS文件。 - 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。
- 浏览器继续载入html中
<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。 - 浏览器在代码中发现一个
<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。 - 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。
- 浏览器发现了一个包含一行Javascript代码的
<script>标签，赶快运行它，阻塞了渲染。 - Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个
<style>（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码。 - 终于等到了
</html>的到来，浏览器泪流满面…… - 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下
＜link＞标签的CSS路径。 - 浏览器召集了在座的各位
<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。
原因：虽然js是单线程的，但是浏览器当然不是单线程的。
在浏览器的多线程中，有的线程负责加载资源，有的线程负责执行脚本，有的线程负责渲染界面，有的线程负责轮询、监听用户事件。
这些线程，根据浏览器自身特点以及web标准等等，有的会被浏览器特意的阻塞。两个很明显的阻塞就是：脚本执行时对其他线程的阻塞和脚本加载时对其他线程的阻塞。
document对象绑定了一个事件：DOMContentLoaded。这个事件会在DOM解析完成之后触发。这个事件触发之后（而不是window.load），会进入异步事件驱动阶段（另一个线程控制）。也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。这时候浏览器的忙指示（那个页面上方的烦人的旋转的圆圈）不会消失。
执行脚本带来的阻塞
我们知道在浏览器中有两个引擎—-JS引擎和渲染引擎，它们对应浏览器中的两个线程。这两个引擎各司其职：1.Javascript引擎解析并执行js代码；2.渲染引擎对界面进行绘制或者重绘。
由于：
脚本执行和渲染DOM的并发可能会引发严重的冲突
所以：
JAVASCRIPT引擎和渲染引擎所在的2个线程被设计为互斥的！！！！！
在执行<script>中内容时，浏览器会切换到JavaScript引擎所在的线程，此时渲染引擎所在的线程会阻塞，故其后元素的解析和渲染会暂停。这时候如果脚本执行时间太长的话，不仅后面的元素会一直看不到，对DOM的解析工作也会一直完不成。用户会陷入焦急的等待中。
解决办法：将<script>放到紧跟在</body>位置之前。这样不会影响页面UI元素的解析，可以让用户更快看见页面上的内容，防止浏览器出现白屏现象。
加载资源带来的阻塞
加载是浏览器从网络中请求资源（比如图片、样式文件、静态脚本等），将资源进行相应的处理。
与上述说的两个线程不同，对资源进行加载的线程一般不会和上述两个线程互斥。例如图片资源就可以并行下载，下载的最大并行数量与浏览器的配置有关系。（这里还有一个知识点，下载的最大并行数指的是从一个主机上下载的最大并行数，如果从多个主机下载资源，这个数量会翻倍，但是由于对DNS的解析也是一个性能优化的点，故而一般策略是：不应设置超过4个主机，最好只设置2个主机）。
但是如果浏览器解析DOM时需要下载脚本资源，那么下载这个资源的线程就是阻塞其他下载线程以及渲染线程，导致渲染速度变慢。
解决办法：
1.无阻塞加载脚本之一——defer
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。
在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。
说明：虽然<script> 元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行。
HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。
defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。
2.无阻塞加载脚本之二——async
与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。
异步脚本一定会在页面 load 事件前执行。
不能保证脚本会按顺序执行。
3.无阻塞加载脚本之三——动态脚本元素
因为<script>标签也是DOM元素的一种，而JavaScript是可以通过DOM API操作DOM的。
不同于静态脚本元素的解析，动态脚本元素在下载的时候是不会阻塞渲染线程的，也就是实现了并行下载。
这个标签可以放到</body>之前。
document.head.appendChild代码之后，由于没有触发渲染树的重绘，切换回的渲染线程会将剩下的DOM解析并渲染完毕。同时新插入的<script>中的资源也会并发的下载。
<script>中的资源下载完之后会马上执行。但是由于此时DOM已经解析完毕，并且进入异步事件阶段，所以即使切换到JavaScript引擎所在的线程上执行脚本，用户也不会感觉明显的UI阻塞。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
