高性能javascript學(xué)習(xí)筆記_第1頁(yè)
高性能javascript學(xué)習(xí)筆記_第2頁(yè)
高性能javascript學(xué)習(xí)筆記_第3頁(yè)
高性能javascript學(xué)習(xí)筆記_第4頁(yè)
高性能javascript學(xué)習(xí)筆記_第5頁(yè)
已閱讀5頁(yè)，還剩6頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

高性能javascript學(xué)習(xí)筆記一、加載和執(zhí)行<script>標(biāo)簽每次出現(xiàn)都讓頁(yè)面等待腳本的解析和執(zhí)行，無(wú)論當(dāng)前javascript代碼是內(nèi)嵌的還是包含在外鏈文獻(xiàn)中的，都必須停下來(lái)等待腳本執(zhí)行完畢之后才繼續(xù)頁(yè)面的下載和渲染，用戶的交互。由于當(dāng)碰到<script>標(biāo)簽時(shí)，HTML頁(yè)面無(wú)法獲知javascript代碼會(huì)不會(huì)該改變頁(yè)面的內(nèi)容，因此頁(yè)面會(huì)停止下載和渲染，等待執(zhí)行完javascript代碼之后才繼續(xù)。1、腳本位置瀏覽器在解析到<body>之前不會(huì)渲染頁(yè)面的任何部分，js文獻(xiàn)下載之后尚有一段延時(shí)用于執(zhí)行，在不能并行下載的瀏覽器中很耗時(shí)，IE8,Firefox3.5,Safari4和Chrome2允許并行下載javascript文獻(xiàn)，但是仍然會(huì)阻塞其他資源下載和頁(yè)面渲染。因此盡也許的將的<script>標(biāo)簽放到<body>標(biāo)簽的底部，減少對(duì)整個(gè)頁(yè)面下載的影響。2、組織腳本每個(gè)<script>標(biāo)簽初始下載時(shí)都會(huì)阻塞頁(yè)面渲染，應(yīng)當(dāng)減少頁(yè)面包含的<script>標(biāo)簽數(shù)，涉及內(nèi)嵌腳本和外鏈腳本。內(nèi)嵌腳本放在外鏈樣式<link>標(biāo)簽之后，內(nèi)嵌腳本為了在執(zhí)行時(shí)獲得最精確的樣式信息，會(huì)阻塞頁(yè)面渲染而去等待樣式表的下載，因此不要把內(nèi)嵌腳本緊跟在<link>標(biāo)簽之后。外鏈腳本：HTTP請(qǐng)求會(huì)帶來(lái)額外的性能開(kāi)銷，因此下載單個(gè)100KB的文獻(xiàn)比下載4個(gè)25KB的文獻(xiàn)快，減少頁(yè)面中外鏈腳本文獻(xiàn)的數(shù)量有助于改善性能。大型網(wǎng)站依賴多個(gè)javascript腳本文獻(xiàn)，我們可以將多個(gè)javascript文獻(xiàn)合并為一個(gè)文獻(xiàn)，只引用一個(gè)<script>標(biāo)簽，減少性能消耗。文獻(xiàn)合并工作可以通過(guò)離線打包工具或者類似Yahoo!combohandler的實(shí)時(shí)在線服務(wù)實(shí)現(xiàn)。雅虎提供了合并解決器。通過(guò)使用指定文獻(xiàn)（一個(gè)或多個(gè)）合并解決后的URL來(lái)獲取任意數(shù)量的YUI文獻(xiàn)。3、無(wú)阻塞的腳本減少javascript文獻(xiàn)大小并限制HTTP請(qǐng)求數(shù)只是優(yōu)化web的第一步，下載單個(gè)的較大的javascript文獻(xiàn)只請(qǐng)求一個(gè)HTTP，但是會(huì)鎖死瀏覽器一大段時(shí)間，阻塞頁(yè)面。所以需要向頁(yè)面中逐步加載javascript文獻(xiàn)，這樣某種限度上不會(huì)阻塞瀏覽器。無(wú)阻塞的秘訣：在頁(yè)面加載完畢后才加載javascript代碼，就是window對(duì)象的load事件觸發(fā)之后再下載腳本。1）延遲的腳本HTML4為<script>標(biāo)簽定義了一個(gè)擴(kuò)展屬性：defer。該屬性只在IE4和Firefox3.5的瀏覽器中支持，在其他瀏覽器，defer會(huì)被直接忽視。defer屬性指明本元素所含的腳本不會(huì)修改DOM，代碼可以安全的延遲執(zhí)行。使用：外鏈：<scripttype="text/javascript"src="file.js"defer></script>內(nèi)嵌：<scriptdefer>alert(defer)</script>任何帶defer屬性的<script>元素在DOM完畢加載之前都不會(huì)執(zhí)行，無(wú)論是內(nèi)嵌還是外鏈?？梢苑旁谖臋n的任何位置，相應(yīng)的javascript文獻(xiàn)在頁(yè)面解析到<script>標(biāo)簽時(shí)才開(kāi)始下載，但是不會(huì)執(zhí)行，直到DOM加載完畢（onload事件被觸發(fā)之前）。帶有defer屬性的javascript文獻(xiàn)下載時(shí)不會(huì)阻塞瀏覽器其他的進(jìn)程，它可以和頁(yè)面中的其它資源并行下載。若是目的瀏覽器只是IE和Firefox3.5，可以很好的延遲，但若是兼容其他則不可取。2）動(dòng)態(tài)腳本元素使用DOM動(dòng)態(tài)的創(chuàng)建script標(biāo)簽:varscript=document.createElement("script");script.type="text/javascript";script.src="file.js";document.getElementByTagName("head")[0].appendChild(script);技術(shù)重點(diǎn)：無(wú)論何時(shí)開(kāi)始下載，文獻(xiàn)的下載和執(zhí)行都不會(huì)阻塞頁(yè)面其他元素的進(jìn)程，甚至可以將代碼放到<head>區(qū)域也不會(huì)影響頁(yè)面其他部分。將新創(chuàng)建的<script>標(biāo)簽添加到<head>標(biāo)簽中比添加到<body>中保險(xiǎn)。該元素在被添加到頁(yè)面時(shí)下載，下載動(dòng)態(tài)腳本文獻(xiàn)返回的代碼，會(huì)被立刻執(zhí)行（除了Firefox和Opera會(huì)等待此前所有的動(dòng)態(tài)腳本節(jié)點(diǎn)執(zhí)行完畢，之后才執(zhí)行）。將script加入head之后我們不能立即調(diào)用其中的js。由于瀏覽器是異步加載這個(gè)js文獻(xiàn)的，我們不知道他什么時(shí)候加載完，非IE瀏覽器會(huì)在<script>元素接受完畢時(shí)觸發(fā)一個(gè)loadhi見(jiàn)，因此可以監(jiān)聽(tīng)此事件來(lái)獲得腳本加載完畢時(shí)的狀態(tài)。IE支持此外一種實(shí)現(xiàn)方式，它會(huì)觸發(fā)一個(gè)readystatechange事件，<script>元素提供一個(gè)readyState屬性，它的值在外鏈文獻(xiàn)下載的過(guò)程的不同階段會(huì)發(fā)生變化，有五種值：“uninitialized”初始狀態(tài)“l(fā)oading”開(kāi)始下載“l(fā)oaded”下載完畢“interactive”數(shù)據(jù)完畢下載但尚不可用“complete”所有數(shù)據(jù)已準(zhǔn)備就緒兼容標(biāo)準(zhǔn)和IE的方法：callback()是完畢接js文獻(xiàn)加載后的回調(diào)函數(shù)functionloadScript(url,callback){varhead=document.getElementsByTagName('head')[0];varscript=document.createElement('script');script.type='text/javascript';//IEif(script.readyState){script.onreadystatechange=function(){if(this.readyState=='complete'||script.readyState=="loaded"){script.onreadystatechange=null;callback();}};}else{//其他瀏覽器script.onload=function(){callback();};}script.src="url";head.appendChild(script);}3）XMLHttpRequest腳本注入使用XMLHttpRequest對(duì)象獲取腳本并注入頁(yè)面。一方面創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，然后用它下載javascript文獻(xiàn)，最后創(chuàng)建動(dòng)態(tài)<script>元素將代碼注入頁(yè)面中。例子：varxhr=newXMLHttpRequest();xhr.open("get","file.js",true);xhr.onreadystatechange=function(){if(xhr.readySate==4){//2xx表達(dá)有效響應(yīng)，304表達(dá)從緩存中讀取if(xhr.status>=200&&xhr.status<300||xhr.status==304){varscript=document.createElement("script");script.type="text/javascript";//用text相稱于創(chuàng)建一個(gè)帶有內(nèi)聯(lián)腳本的<script>標(biāo)簽script.text=xhr.responseText;document.body.sppendChild(script);}}};xhr.send(null);重要優(yōu)點(diǎn)：javascript文獻(xiàn)不會(huì)自動(dòng)執(zhí)行，你可以下載javascript文獻(xiàn)但是不執(zhí)行它，等到準(zhǔn)備好的時(shí)候再執(zhí)行。同樣的代碼在主流瀏覽器中都能執(zhí)行。缺陷：不能跨域請(qǐng)求js文獻(xiàn)。大型的web通常不是采用XHR腳本注入4）無(wú)阻塞模式（推薦）向頁(yè)面中添加大量javascript代碼的推薦做法：兩步先添加動(dòng)態(tài)加載所需的代碼，越少越好；然后加載初始化頁(yè)面所需的剩余的代碼。方法一：//加載loadScript函數(shù)<scripttype="text/javascript"src="loader.js"></script><scripttype="text/script">//"he-rest.js"剩余的javascript代碼loadScript("the-rest.js",function(){Application.init();})</script>//將這段代碼放到</body>閉合標(biāo)簽之

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論