管理瀏覽器的javascript代碼是個麻煩的問題(從性能上講),因爲代碼執行阻塞了其他瀏覽器處理過程,像用戶界面繪製。每次遇到<script>標籤,頁面必須停下來等待代碼下載(如果是外部的)並執行,然後在繼續處理頁面其他部分。
下面有幾種方法可以減少javascript對性能的影響:
1.將所有的<script>標籤放置在頁面的底部,在body關閉標籤</body>的上方。這樣可以保證頁面在腳步運行之前完成解析。
2.將腳本成組打包。頁面的<script>標籤越少,頁面的加載速度越快,響應也更加迅速。不論是外部腳本還是內聯代碼都是如此。
3.使用非阻塞方式下載javascript
爲<script>標籤添加defer屬性--啓動下載 代碼不會被立刻執行 在onload事件句柄處理之前調用(只適用IE和Firefox3.5以上版本) 但是不支持跨領域的多種瀏覽器
動態創建<script>元素 用戶它下載並執行代碼,但是如果腳本包含供頁面調用其他腳本調用的接口 會帶來問題,同樣代碼不能保證按照你指定的順序執行(firefox和Opera 可以)用loadScript或第三方js可以控制
用 XHR對象下載代碼 並注入到頁面中
4.第三方js插件 Yahoo的YUI 3 yui-min.js 指出dom的名字 傳遞給YUI的use()函數,再提供一個回調函數。
YUI().use("dom",function(Y){
Y.DOM.addClass(docment.body,"loaded");
});
Yahoo的Search的 Ryan Grove 創建LazyLoad庫 可以下載多個文件並保證按照正確順序執行
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
LazyLoad.js[("the-rest.js","***.js"], function(){
Application.init();
});
</script>
LABjs http://labjs.com/ 中 Kyle Simpson寫的一個開源庫
<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
$LAB.script("first-file.js").wait()
.script("the-rest.js")
.wait(function(){
Application.init();
});
</script>