腳本位置

由于腳本會阻塞頁面其他資源的下載, 因此推薦將所有的< script >標簽盡可能放到< body >標簽的底部, 以盡量減少對整個頁面下載的影響.

組織腳本

1. Steve Souders發(fā)現(xiàn), 把一段內(nèi)嵌腳本放在引用外鏈樣式表的< link >標簽之后會導致頁面阻塞去等待樣式表的下載. 這樣做是為了確保內(nèi)嵌腳本在執(zhí)行時能獲得最精確的樣式信息. 因此, Souders建議永遠不要把內(nèi)嵌腳本緊跟在< link >標簽的后面.
2. 考慮到HTTP請求會帶來額外的性能開銷, 因此下載單個100KB的文件要比下載4個25KB的文件更快. 也就是說, 減少頁面中外鏈腳本文件數(shù)量將會改善性能.

延遲的腳本

HTML4為< script >標簽定義了一個擴展屬性: defer.

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

HTML5規(guī)范還引入了async屬性, 用于異步加載腳本. async與defer的相同點是采用并行下載. 在下載過程中不會產(chǎn)生阻塞. 區(qū)別在于執(zhí)行時機, async是加載完成后自動執(zhí)行, 而defer需要等待頁面完成后執(zhí)行.
帶有defer屬性的< script >標簽可以擺放在文檔的任何位置. 對應的javascript文件將在頁面解析到< script >標簽時開始下載, 但并不會執(zhí)行, 知道DOM加載完成(onload事件被觸發(fā)前). 當一個帶有defer屬性的javascript文件下載時, 它不會阻塞瀏覽器的其他進程, 因此這類文件可以與頁面中的其他資源并行下載.

動態(tài)腳本元素(即使用js插入的外部js文件)

使用動態(tài)腳本節(jié)點下載文件時, 返回的代碼通常會立刻執(zhí)行(除了Firefox和Opera, 它們會等待此前所有動態(tài)腳本節(jié)點加載完成), 但是當代碼只包含供頁面其他腳本調(diào)用的接口時, 就會有問題. 在這種情況下, 你必須跟蹤并確保腳本下載完成且準備就緒.
封裝的函數(shù):

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (script.readyState) {
        script.onreadystatechange = function() { //ie
            if (script.readyState == 'complete' || script.readyState == 'loaded') {
                callback(); //某個函數(shù)
            }
        }
    } else {
        script.onload = function() {
            callback();
        }
    }
    script.src = url;
    document.head.appendChild(script);
}

推薦的無阻塞模式

<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
    loadScript("1.js", function(){
        Application.init();
    })
</script>

第一部分(例 : loader.js)代碼盡量精簡, 甚至可能只包含loadScript( )函數(shù)

或者也可以把loadScript( )函數(shù)直接嵌入在頁面, 然后調(diào)用loadScript()函數(shù)插入其它文件.