首頁 > 開發者 > JavaScript
實現高效能JavaScript之執行與載入，高效能javascript
瀏覽器在處理HTML頁面渲染和JavaScript指令碼執行的時候是單一進程的,所以在當瀏覽器在渲染HTML遇到了<script>標籤會先去執列標籤內的代碼(如果是使用src屬性載入的外鏈檔案,則先下載再執行),在這個過程中,頁面渲染和互動都會被阻塞。
...雖然會有阻塞,但還是有幾招可以減少JavaScript對效能的影響的。
1.script標籤的位置
當<script>出現在<head>中的時候,比如:
<head> <script type="text/javascript" src="js1.js"></script> <script type="text/javascript" src="js2.js"></script> <script type="text/javascript" src="js3.js"></script></head>
這種載入多個js檔案的時候,瀏覽器就會因先下載執行js代碼而阻塞頁面渲染從而出現白屏頁面(瀏覽器解析到<body>標籤之前,不會渲染頁面任何內容),沒法預覽也沒法互動,很差勁的使用者體驗。
注意:
現代瀏覽器支援資源並行下載,只限於<script>下載外部資源的時候不會阻塞其他<script>標籤,但會阻塞其他資源的下載。
下載JavaScript資源是非同步,但是執行JavaScript代碼的時候仍是同步的,同樣會造成阻塞。
所以把<script>後置到<body>標籤的底部,保證執行指令碼之前已完成頁面渲染,是一種比較常用的JavaScript最佳化手段。
2.合并多個script標籤
瀏覽器解析HTML時遇到<script>都會因為執行指令碼而有一定的延遲,對於有src屬性的外鏈則<script>更加,多HTTP請求則會帶來更多的效能開銷,盡量減少這種延遲,也是一種最佳化手段,可以合并多個js檔案來減少HTTP請求的次數,減少三向交握的次數和多餘的HTTP頭傳輸,降低回應時間提高使用者體驗。網上有許多合并js的方案以及工具,在這不敘述了。
3.使用無阻塞下載JavaScript的方法
3.1.使用script標籤的defer和async屬性
async和defer屬性都是用於非同步載入js檔案,期間不會才生阻塞瀏覽器其他進程,區別在於async是載入完之後自動執行,而defer需要等到頁面載入之後再執行,需要注意的一點是這兩個屬性必須在有src屬性的<script>標籤中(外鏈指令碼)才有效。下面是demo:
<!DOCTYPE html><html><head> <title>defer example</title></head><body> <script type="text/javascript" src="defer.js" defer></script> <script> alert("script"); </script> <script> window.onload= function(){ alert("load"); } </script> <div class="demo">defer demo</div> <div class="demo">defer demo</div> <div class="demo">defer demo</div> <div class="demo">defer demo</div> <div class="demo">defer demo</div> <div class="demo">defer demo</div> <div class="demo">defer demo</div> <div class="demo">defer demo</div> <div class="demo">defer demo</div> <div class="demo">defer demo</div> <div class="demo">defer demo</div> <div class="demo">defer demo</div></body></html>
//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標籤的函數:
function loadScript(url,callback){ var script = document.createElement("script"); script.type = "text/javascript"; //檢測用戶端類型 if(script.readyState){//IE script.onreadystatechange = function(){ if(script.readyState==="loaded"||script.readyState==="complete"){ script.onreadystatechange = null; callback(); } } }else{//其他瀏覽器 script.onload = function(){ callback(); } } script.src = url; document.getElementsByTagName("head")[0].appendChild(script);}
這類動態載入指令碼的方法相容性好,也比較簡單,是一種常用的無阻塞解決方案。
3.3.使用XHR對象下載JavaScript代碼並注入頁面
另一種無阻塞載入指令碼的方式是使用XMLHttpRequest(XHR)對象擷取指令碼並注入頁面中。
這種技術會先建立一個XHR對象,然後用他下載JavaScript檔案,最後通過常見動態<script>元素將代碼注入頁面中。
var xhr = new XMLHttpRequest();xhr.open("get","file.js",true);xhr.onreadystatechange = function(){ if(xhr.readyState===4){ if(xhr.status>=200&&xhr.status<300||xhr.status==304){ var script = document.createElement("script"); script.type = "text/javascript"; script.text = xhr.responseText; document.body.appendChild(script); } }}
以上代碼發送GET請求file.js檔案,onReadyStateChange檢測readyState是否為4(4表示請求完成)和HTTP狀態嗎是否有效(200表示有效響應,304表示讀取緩衝)。判斷響應有效之後,就動態建立一個<script>標籤,內容就是伺服器接收到的responseText。
這種方法的優點以及缺點:
優點:下載JavaScript代碼可以不立即執行,且相容性好適合所有主流瀏覽器。
缺點:JavaScript檔案必須與所請求頁面處於同一個域,這種情況下JavaScript檔案不能從CDN下載,不適合大型的Web應用。
4.一種推薦的無阻塞方案
如果頁面有大量的JavaScript代碼需要添加,可以先在頁面中去外鏈之前我們封裝好的動態讀取script指令碼的函數loadScript,然後再使用它去載入其他所需指令碼,例如:
<script type="text/javascript" src="loader.js"></script><script type="text/javascript"> loadScript("file.js",function(){ //do something });</script>
這樣只需在第一個<script>下載比較精簡的loader.js檔案時對頁面有些許影響,之後的<script>並不會有太多影響。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
