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

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

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

3、srcipt盡量放到body標(biāo)簽的底部，以削減對(duì)囫圇頁(yè)面下載的影響。二、組織腳本因?yàn)闃?biāo)簽在下載時(shí)會(huì)堵塞頁(yè)面的渲染，所以削減標(biāo)簽數(shù)量有助于充實(shí)這一狀況。建議將多個(gè)javascript文件合并為一個(gè)，這樣可以削減性能的消耗。同時(shí)也可以削減哀求的數(shù)量。參考：在服務(wù)端合并和壓縮javascript和css文件三、無(wú)堵塞腳本1、延遲腳本html4 為標(biāo)簽定義了一個(gè)defer 屬性，它能使這段代碼延遲執(zhí)行，然而該屬性惟獨(dú)ie4+支持，因此它不是一個(gè)抱負(fù)的跨掃瞄器解決計(jì)劃。聲明白defer 屬性的script會(huì)在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、動(dòng)態(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ù)使用 /單個(gè)文件 loadscript('file1.js', function() alert('loaded!'); ); /多個(gè)文件 loadscript('file1.js', function() loadscript('file2.js',function() loadscript('file3.js', function() alert(&

7、#39;all files loaded!'); ); ); ); 這種技術(shù)的重點(diǎn)在于：無(wú)論何時(shí)啟動(dòng)下載，文件的下載和執(zhí)行過程不會(huì)堵塞頁(yè)面其它進(jìn)程，你甚至可以將代碼放在頁(yè)面的head區(qū)域而不影響頁(yè)面的其它部分（下載該文件的http鏈接除外）。3、xmlhttprequest 腳本注入此技術(shù)會(huì)先創(chuàng)建一個(gè)xhr對(duì)象，然后用它下載javascript文件，最后創(chuàng)建動(dòng)態(tài)的script元素將代碼注入到頁(yè)面中。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í)行。因?yàn)榇a是在標(biāo)簽之外返回的，因此下載后不會(huì)自動(dòng)執(zhí)行，這使得是可以把腳本推遲到你預(yù)備好的時(shí)候。這種辦法的局限性在于javascript文件必需與所哀求的頁(yè)面處于相同的域，這意味著javascript文件不能從cdn下載，因此不適合大型網(wǎng)站或項(xiàng)目。四、推舉的無(wú)堵塞加載方式1、yui3的方式2、lazyload（1.5k）yahoo!search工程師ryan grove創(chuàng)建的一個(gè)通用的

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

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

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