Javascript 加載性能優(yōu)化

1、javascript 加載性能優(yōu)化堵塞特性掃瞄器對javascript的處理主要有2部分：下載和執(zhí)行 下載在有些掃瞄器中是并行的，有些掃瞄器中是串行的，如ie8、firefox3、chrome2都是串行下載的 執(zhí)行在全部掃瞄器中默認(rèn)都是堵塞的，當(dāng)js在執(zhí)行時不會舉行html解析等其它操作 堵塞特性：javascript有個堵塞特性，當(dāng)掃瞄器執(zhí)行javascript代碼時，不能同時做其它任何事情。無論當(dāng)前javascript代碼是內(nèi)嵌還是在外鏈文件中，頁面的下載和渲染都必需停下來等待腳本執(zhí)行完成。掃瞄器在下載和執(zhí)行腳本是進(jìn)浮現(xiàn)堵塞的緣由在于，腳本可能會轉(zhuǎn)變頁面或javascript的命名空間，它

2、們對后面頁面內(nèi)容造成影響。一、腳本位置掃瞄器在遇到一個引入外部javascript文件的標(biāo)簽時會停下全部工作來下載并解析執(zhí)行它，在這個過程中，頁面渲染和用戶交互徹低被堵塞了。例： 無標(biāo)題文檔 頁面的內(nèi)容。 因為腳本的堵塞特性，頁面會在3個javascript文件所有下載執(zhí)行完成后，頁面才會繼續(xù)渲染，把腳本放在頁面頂部會導(dǎo)致顯然延遲，通常表現(xiàn)為顯示空白頁，用戶無法掃瞄內(nèi)容，也無法與頁面交互。ie8+、firefox 3.5+、safari4+、chrome2+都允許并行下載javascript文件，但是在下載的過程中仍然會堵塞等其它資源的下載。因為腳本會堵塞頁面其它資源的下載，因此推舉將java

3、srcipt盡量放到body標(biāo)簽的底部，以削減對囫圇頁面下載的影響。二、組織腳本因為標(biāo)簽在下載時會堵塞頁面的渲染，所以削減標(biāo)簽數(shù)量有助于充實這一狀況。建議將多個javascript文件合并為一個，這樣可以削減性能的消耗。同時也可以削減哀求的數(shù)量。參考：在服務(wù)端合并和壓縮javascript和css文件三、無堵塞腳本1、延遲腳本html4 為標(biāo)簽定義了一個defer 屬性，它能使這段代碼延遲執(zhí)行，然而該屬性惟獨(dú)ie4+支持，因此它不是一個抱負(fù)的跨掃瞄器解決計劃。聲明白defer 屬性的script會在dom加載完成，window.onload 大事觸發(fā)前被解析執(zhí)行： script defer e

4、xample alert('defer'); alert('script'); window.onload = function() alert('load'); 這段代碼在支持defer屬性的掃瞄器彈出挨次是：script、defer、load；不支持defer屬性的掃瞄器彈出的挨次是defer、script、load。2、動態(tài)腳本元素function loadscript(url, callback) var script = document.createelement('script') script.type = 

5、9;text/javascript' if (script.readystate) /for ie script.onreadystatechange = function() if (script.readystate = 'loaded' | script.readystate = 'complete') script.onreadystatechange = null; callback(); ; else /other browser script.onload = function() callback(); ; script.src = ur

6、l; document.getelementsbytagname('head')0.appendchild(script);loadscript函數(shù)使用 /單個文件 loadscript('file1.js', function() alert('loaded!'); ); /多個文件 loadscript('file1.js', function() loadscript('file2.js',function() loadscript('file3.js', function() alert(&

7、#39;all files loaded!'); ); ); ); 這種技術(shù)的重點(diǎn)在于：無論何時啟動下載，文件的下載和執(zhí)行過程不會堵塞頁面其它進(jìn)程，你甚至可以將代碼放在頁面的head區(qū)域而不影響頁面的其它部分（下載該文件的http鏈接除外）。3、xmlhttprequest 腳本注入此技術(shù)會先創(chuàng)建一個xhr對象，然后用它下載javascript文件，最后創(chuàng)建動態(tài)的script元素將代碼注入到頁面中。var xhr = new xmlhttprequest();xhr.open('get', 'file1.js', true);xhr.onreadysta

8、techange = function() if (xhr.status >= 200 && xhr.status這種辦法優(yōu)點(diǎn)是可以挺直下載javascript代碼但不立刻執(zhí)行。因為代碼是在標(biāo)簽之外返回的，因此下載后不會自動執(zhí)行，這使得是可以把腳本推遲到你預(yù)備好的時候。這種辦法的局限性在于javascript文件必需與所哀求的頁面處于相同的域，這意味著javascript文件不能從cdn下載，因此不適合大型網(wǎng)站或項目。四、推舉的無堵塞加載方式1、yui3的方式2、lazyload（1.5k）yahoo!search工程師ryan grove創(chuàng)建的一個通用的

9、延遲加載工具，是loadscript()函數(shù)的增加版。使用示例: lazyload.js('the-reset.js', function() application.init(); ); lazyload同樣支持多個javascript文件，并能保證在全部掃瞄器中都可以按正確的挨次執(zhí)行。要加載多個javscript文件，只需要給lazyload.js()y辦法傳入一個url數(shù)組： lazyload.js('first.js', 'the-reset.js', function() application.init(); ); 項目地址：3、la

10、bjs（4.7k）labjs是kyle simpson受steve sounders的啟發(fā)實現(xiàn)的無堵塞加載工具。使用示例： $lab.script('the-reset.js') .wait(function() application.init(); ); $lab.script()辦法用來定義需要下載的javascript文件，$lab.wait()用來指定文件下載并執(zhí)行完畢后所調(diào)用的函數(shù)。要下載多個javscript文件，只需鏈?zhǔn)秸{(diào)用另一個$lab.script()辦法： $lab.script('first.js') .script('the-r

11、eset.js') .wait(function() application.init(); ); labjs別出心裁的是它管理依靠關(guān)系的能力。通常來說，延續(xù)的標(biāo)簽意味著文件逐個下載并按挨次執(zhí)行。labjs允許用法wait()辦法來指定哪些文件需要等待其它文件。上面的例子中first.js不能保證會在the-reset.js的代碼前執(zhí)行，為了確保這一點(diǎn)，必需在第一個script()辦法后調(diào)用wait(): $lab.script('first.js').wait() .script('the-reset.js') .wait(function() application.init(); ); 項目地址：4、seajs（7.5k）seajs 是淘寶玉伯開發(fā)的一個遵循 commonjs 規(guī)范的模塊加載框架，可用來輕松愉悅地加載隨意 javascript 模塊。具體請參考：5、do 框架