前端工程师-高级web网站前端开发加载javascript指南

《前端工程师-高级web网站前端开发加载javascript指南》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为什么JS不能像CSS、image一样并行下载了?AD：外部JS的阻塞下载所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。有人会问：为什么JS不能像CSS、image一样并行下载了?这里需要简单介绍一下浏览器构造页面的原理，当浏览器从服务器接收到了HTML文档，并把HTML在内存中转换成DOM树，在转换的过程中如果发现某个节点(node)上

2、引用了CSS或者IMAGE，就会再发1个request去请求CSS或image,然后继续执行下面的转换，而不需要等待request的返回，当request返回后，只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候，浏览器发送1个jsrequest就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用document.write或appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现.阻

3、塞下载图：下图是访问blogjava首页的时间瀑布图，可以看出来开始的2个image都是并行下载的，而后面的2个JS都是阻塞下载的(1个1个下载)。嵌入JS的阻塞下载嵌入JS是指直接写在HTML文档中的JS代码。上面说了引用外部的JS会阻塞其后的资源下载和其后的内容呈现，哪嵌入的JS又会是怎样阻塞的了，看下面的列2个代码：代码1：1.<div> 2.        ul> 3.            li>blogjavaspan style="color: #800000;">li> 4.            li>CSDNspan style="color: #80000

4、0;">li> 5.            li>博客园span style="color: #800000;">li> 6.            li>ABCspan style="color: #800000;">li> 1.            li>AAAspan style="color: #800000;">li> 2.        ul>     3.    span style="color: #800000;">div> 4.    script type="text/javascript"> 5.        // 循环5秒钟 6.        var n = 

5、Number(new Date()); 7.    var n2 = Number(new Date()); 8.   while((n2 - n)  (6*1000)){ 9.       n2 = Number(new Date()); 10.     } 11.    span style="color: #800000;">script> 12.  div> 13.        ul> 14.            li>MSNspan style="color: #800000;">li> 15.            li>GOOGLEspan style="color: #8

6、00000;">li> 16.            li>YAHOOspan style="color: #800000;">li> 17.        ul>     18.    span style="color: #800000;">div> 代码2(test.zip里面的代码与代码1的JS代码一模一样)：1.div> 2.        ul> 3.            li>blogjavaspan style="color: #800000;">li> 4.            li>CSDNspan style="color: #800000;">li> 5.    

7、        li>博客园span style="color: #800000;">li> 6.            li>ABCspan style="color: #800000;">li> 7.            li>AAAspan style="color: #800000;">li> 8.        ul>     9.    span style="color: #800000;">