高性能JavaScript學習筆記-執行與加載

時間 2019-12-06

標籤高性能 javascript 學習筆記執行加載欄目 JavaScript 简体版

原文原文鏈接

瀏覽器在處理HTML頁面渲染和JavaScript腳本執行的時候是單一進程的,因此在當瀏覽器在渲染HTML遇到了<script>標籤會先去執行標籤內的代碼(若是是使用src屬性加載的外鏈文件,則先下載再執行),在這個過程當中,頁面渲染和交互都會被阻塞。javascript

...雖然會有阻塞,但仍是有幾招能夠減小JavaScript對性能的影響的。html

1.script標籤的位置

當<script>出如今<head>中的時候,好比:java

<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代碼的時候還是同步的,一樣會形成阻塞。app

因此把<script>後置到<body>標籤的底部,保證執行腳本以前已完成頁面渲染,是一種比較經常使用的JavaScript優化手段。異步

2.合併多個script標籤

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

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

使用script標籤的defer和async屬性函數
使用動態建立的script標籤來下載執行JavaScript代碼
使用XHR對象下載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,file.js中僅僅是一個10000次的for循環和以後彈出一個alert框的幾句代碼。
動態添加script元素的Demo連接戳這裏!
普通的引入script腳本Demo連接戳這裏!
從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);
        }
    }
}

Demo在這兒!快讓我到碗裏去!
以上代碼發送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>並不會有太多影響。