版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
1、異步加載JS腳本Javript腳本對現代網站來說是必不可少的。當用戶訪問站點，需要下載各種資源，例如JS腳本，CSS，圖片，iframe等。瀏覽器下載除JS外的資源時，會并行下載，以提高性能。但下載JS腳本時，會禁止并行下載(稱為腳本阻塞sBlockDownloads)。瀏覽器遇到JS時，必須等JS下載，解析，執(zhí)行完后，才能繼續(xù)并行下載下一個資源。原因是JS可能會改變頁面或改變JS間的依賴關系，例如A.js中用document.writ
2、e改變頁面，B.js依賴于A.js。因此要嚴格保證順序，不能并行下載。因此不推薦將JS放到標簽里，你可以點擊例子頁面試一下。瀏覽器遇到標簽會下載，解析，執(zhí)行完腳本后，才繼續(xù)處理剩余的頁面部分。而且瀏覽器在遇到標簽前是不會渲染頁面的，因此例子中處理JS用了2s，頁面會白屏2s。為了避免白屏，通常的建議是將JS放到標簽底下，可以有最佳的用戶體驗，你可以點擊例子頁面試一下。如果你放到了標簽的上部，因為腳本阻塞，可能會影響用戶體驗。例子中位于上
3、部的JS耗時2s，因此位于JS下面的兩張img圖片，會等2s后才開始加載。將JS放在底下的建議沒有錯，幾乎成了前端的普世規(guī)則。但對于追求極致用戶體驗的站點，或大型網站來說，這還不夠。雖然JS腳本由于存在的依賴關系，需要按順序執(zhí)行，但并不需要按順序下載。本篇就介紹一下讓JS與其他組件并行下載的方法，即異步處理腳本。異步處理外部腳本：(按推薦度從高到低排列)DynamicElementasyncdeferXHREvalXHRInjectin
4、iframe如果實在不方便將有依賴關系的文件合并。你需要自己指定先后順序，通過監(jiān)聽load事件(IE是onreadystatechange)來確保依次加載腳本：functionload(urlcallback)var=document.createElement(““).type=“textjavript“if(.readyState)IE.onreadystatechange=function()if(.readyState==“l(fā)o
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 眾賞文庫僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
評論
0/150
提交評論