Javascript 載入與執行-效能提升篇_javascript技巧

Js的阻塞性
Javascript 在瀏覽器中的效能問題，可能是最重要的可用性問題
Js的阻塞性瀏覽器用單一進程來處理UI進程和Js的執行
不管是內嵌的還是外鏈的，下載並立即執行因為它有可能會修改頁面

頁面生存週期的概念
瀑布圖中看到了下載時間和executing time
在head中加入script 和link body載入到前不會輸出任何東西，因此會看到空白頁

複製程式碼 程式碼如下:

頁面在到script時，不知道script裡會做什麼，所以必然阻塞，等它執行
Ie8 等瀏覽器能並行下載多個js等資源,但是還是對下載圖片有影響
結論， 將腳本放在底部加載

組織腳本
目標最小化遲延時間
問題
引用多個script檔案內嵌多個script標籤
每個http請求都會帶來效能上的開銷
緊跟在link 後的script 是個錯誤它會等待css的加載，以求獲得最精準的描繪
結論:減少script標籤的數量
將多個js檔案合併成一個，打包工具
yahoo的合併處理器

無阻塞的腳本
js傾向於阻止瀏覽器的某些處理過程，如http請求處理和介面更新。這是最重要的效能問題。於是要減少js檔案大小和限制http請求數
但是功能豐富與程式碼量之間的矛盾， 合併成單一檔案卻體積大會鎖死瀏覽器一大段時間，於是我們需要逐步載入javascript檔案
重點：在頁面載入完成後載入javascript檔

1、延遲載入腳本
defer 屬性
如果要下載的js檔案就不會進行dom操作,那麼defer屬性有很大的用處，它能讓檔案並行下載，並不會立即執行，而會在onload事件後再執行,適用於任何script標籤
2、動態載入腳本
一個function

複製程式碼 程式碼如下:

function loadScript(url, loadScript(url, 🎜>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;
　　＀　〜〜(); else {
script.onload = function(){
callback();
}
}
}


這裡要注意瀏覽器的相容性，刪除事件，
如果有多個檔案需要這樣加載，那麼可以

複製程式碼 程式碼如下: loadScript('file1.js', function(){

loadScript('file2.js',function(){

})
});



3、XHR腳本注入

複製程式碼 程式碼如下:

程式碼如下:

>var xhr = new XMLHttpRequest();
xhr.open('get','file1.js',true);
xhr.onreadystatechange= function(){
　　if(xhr.readyState == 4) {
　　　　if(xhr.status >= 200 && xhr.status var oScript = document.createElement('script');; .text = xhr.responseText;
　　　　 document.body.appendChild(oScript);
}
}
}

}

}

}
} }
} 它的優點 相容性好，異步， 缺點：不能擴域不能從cdn取內容