script標籤載入最佳化

標籤：

HTML中script標籤載入問題

HTML文檔為一行一行從上往下載入。當載入到script標籤時會停下所有載入等待script載入完畢，當script放在head標籤中時，使用者載入網頁時會先載入script標籤，使得body中的內容沒法第一時間載入，導致頁面處在一片空白狀態下，直到script載入完畢。

在標頭檔的script全部載入完畢前瀏覽器會處於阻塞狀態，而頁面內容都在body標籤中，如果將script標籤全部放在head標籤中會導致使用者在script載入完畢前處於空白介面無法進行互動。

 

解決辦法：將script放在body標籤底部

 

為了避免這種情況應該盡量將script放在body標籤的底部，先載入介面內容再載入script。

 

發起http請求會有時間損耗，會導致下載一個100kb的檔案所需時間小於下載4個25kb的檔案所需時間。所以需要盡量將外聯js檔案合并，減少下載次數。但需要注意的是，js會阻塞瀏覽器，雖然一次下載完所有的js檔案會減少http的時間損耗，但是js檔案越大阻塞瀏覽器的時間就越大。所以好一點的辦法就是逐步添加script。具體實現方法如下所示。

 

1. 延期指令碼

 

Html4為script增加了一種新的屬性defer，可以使script延期載入。

 

 <script type="text/javascript" src="test.js" defer> </script>

 

 

 

2. 動態指令碼元素

Dom允許動態載入指令碼，我們可以動態載入script標籤。

 

var script = document.createElement("script");script.type = "text/javascript";script.src = "test.js";document.getElementsByTagName("head")[0].appendChild(script);

 

此檔案當元素添加到文檔中後會立刻啟動下載，此技術重點在於無論在何處下載，檔案的下載和運行都不會阻塞頁面其他內容。

動態添加元素在載入完畢後會發出一個load事件。

 

var script = document.createElement("script");script.type = "text/javascript";script.src = "test.js";script.onload = function() {   alert("script is readly");}document.getElementsByTagName("head")[0].appendChild(script);

ie沒有onload事件。有差不多功能的onreadystatechange事件

var script = document.createElement("script");script.type = "text/javascript";script.src = "test.js";script.onreadystatechange = function() {    if (script.readyState == "loaded" || script.readyState == "complete"){      script.onreadystatechange = null;      alert("script is readly");    }}

為了相容，所以將兩個函數整合成如下函數

function loadScript(url, callback){    var script = document.createElement ("script")    script.type = "text/javascript";    if (script.readyState){ //IE        script.onreadystatechange = function(){            if (script.readyState == "loaded" || script.readyState == "complete"){                script.onreadystatechange = null;                callback();            }        };    } else { //Others        script.onload = function(){            callback();        };    }    script.src = url;    document.getElementsByTagName("head")[0].appendChild(script);}

在使用時可以直接使用script下載僅僅含有loadScript的js檔案，然後用loadScript函數去下載其他標籤。

 

<script type="text/javascript" src="loader.js"></script><script type="text/javascript">loadScript("test.js", function(){    alert(‘test alert ready‘)});</script>

 

 

 

 

 

 

script標籤載入最佳化