高效能javascript程式設計筆記

介面繪製的時候，每次遇到<script>標籤，頁面必須停下來等待程式碼下載（如果是外部的）並執行，然後再繼續處理頁面其他部分：下面幾個方法可以減少javascript對渲染頁面的等待時間。

（1）將所有<script>標籤放置在頁面的底部，緊靠body關閉標籤</body>的上方。此法可以保證頁面在指令碼執行之前完成解析

（2）將指令碼成組打包。頁面的<script>標籤越少，頁面的載入速度就越快，響應也更加迅速。不論外部指令碼檔案還是內聯程式碼都是如此.

（3）有幾種方法可以使用非阻塞方式下載JavaScript：
1.為<script>標籤新增defer屬性（只適用於Internet Explorer和Firefox 3.5以上版本）

比如：<script type="text/javascript" src="80iter.js" defer></script>
2.動態建立<script>元素，用它下載並執行程式碼

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

3.用XHR物件下載程式碼，並注入到頁面中

var xhr = new XMLHttpRequest();
xhr.open("get", "80iter.js", true);
xhr.onreadystatechange = function(){
 if (xhr.readyState == 4){
 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
 var script = document.createElement ("script");
 script.type = "text/javascript";
 script.text = xhr.responseText;
 document.body.appendChild(script);
 }
 }
};
xhr.send(null);

注意：這個方法不能跨域

由龐順龍最後編輯於：4年前

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。