實作高效能JavaScript之執行與載入_基礎知識-js教程-PHP中文網

瀏覽器在處理HTML頁面渲染和JavaScript腳本執行的時候是單一進程的,所以在當瀏覽器在渲染HTML遇到了 標籤會先去執行標籤內的程式碼(如果是使用src屬性加載的外鏈檔,則先下載再執行),在這個過程中,頁面渲染和互動都會被阻塞。

...雖然會有阻塞,但還是有幾招可以減少JavaScript對效能的影響的。

1.script標籤的位置

當 出現在 中的時候,例如:

登入後複製 這種載入多個js檔案的時候,瀏覽器就會因先下載執行js程式碼而阻塞頁面渲染從而出現白螢幕頁面(瀏覽器解析到 標籤之前,不會渲染頁面任何內容) ,沒辦法預覽也沒辦法互動,很差勁的使用者體驗。

注意:

現代瀏覽器支援資源並行下載,只限於 下載外部資源的時候不會阻塞其他 標籤,但會阻塞其他資源的下載。 下載JavaScript資源是異步的,但是執行JavaScript程式碼的時候仍是同步的,同樣會造成阻塞。 所以把 後置到 標籤的底部,保證執行腳本之前已完成頁面渲染,是一種比較常用的JavaScript優化手段。

2.合併多個script標籤

瀏覽器解析HTML時遇到 都會因為執行腳本而有一定的延遲,對於有src屬性的外鏈則 更加,多HTTP請求則會帶來更多的性能開銷,盡量減少這種延遲,也是一種優化手段,可以合併多個js檔案來減少HTTP請求的次數,減少三次握手的次數和多餘的HTTP頭傳輸,降低響應時間提高用戶體驗。網路上有許多合併js的方案以及工具,在這不敘述了。

3.使用無阻塞下載JavaScript的方法

使用script標籤的defer和async屬性 使用動態建立的script標籤來下載執行JavaScript程式碼 使用XHR物件下載JavaScript程式碼並注入頁面 3.1.使用script標籤的defer和async屬性

async和defer屬性都是用於非同步載入js檔案,期間不會才生阻塞瀏覽器其他進程,區別在於async是載入完之後自動執行,而defer需要等到頁面載入之後再執行,需要注意的一點是這兩個屬性必須在有src屬性的 標籤中(外鏈腳本)才有效。下面是demo:

defer example alert("script"); window.onload= function(){ alert("load"); } defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo

登入後複製 //defer.js的檔案下只有alert("defer");一行程式碼 async的例子也是相同的頁面結構,這裡就不擺例子了,可以戳下面的連結。 defer example的連結戳這裡! async example的連結戳這裡!

雖然頁面結構一樣,但不一樣的是

開啟defer.html依序看到是: 彈出"script"的alert框=>頁面渲染出文字=>彈出"defer"的alert框=>彈出"load"的alert框 開啟async.html依序看到是: 彈出"script"的alert框=>彈出"async"的alert框=>頁面渲染出文字=>彈出"load"的alert框

3.2.使用動態建立的script標籤來下載執行JavaScript程式碼

var script = document.createElement("script"); script.type = "text/javascript"; script.src = "file.js"; document.getElementByTagName("head")[0].appendChild(script); 登入後複製 file.js在script元素加入到頁面時就啟動下載,使用這種方式的優勢在於file.js的下載和執行不會阻塞頁面其他進程。

從demo上可以明顯的看出動態載入方式可以在alert框彈出之前先看到頁面上的文字,但是普通的方式只有在alert框彈出之後才可以看到頁面上的文字。

我們可以封裝一個跨瀏覽器的讀取script腳本並動態建立script標籤的函數:

3.3.使用XHR物件下載JavaScript程式碼並注入頁面

另一個無阻塞載入腳本的方式是使用XMLHttpRequest(XHR)物件取得腳本並注入頁面中。 這種技術會先建立一個XHR物件,然後用他下載JavaScript檔案,最後透過常見動態 元素將程式碼注入頁面中。

登入後複製 以上代码发送GET请求file.js文件,onReadyStateChange检测readyState是否为4(4表示请求完成)和HTTP状态吗是否有效(200表示有效响应,304表示读取缓存)。判断响应有效之后,就动态创建一个 标签,内容就是服务器接收到的responseText。

这种方法的优点以及缺点:

优点:下载JavaScript代码可以不立即执行,且兼容性好适合所有主流浏览器。 缺点:JavaScript文件必须与所请求页面处于同一个域,这种情况下JavaScript文件不能从CDN下载,不适合大型的Web应用。

4.一种推荐的无阻塞方案

如果页面有大量的JavaScript代码需要添加,可以先在页面中去外链之前我们封装好的动态读取script脚本的函数loadScript,然后再使用它去加载其他所需脚本,例如:

loadScript("file.js",function(){ //do something }); 登入後複製 这样只需在第一个 下载比较精简的loader.js文件时对页面有些许影响,之后的 并不会有太多影响。