快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

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

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