標籤：js
一、JS阻塞
所有的瀏覽器在下載JS檔案的時候，會阻塞頁面上的其他活動，包括其他資源的下載以及頁面內容的呈現等等，只有當JS下載、解析、執行完，才會進行後面的 操作。在現代的瀏覽器中CSS資源和圖片image資源是並行下載的，在IE6中預設的並行的載入數目是2個，在IE6以後以及其他的瀏覽器中的預設的並行載入數目是6個。
在瀏覽器從伺服器接收到HTML文檔後，並把HTML在記憶體中轉換為DOM樹，在轉換節點的過程中如果引入了CSS檔案以及添加了images，則會在文檔載入的同時並行的載入CSS檔案以及圖片。但是JS不一樣，因為瀏覽器需要1個穩定的DOM樹結構，而JS中很有可能有代碼直接改變了DOM樹結構，比如使用document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，瀏覽器為了防止出現JS修改DOM樹，需要重新構建DOM樹的情況，所以就會阻塞其他的下載和呈現.在沒有使用非同步載入（async）或者是消極式載入(defer)的情況下,只有在一個JS檔案載入解析完後才能載入後面的JS檔案。利用延遲指令碼和非同步指令碼可以實現指令碼的並行載入。以下討論都是在沒有這兩個屬性的情況下。
（1）內嵌指令碼的阻塞
直接寫在HTML文檔中的js代碼就是內嵌JS，內嵌指令碼無需載入，可以直接執行，所以當頁面有內嵌的指令碼時，可以直接執行，導致會阻塞所有資源的載入和頁面的呈現。
650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>內嵌JS會阻塞頁面上的所有內容的呈現</title></head><body><div><ul> <li>blogjavaspan style="color: #800000;"</li> <li>CSDNspan style="color: #800000;"</li> <li>部落格園span style="color: #800000;"</li> <li>ABCspan style="color: #800000;"</li> <li>AAAspan style="color: #800000;"</li></ul><span style="color: #800000;"></span></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><ul> <li>MSNspan style="color: #800000;"</li> <li>GOOGLEspan style="color: #800000;"</li> <li>YAHOOspan style="color: #800000;"</li></ul></body></html>
650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />
上面的內嵌腳不僅會阻塞第二個ul的展示，也會阻塞第一個ul的展示，頁面在5秒前是一片空白，當延遲結束後才展現所有的內容
（2）外聯指令碼阻塞
外聯指令碼不一樣，外聯指令碼只有當頁面載入到該<script>之後才會載入外聯指令碼，所以外聯指令碼只會阻塞其後面的內容的呈現以及資源的下載，在下面的代碼中，頁面會先展示一部分內容，後面一部分內容在5秒後展現
650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>外聯JS檔案只會阻塞後面的資源的下載和呈現</title></head><body><ul> <li>blogjavaspan style="color: #800000;"</li> <li>CSDNspan style="color: #800000;"</li> <li>部落格園span style="color: #800000;"</li> <li>ABCspan style="color: #800000;"</li> <li>AAAspan style="color: #800000;"</li></ul><script src="定時.js"></script><!--定時中的代碼和上面的延遲函數的內容一樣的--><ul> <li>MSNspan style="color: #800000;"</li> <li>GOOGLEspan style="color: #800000;"</li> <li>YAHOOspan style="color: #800000;"</li></ul></body></html>
650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />
二、嵌入JS導致CSS阻塞載入的問題
的
650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />
Title
650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />
fireBug中的時間棧：
650) this.width=650;" src="http://images2015.cnblogs.com/blog/937673/201706/937673-20170616220112368-1323587509.png" style="margin:0px;padding:0px;border:0px;" />
Google中的事件棧：
650) this.width=650;" src="http://images2015.cnblogs.com/blog/937673/201706/937673-20170616220234337-730215955.png" style="margin:0px;padding:0px;border:0px;" />
在中CSS和圖片是並行下載的，通過時間軸可以看出，後面的圖片並沒有等到CSS檔案完全載入完後在載入。
（2）內嵌指令碼導致CSS阻塞頁面
650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <script type="text/javascript"> function a(){}; </script></head><body><img src="http://www.blogjava.net/images/logo.gif" /><img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" /></body></html>
650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />
fireBug中的時間棧：
650) this.width=650;" src="http://images2015.cnblogs.com/blog/937673/201706/937673-20170616220037571-1148440644.png" style="margin:0px;padding:0px;border:0px;" />
Google中的時間棧：
650) this.width=650;" src="http://images2015.cnblogs.com/blog/937673/201706/937673-20170616220536681-1989108565.png" style="margin:0px;padding:0px;border:0px;" />
通過在狐火中由於內嵌指令碼的作用使得圖片要等到css完全載入完後在載入，即CSS阻塞了圖片的載入。其實質是因為瀏覽器會維持HTML中CSS和JS的順序，即在JS前面出現的CSS檔案需要載入、解析完後才會執行後面的內嵌JS，而內嵌JS又會阻塞後面的內容
（2）外聯指令碼
650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <script type="text/javascript" src="fun.js"></script><!--這裡fun中的內容就是a方法--></head><body><img src="http://www.blogjava.net/images/logo.gif" /><img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" /></body></html>
650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;padding:0px;border:none;" />
650) this.width=650;" src="http://images2015.cnblogs.com/blog/937673/201706/937673-20170616221755650-1731344485.png" style="margin:0px;padding:0px;border:0px;" />
650) this.width=650;" src="http://images2015.cnblogs.com/blog/937673/201706/937673-20170616221832509-1019850238.png" style="margin:0px;padding:0px;border:0px;" />
外聯指令碼會阻塞後面資源的載入，但是在Google瀏覽器中不管是內聯還是外聯的指令碼均不會阻塞
三、為了不阻塞頁面指令碼的置放位置
（1）盡量合并指令碼減少<script>的出現
（2）盡量使用外聯指令碼並將指令碼放置在<body>底部
（3）使用延遲指令碼和非同步指令碼
（4）內嵌指令碼放置在window.onload中執行
JS以及CSS對頁面的阻塞
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
