javascript
JS以及CSS对页面的阻塞
一、JS阻塞
?? 所有的瀏覽器在下載JS文件的時(shí)候，會(huì)阻塞頁(yè)面上的其他活動(dòng)，包括其他資源的下載以及頁(yè)面內(nèi)容的呈現(xiàn)等等，只有當(dāng)JS下載、解析、執(zhí)行完，才會(huì)進(jìn)行后面的 操作。在現(xiàn)代的瀏覽器中CSS資源和圖片image資源是并行下載的，在IE6中默認(rèn)的并行的加載數(shù)目是2個(gè)，在IE6以后以及其他的瀏覽器中的默認(rèn)的并行加載數(shù)目是6個(gè)。
在瀏覽器從服務(wù)器接收到HTML文檔后，并把HTML在內(nèi)存中轉(zhuǎn)換為DOM樹(shù)，在轉(zhuǎn)換節(jié)點(diǎn)的過(guò)程中如果引入了CSS文件以及添加了images，則會(huì)在文檔加載的同時(shí)并行的加載CSS文件以及圖片。但是JS不一樣，因?yàn)闉g覽器需要1個(gè)穩(wěn)定的DOM樹(shù)結(jié)構(gòu)，而JS中很有可能有代碼直接改變了DOM樹(shù)結(jié)構(gòu)，比如使用document.write 或 appendChild,甚至是直接使用的location.href進(jìn)行跳轉(zhuǎn)，瀏覽器為了防止出現(xiàn)JS修改DOM樹(shù)，需要重新構(gòu)建DOM樹(shù)的情況，所以就會(huì)阻塞其他的下載和呈現(xiàn).在沒(méi)有使用異步加載（async）或者是延遲加載(defer)的情況下,只有在一個(gè)JS文件加載解析完后才能加載后面的JS文件。利用延遲腳本和異步腳本可以實(shí)現(xiàn)腳本的并行加載。以下討論都是在沒(méi)有這兩個(gè)屬性的情況下。
? （1）內(nèi)嵌腳本的阻塞
???? 直接寫(xiě)在HTML文檔中的js代碼就是內(nèi)嵌JS，內(nèi)嵌腳本無(wú)需加載，可以直接執(zhí)行，所以當(dāng)頁(yè)面有內(nèi)嵌的腳本時(shí)，可以直接執(zhí)行，導(dǎo)致會(huì)阻塞所有資源的加載和頁(yè)面的呈現(xiàn)。
<!DOCTYPE?html><html?lang="en"><head><meta?charset="UTF-8"><title>內(nèi)嵌JS會(huì)阻塞頁(yè)面上的所有內(nèi)容的呈現(xiàn)</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">//?循環(huán)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>上面的內(nèi)嵌腳不僅會(huì)阻塞第二個(gè)ul的展示，也會(huì)阻塞第一個(gè)ul的展示，頁(yè)面在5秒前是一片空白，當(dāng)延遲結(jié)束后才展現(xiàn)所有的內(nèi)容
（2）外聯(lián)腳本阻塞
? 外聯(lián)腳本不一樣，外聯(lián)腳本只有當(dāng)頁(yè)面加載到該<script>之后才會(huì)加載外聯(lián)腳本，所以外聯(lián)腳本只會(huì)阻塞其后面的內(nèi)容的呈現(xiàn)以及資源的下載，在下面的代碼中，頁(yè)面會(huì)先展示一部分內(nèi)容，后面一部分內(nèi)容在5秒后展現(xiàn)
<!DOCTYPE?html><html?lang="en"><head><meta?charset="UTF-8"><title>外聯(lián)JS文件只會(huì)阻塞后面的資源的下載和呈現(xiàn)</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="定時(shí).js"></script><!--定時(shí)中的代碼和上面的延遲函數(shù)的內(nèi)容一樣的--><ul><li>MSNspan?style="color:?#800000;"</li><li>GOOGLEspan?style="color:?#800000;"</li><li>YAHOOspan?style="color:?#800000;"</li></ul></body></html>二、嵌入JS導(dǎo)致CSS阻塞加載的問(wèn)題
的
????TitlefireBug中的時(shí)間棧：
谷歌中的事件棧：
在上圖中CSS和圖片是并行下載的，通過(guò)時(shí)間線可以看出，后面的圖片并沒(méi)有等到CSS文件完全加載完后在加載。
（2）內(nèi)嵌腳本導(dǎo)致CSS阻塞頁(yè)面
<!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>fireBug中的時(shí)間棧：
?谷歌中的時(shí)間棧：
通過(guò)上圖在狐火中由于內(nèi)嵌腳本的作用使得圖片要等到css完全加載完后在加載，即CSS阻塞了圖片的加載。其實(shí)質(zhì)是因?yàn)闉g覽器會(huì)維持HTML中CSS和JS的順序，即在JS前面出現(xiàn)的CSS文件需要加載、解析完后才會(huì)執(zhí)行后面的內(nèi)嵌JS，而內(nèi)嵌JS又會(huì)阻塞后面的內(nèi)容
（2）外聯(lián)腳本
<!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中的內(nèi)容就是a方法--></head><body><img?src="http://www.blogjava.net/images/logo.gif"?/><img?src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif"?/></body></html>外聯(lián)腳本會(huì)阻塞后面資源的加載，但是在谷歌瀏覽器中不管是內(nèi)聯(lián)還是外聯(lián)的腳本均不會(huì)阻塞
三、為了不阻塞頁(yè)面腳本的放置位置
（1）盡量合并腳本減少<script>的出現(xiàn)
（2）盡量使用外聯(lián)腳本并將腳本放置在<body>底部
（3）使用延遲腳本和異步腳本
（4）內(nèi)嵌腳本放置在window.onload中執(zhí)行
本文轉(zhuǎn)自xsster51CTO博客，原文鏈接：http://blog.51cto.com/12945177/1950781 ，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的JS以及CSS对页面的阻塞的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： mysql 案例~mysql主从复制延迟
- 下一篇： JavaScript 项目构建工具 Gr