如何优化网页加载速度(前端优化) -外部JS 的阻塞下载
原文地址：http://blog.csdn.net/wuxyyin/archive/2010/09/19/5893928.aspx
外部JS 的阻塞下载
所有浏览器在下载JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
有人会问：为什么JS 不能像CSS 、image 一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理，
当 浏览器从服务器接收到了HTML 文档，并把HTML 在内存中转换成DOM 树，在转换的过程中如果发现某个节点(node) 上引用了CSS 或者IMAGE ， 就会再发1 个request 去请求CSS 或image, 然后继续执行下面的转换，而不需要等待request 的返回，当request 返回后，只需要把返 回的内容放入到DOM 树中对应的位置就OK 。但当引用了JS 的时候，浏览器发送1 个js request 就会一直等待该request 的返回。因为浏览器需要1 个稳定的DOM 树结构，而JS 中很有可能有代码直接改变了DOM 树结构，比如使用 document.write 或 appendChild, 甚至是直接使用的location.href 进行跳转，浏览器为了防止出现JS 修改DOM 树，需要重新构建DOM 树的情况，所以就会阻塞其他的下载和呈现.
阻塞下载图：下图是访问blogjava 首页的时间瀑布图，可以看出来开始的2 个image 都是并行下载的，而后面的2 个JS 都是阻塞下载的(1 个1 个下载) 。
嵌入JS 的阻塞下载
嵌入JS 是指直接写在HTML 文档中的JS 代码。上面说了引用外部的JS 会阻塞其后的资源下载和其后的内容呈现，哪嵌入的JS 又会是怎样阻塞的了，看下面的列2 个代码：
代码1 ：
复制代码 代码如下:
<ul>
<<li>blogjava></li>
<li>CSDN></li>
<li> 博客园></li>
<li>ABC></li>
<li>AAA></li>
<ul>
<div>
<script type="text/javascript">
// 循环5 秒钟
var n = Number(new Date());
var n2 = Number(new Date());
while((n2 - n) (6*1000)){
n2 = Number(new Date());
}
</script>
<div>
<ul>
<li>MSN></li>
<li>GOOGLE></li>
<li>YAHOO></li>
</ul>
</div>
代码2(test.zip 里面的代码与代码1 的JS 代码一模一样) ：
复制代码 代码如下:
<div>
<ul>
<li>blogjava></li>
<li>CSDN></li>
<li> 博客园></li>
<li>ABC></li>
<li>AAA></li>
<ul>
<div>
<script type="text/javascript" src="test.zip"><script>
<div>
<ul>
<li>MSN></li>
<li>GOOGLE></li>
<li>YAHOO></li>
</ul>
</div>
运行后，会发现代码1 中，在前5 秒中页面上是一篇空白，5 秒中后页面全部显示。 代码2 中，前5 秒中blogjava,csdn 等先显示出来，5 秒后MSN 才显示出来。
可以看出嵌入JS 会阻塞所有内容的呈现，而外部JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。
嵌入JS 导致CSS 阻塞加载的问题
CSS 怎么会阻塞加载了？CSS 本来是可以并行下载的，在什么情况下会出现阻塞加载了( 在测试观察中，IE6 下CSS 都是阻塞加载，下面的测试在非IE6 下进行) ：
代码1( 为了效果，这里选择了1 个国外服务器的CSS) ：
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>js test>title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="http://69.64.92.205/Css/Home3.css " />
</head>
<body>
<img src="http://www.fengfly.com/images/logo.gif " /><</span>br />
<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif " />
</body>
</html>
时间瀑布图：
代码2( 只加了1 个空的嵌入JS) ：
<head>
<title>js test>title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="http://69.64.92.205/Css/Home3.css " />
<script type="text/javascript">
function a(){}
</script>
<head>
<body>
<img src="http://www.fengfly.com/images/logo.gif " /><</span>br />
<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif " />
</body>
时间瀑布图:
从时间瀑布图中可以看出，代码2 中，CSS 和图片并没有并行下载，而是等待CSS 下载完毕后才去并行下载后面的2 个图片，当CSS 后面跟着嵌入的JS 的时候，该CSS 就会出现阻塞后面资源下载的情况。
有人可能会问，这里为什么不说说嵌入的JS 阻塞了后面的资源，而是说CSS 阻塞了？ 想想我们现在用的是1 个空函数，解析这个空函数1ms 就够，而后面2 个图片是等CSS 下载完1.3s 后才开始下载。大家还可以试试把嵌入JS 放到CSS 前面，就不会出现阻塞的情况了。
根本原因：因为浏览器会维持html 中css 和js 的顺序，样式表必须在嵌入的JS 执行前先加载、解析完。而嵌入的JS 会阻塞后面的资源加载，所以就会出现上面CSS 阻塞下载的情况。
嵌入JS 应该放在什么位置
1 、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
2 、如果嵌入JS 放在head 中，请把嵌入JS 放在CSS 头部。
3 、使用defer
4 、不要在嵌入的JS 中调用运行时间较长的函数，如果一定要用，可以用setTimeout 来调用
PS ：很多网站喜欢在head 中嵌入JS ，并且习惯放在CSS 后面，比如看到的http://www.qq.com/，当然也有很多网站是把JS 放到CSS 前面的，比如yahoo,google
外部JS 的阻塞下载
所有浏览器在下载JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
有人会问：为什么JS 不能像CSS 、image 一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理，
当 浏览器从服务器接收到了HTML 文档，并把HTML 在内存中转换成DOM 树，在转换的过程中如果发现某个节点(node) 上引用了CSS 或者IMAGE ， 就会再发1 个request 去请求CSS 或image, 然后继续执行下面的转换，而不需要等待request 的返回，当request 返回后，只需要把返 回的内容放入到DOM 树中对应的位置就OK 。但当引用了JS 的时候，浏览器发送1 个js request 就会一直等待该request 的返回。因为浏览器需要1 个稳定的DOM 树结构，而JS 中很有可能有代码直接改变了DOM 树结构，比如使用 document.write 或 appendChild, 甚至是直接使用的location.href 进行跳转，浏览器为了防止出现JS 修改DOM 树，需要重新构建DOM 树的情况，所以就会阻塞其他的下载和呈现.
阻塞下载图：下图是访问blogjava 首页的时间瀑布图，可以看出来开始的2 个image 都是并行下载的，而后面的2 个JS 都是阻塞下载的(1 个1 个下载) 。
嵌入JS 的阻塞下载
嵌入JS 是指直接写在HTML 文档中的JS 代码。上面说了引用外部的JS 会阻塞其后的资源下载和其后的内容呈现，哪嵌入的JS 又会是怎样阻塞的了，看下面的列2 个代码：
代码1 ：
复制代码 代码如下:
<ul>
<<li>blogjava></li>
<li>CSDN></li>
<li> 博客园></li>
<li>ABC></li>
<li>AAA></li>
<ul>
<div>
<script type="text/javascript">
// 循环5 秒钟
var n = Number(new Date());
var n2 = Number(new Date());
while((n2 - n) (6*1000)){
n2 = Number(new Date());
}
</script>
<div>
<ul>
<li>MSN></li>
<li>GOOGLE></li>
<li>YAHOO></li>
</ul>
</div>
代码2(test.zip 里面的代码与代码1 的JS 代码一模一样) ：
复制代码 代码如下:
<div>
<ul>
<li>blogjava></li>
<li>CSDN></li>
<li> 博客园></li>
<li>ABC></li>
<li>AAA></li>
<ul>
<div>
<script type="text/javascript" src="test.zip"><script>
<div>
<ul>
<li>MSN></li>
<li>GOOGLE></li>
<li>YAHOO></li>
</ul>
</div>
运行后，会发现代码1 中，在前5 秒中页面上是一篇空白，5 秒中后页面全部显示。 代码2 中，前5 秒中blogjava,csdn 等先显示出来，5 秒后MSN 才显示出来。
可以看出嵌入JS 会阻塞所有内容的呈现，而外部JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。
嵌入JS 导致CSS 阻塞加载的问题
CSS 怎么会阻塞加载了？CSS 本来是可以并行下载的，在什么情况下会出现阻塞加载了( 在测试观察中，IE6 下CSS 都是阻塞加载，下面的测试在非IE6 下进行) ：
代码1( 为了效果，这里选择了1 个国外服务器的CSS) ：
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>js test>title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="http://69.64.92.205/Css/Home3.css " />
</head>
<body>
<img src="http://www.fengfly.com/images/logo.gif " /><</span>br />
<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif " />
</body>
</html>
时间瀑布图：
代码2( 只加了1 个空的嵌入JS) ：
<head>
<title>js test>title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="http://69.64.92.205/Css/Home3.css " />
<script type="text/javascript">
function a(){}
</script>
<head>
<body>
<img src="http://www.fengfly.com/images/logo.gif " /><</span>br />
<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif " />
</body>
时间瀑布图:
从时间瀑布图中可以看出，代码2 中，CSS 和图片并没有并行下载，而是等待CSS 下载完毕后才去并行下载后面的2 个图片，当CSS 后面跟着嵌入的JS 的时候，该CSS 就会出现阻塞后面资源下载的情况。
有人可能会问，这里为什么不说说嵌入的JS 阻塞了后面的资源，而是说CSS 阻塞了？ 想想我们现在用的是1 个空函数，解析这个空函数1ms 就够，而后面2 个图片是等CSS 下载完1.3s 后才开始下载。大家还可以试试把嵌入JS 放到CSS 前面，就不会出现阻塞的情况了。
根本原因：因为浏览器会维持html 中css 和js 的顺序，样式表必须在嵌入的JS 执行前先加载、解析完。而嵌入的JS 会阻塞后面的资源加载，所以就会出现上面CSS 阻塞下载的情况。
嵌入JS 应该放在什么位置
1 、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
2 、如果嵌入JS 放在head 中，请把嵌入JS 放在CSS 头部。
3 、使用defer
4 、不要在嵌入的JS 中调用运行时间较长的函数，如果一定要用，可以用setTimeout 来调用
PS ：很多网站喜欢在head 中嵌入JS ，并且习惯放在CSS 后面，比如看到的http://www.qq.com/，当然也有很多网站是把JS 放到CSS 前面的，比如yahoo,google
