異步加載script,提升前端性能(defer和async屬性的區別)

時間 2019-12-20

標籤異步加載 script 提升前端性能 defer async 屬性區別欄目系統性能简体版

原文原文鏈接

1、異步加載script的好處

爲了加快首屏響應速度,前端會採用代碼切割、按需加載等方式優化性能。異步加載script也是一種前端優化的手段。html

就比如若是個人頁面其中一個功能須要打開地圖,可是地圖的js插件包是很是大的,而若是用戶不用地圖功能的時候,咱們固然不能再給它加載js地圖包,白白讓他多花等待時間豈不是很冤枉!因而咱們能夠動態插入script,當用戶點擊了某個按鈕的時候,再新建script標籤,引入地圖js資源。前端

下面介紹下異步加載script的幾種方式。ajax

2、異步加載script的方式

1. 異步加載JS

getMap.onclick = function(){
        //得到須要插入的位置
        var oDiv = document.getElementById('div');
        //異步建立script
        var script = document.createElement('script');
        
        script.src = 'https://map.baidu.com/...'
        
        oDiv.appendChild(script);
    }

2. script標籤加上defer或async

script標籤存在兩個屬性，defer和async，加上兩個屬性以後,在js真正執行以前都不會阻止html的加載。所以script標籤的使用分爲三種狀況：瀏覽器

沒有defer或async屬性，瀏覽器會當即加載並執行相應的腳本。也就是說在渲染script標籤以後的文檔以前，不等待後續加載的文檔元素，讀到就開始加載和執行，此舉會阻塞後續文檔的加載；

<script src="example.js"></script>

有了async屬性，表示後續文檔的加載和渲染與js腳本的加載和執行是並行進行的，即異步執行；

<script async src="example.js"></script>

有了defer屬性，加載後續文檔的過程和js腳本的加載(此時僅加載不執行)是並行進行的(異步)，js腳本的執行須要等到文檔全部元素解析完成以後，DOMContentLoaded事件觸發執行以前。

<script defer src="example.js"></script>

下圖能夠直觀的看出三者之間的區別:

其中藍色表明js腳本網絡加載時間，紅色表明js腳本執行時間，綠色表明html解析。網絡

從圖中咱們能夠明確一下幾點：app

　　1.defer和async在網絡加載過程是一致的，都是異步執行的；前端優化

　　2.二者的區別在於腳本加載完成以後什麼時候執行，能夠看出defer更符合大多數場景對應用腳本加載和執行的要求；異步

　　3.若是存在多個有defer屬性的腳本，那麼它們是按照加載順序執行腳本的；而對於async，它的加載和執行是牢牢挨着的，不管聲明順序如何，只要加載完成就馬上執行，它對於應用腳本用處不大，由於它徹底不考慮依賴。async

轉載於:https://www.cnblogs.com/neusc/archive/2016/08/12/5764162.html函數

3. 經過 ajax 去獲取 js 代碼，而後經過 eval 執行

window.onload = function(){
    //1.建立XMLHttpRequest對象並考慮兼容性
    var xhr;
    if(window.XMLHttpRequest){
        //通用瀏覽器
        xhr = new XMLHttpRequest();
    }
    else{
        //IE5/6
        xhr = new ActiveXObject('Miscrosoft.XMLHttp')
    }
    
    //2.設置請求方式
    let url = '';
    xhr.open('get', url, true);//異步請求
    
    //3.發送請求
    xhr.send();
    
    //4.回調函數
    xhr.onreadyStateChange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            let script = xhr.responseText;
            eval(script);   //異步加載script
        }
    }
}

4. 建立並插入 iframe，讓它異步執行 js

var iframe = document.createElement('iframe'); 
 document.body.appendChild(iframe); 
 var doc = iframe.contentWindow.document; 
 doc.open().write('<body onload="insertJS()">'); 
 doc.close();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。