Javascript 載入和執行-效能提高篇

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

頁面生存周期的概念
瀑布圖中看到了下載時間和executing time
在head中加入script 和link body載入到前不會輸出任何東西，因此會看到空白頁面 複製代碼 代碼如下:<script type="text/javascript">
document.write("The date is" + (new Date().toDateString()));
</script>

頁面在到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,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 {
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 <=300 || xhr.status==304) {
var oScript = document.createElement('script');
　　　　 oScript.text = xhr.responseText;
　　　　 document.body.appendChild(oScript);
}
}
}

304表示從緩衝取 text將ajax的內容放入text

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