JS以及CSS對頁面的阻塞

一、JS阻塞

專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)中原免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

所有的瀏覽器在下載JS文件的時候，會阻塞頁面上的其他活動，包括其他資源的下載以及頁面內(nèi)容的呈現(xiàn)等等，只有當JS下載、解析、執(zhí)行完，才會進行后面的操作。在現(xiàn)代的瀏覽器中CSS資源和圖片p_w_picpath資源是并行下載的，在IE6中默認的并行的加載數(shù)目是2個，在IE6以后以及其他的瀏覽器中的默認的并行加載數(shù)目是6個。

在瀏覽器從服務器接收到HTML文檔后，并把HTML在內(nèi)存中轉(zhuǎn)換為DOM樹，在轉(zhuǎn)換節(jié)點的過程中如果引入了CSS文件以及添加了p_w_picpaths，則會在文檔加載的同時并行的加載CSS文件以及圖片。但是JS不一樣，因為瀏覽器需要1個穩(wěn)定的DOM樹結(jié)構(gòu)，而JS中很有可能有代碼直接改變了DOM樹結(jié)構(gòu)，比如使用document.write 或 appendChild,甚至是直接使用的location.href進行跳轉(zhuǎn)，瀏覽器為了防止出現(xiàn)JS修改DOM樹，需要重新構(gòu)建DOM樹的情況，所以就會阻塞其他的下載和呈現(xiàn).在沒有使用異步加載（async）或者是延遲加載(defer)的情況下,只有在一個JS文件加載解析完后才能加載后面的JS文件。利用延遲腳本和異步腳本可以實現(xiàn)腳本的并行加載。以下討論都是在沒有這兩個屬性的情況下。

（1）內(nèi)嵌腳本的阻塞

直接寫在HTML文檔中的js代碼就是內(nèi)嵌JS，內(nèi)嵌腳本無需加載，可以直接執(zhí)行，所以當頁面有內(nèi)嵌的腳本時，可以直接執(zhí)行，導致會阻塞所有資源的加載和頁面的呈現(xiàn)。

JS以及CSS對頁面的阻塞

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>內(nèi)嵌JS會阻塞頁面上的所有內(nèi)容的呈現(xiàn)</title></head><body><div><ul>
    <li>blogjavaspan </li>
    <li>CSDNSpan </li>
    <li>博客園span </li>
    <li>ABCspan </li>
    <li>AAAspan </li></ul><span ></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 </li>
    <li>GOOGLEspan </li>
    <li>YAHOOspan </li></ul></body></html>

JS以及CSS對頁面的阻塞

上面的內(nèi)嵌腳不僅會阻塞第二個ul的展示，也會阻塞第一個ul的展示，頁面在5秒前是一片空白，當延遲結(jié)束后才展現(xiàn)所有的內(nèi)容

（2）外聯(lián)腳本阻塞

外聯(lián)腳本不一樣，外聯(lián)腳本只有當頁面加載到該<script>之后才會加載外聯(lián)腳本，所以外聯(lián)腳本只會阻塞其后面的內(nèi)容的呈現(xiàn)以及資源的下載，在下面的代碼中，頁面會先展示一部分內(nèi)容，后面一部分內(nèi)容在5秒后展現(xiàn)

JS以及CSS對頁面的阻塞

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>外聯(lián)JS文件只會阻塞后面的資源的下載和呈現(xiàn)</title></head><body><ul>
    <li>blogjavaspan </li>
    <li>CSDNspan </li>
    <li>博客園span </li>
    <li>ABCspan </li>
    <li>AAAspan </li></ul><script src="定時.js"></script><!--定時中的代碼和上面的延遲函數(shù)的內(nèi)容一樣的--><ul>
    <li>MSNspan </li>
    <li>GOOGLEspan </li>
    <li>YAHOOspan </li></ul></body></html>

JS以及CSS對頁面的阻塞

二、嵌入JS導致CSS阻塞加載的問題

的

JS以及CSS對頁面的阻塞

    
    Title

JS以及CSS對頁面的阻塞

fireBug中的時間棧：

JS以及CSS對頁面的阻塞

谷歌中的事件棧：

JS以及CSS對頁面的阻塞

在上圖中CSS和圖片是并行下載的，通過時間線可以看出，后面的圖片并沒有等到CSS文件完全加載完后在加載。

（2）內(nèi)嵌腳本導致CSS阻塞頁面

JS以及CSS對頁面的阻塞

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet"  />
    <script type="text/javascript">
        function a(){};    </script></head><body><img src="http://www.blogjava.net/p_w_picpaths/logo.gif" /><img src="http://csdnimg.cn/www/p_w_picpaths/csdnindex_piclogo.gif" /></body></html>

JS以及CSS對頁面的阻塞

fireBug中的時間棧：

JS以及CSS對頁面的阻塞

谷歌中的時間棧：

JS以及CSS對頁面的阻塞

通過上圖在狐火中由于內(nèi)嵌腳本的作用使得圖片要等到css完全加載完后在加載，即CSS阻塞了圖片的加載。其實質(zhì)是因為瀏覽器會維持HTML中CSS和JS的順序，即在JS前面出現(xiàn)的CSS文件需要加載、解析完后才會執(zhí)行后面的內(nèi)嵌JS，而內(nèi)嵌JS又會阻塞后面的內(nèi)容

（2）外聯(lián)腳本

JS以及CSS對頁面的阻塞

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet"  />
    <script type="text/javascript" src="fun.js"></script><!--這里fun中的內(nèi)容就是a方法--></head><body><img src="http://www.blogjava.net/p_w_picpaths/logo.gif" /><img src="http://csdnimg.cn/www/p_w_picpaths/csdnindex_piclogo.gif" /></body></html>

JS以及CSS對頁面的阻塞

外聯(lián)腳本會阻塞后面資源的加載，但是在谷歌瀏覽器中不管是內(nèi)聯(lián)還是外聯(lián)的腳本均不會阻塞

三、為了不阻塞頁面腳本的放置位置

（1）盡量合并腳本減少<script>的出現(xiàn)

（2）盡量使用外聯(lián)腳本并將腳本放置在<body>底部

（3）使用延遲腳本和異步腳本

（4）內(nèi)嵌腳本放置在window.onload中執(zhí)行

本文題目：JS以及CSS對頁面的阻塞
路徑分享：http://muchs.cn/article2/ihceoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、網(wǎng)站內(nèi)鏈、Google、小程序開發(fā)、網(wǎng)站排名、移動網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容