快捷導(dǎo)航

Javascript 加載和執(zhí)行-性能提高篇

更新時間：2012年12月28日 10:19:19 作者：

Javascript 在瀏覽器中的性能問題，可能是最重要的可用性問題;Js的阻塞性瀏覽器用單一進(jìn)程來處理UI進(jìn)程和Js的執(zhí)行;不管是內(nèi)嵌的還是外鏈的，下載并立即執(zhí)行因?yàn)樗锌赡軙薷捻撁?/div>

Js的阻塞性
Javascript 在瀏覽器中的性能問題，可能是最重要的可用性問題
Js的阻塞性瀏覽器用單一進(jìn)程來處理UI進(jìn)程和Js的執(zhí)行
不管是內(nèi)嵌的還是外鏈的，下載并立即執(zhí)行因?yàn)樗锌赡軙薷捻撁?

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

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
document.write("The date is" + (new Date().toDateString())); 
</script> 

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

組織腳本
目標(biāo) 最小化遲延時間
問題
引用多個script文件內(nèi)嵌多個script標(biāo)簽
每個http請求都會帶來性能上的開銷
緊跟在link 后的script 是個錯誤它會等待css的加載，以求獲得最精準(zhǔn)的描繪
結(jié)論:減少script標(biāo)簽的數(shù)量
將多個js文件合并成一個，打包工具
yahoo的合并處理器

無阻塞的腳本
js傾向于阻止瀏覽器的某些處理過程，如http請求處理和界面更新.這是最重要的性能問題。于是要減少js文件大小和限制http請求數(shù)
但是功能豐富與代碼量之間的矛盾，合并成單個文件卻體積大會鎖死瀏覽器一大段時間，于是我們需要逐步加載javascript文件
重點(diǎn)：在頁面加載完成后加載javascript文件

1、延遲加載腳本
defer 屬性
如果要下載的js文件不會進(jìn)行dom操作,那么defer屬性有很大的用處，它能讓文件并行下載，并不會立即執(zhí)行，而會在onload事件后再執(zhí)行,適用于任何script標(biāo)簽
2、動態(tài)加載腳本
一個function

復(fù)制代碼代碼如下:

 
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(); 
} 
} 
} 

這里要注意瀏覽器的兼容性，刪除事件，
如果有多個文件需要這樣加載，那么可以

復(fù)制代碼代碼如下:

 
loadScript('file1.js', function(){ 
loadScript('file2.js',function(){ 
}) 
}); 

3、XHR腳本注入

復(fù)制代碼代碼如下:

 
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); 
} 
} 
} 