2. 程式人生 > >defer和async的原理與區別

defer和async的原理與區別

阿新 • • 發佈：2019-02-16

上一篇剛轉載了一篇有關於網站效能優化的文章，其中提及到了頁面的載入和渲染的過程，提到了defer和async的相關區別，但是本人在此之前並沒有深究其中的區別。

defer和async是script標籤的兩個屬性，用於在不阻塞頁面文件解析的前提下，控制指令碼的下載和執行。
在介紹他們之前，我們有必要先了解一下頁面的載入和渲染過程：

  1. 列表內容
  2. 瀏覽器通過HTTP協議請求伺服器，獲取HMTL文件並開始從上到下解析，構建DOM；
  3. 在構建DOM過程中，如果遇到外聯的樣式宣告和指令碼宣告，則暫停文件解析，建立新的網路連線，並開始下載樣式檔案和指令碼檔案；
  4. 樣式檔案下載完成後，構建CSSDOM；指令碼檔案下載完成後，解釋並執行，然後繼續解析文件構建DOM
  5. 完成文件解析後，將DOM和CSSDOM進行關聯和對映，最後將檢視渲染到瀏覽器視窗

在這個過程中，指令碼檔案的下載和執行是與文件解析同步進行，也就是說，它會阻塞文件的解析，如果控制得不好，在使用者體驗上就會造成一定程度的影響。

所以我們需要清楚的瞭解和使用defer和async來控制外部指令碼的執行。

先來簡明概要的介紹一下下面三者的區別：

  1. <script src="script.js"></script>
    沒有 defer 或 async，瀏覽器會立即載入並執行指定的指令碼，“立即”指的是在渲染該 script 標籤之下的文件元素之前，也就是說不等待後續載入的文件元素，讀到就載入並執行。
  2. <script async src="script.js"></script>
    有 async，載入和渲染後續文件元素的過程將和 script.js 的載入與執行並行進行（非同步）
  3. <script defer src="myscript.js"></script>
    有 defer，載入後續文件元素的過程將和 script.js 的載入並行進行（非同步），但是 script.js 的執行要在所有元素解析完成之後，DOMContentLoaded 事件觸發之前完成。

接著，我們來看一張圖：
這裡寫圖片描述

藍色線代表網路讀取，紅色線代表執行時間，這倆都是針對指令碼的；綠色線代表 HTML 解析。

此圖告訴我們以下幾個要點：

  1. defer 和 async 在網路讀取（下載）這塊兒是一樣的，都是非同步的（相較於 HTML 解析）
  2. 它倆的差別在於指令碼下載完之後何時執行，顯然 defer 是最接近我們對於應用指令碼載入和執行的要求的
  3. 關於 defer，此圖未盡之處在於它是按照載入順序執行指令碼的，這一點要善加利用
  4. async 則是一個亂序執行的主，反正對它來說指令碼的載入和執行是緊緊挨著的，所以不管你宣告的順序如何，只要它載入完了就會立刻執行
  5. 仔細想想，async 對於應用指令碼的用處不大，因為它完全不考慮依賴（哪怕是最低階的順序執行），不過它對於那些可以不依賴任何指令碼或不被任何指令碼依賴的指令碼來說卻是非常合適的，最典型的例子：Google Analytics

為了演示指令碼的執行情況，進而介紹這兩個屬性的作用，我們先來搭建一個簡單的伺服器：
建立了一個簡易的Node伺服器server.js，其程式碼如下：

var http = require('http');
var fs = require('fs');

var typeMapping = {
    'html': 'text/html',
    'js'  : 'text/javascript',
    'css' : 'text/css',
    'ico' : 'image/x-icon'
};

var getResourceExtension = function(req) {
    var url = req.url;
    var lastIndexOfDot = url.lastIndexOf('.');

    if (lastIndexOfDot === -1) return 'text/plain';
    return url.substring(lastIndexOfDot + 1);
};

var respondResourceToClient = function(req, res) {
    //read the reource and respond via 'pipe'
    fs.createReadStream(req.url.replace(/^\//, '')).pipe(res);
};

var server = http.createServer(function(req, res) {

    console.log('requesting url: ', req.url);

    var extension = getResourceExtension(req);

    res.writeHead(200, {'Content-Type': typeMapping[extension]});

    var delay = function(time) {
        setTimeout(function() {
            respondResourceToClient(req, res);
        }, time || 0);
    };

    if (extension === 'html' || extension === 'css') {
        delay(0);
    } else if (extension === 'js') {
        delay(1000);
    } else {
        res.end('');
    }
});

server.listen(3000);

console.log('listening at port 3000...');

從上面的程式碼我們可以看出，當伺服器接收到請求之後，會判斷請求資源是否為JS，如果是則延遲1s後返回對應的資源。
啟動這個服務很簡單，只需執行node server.js即可，然後就可以在瀏覽器中輸入http://localhost:3000/app/index.html訪問主頁了
現在我們來看看index.html中的內容：

<!DOCTYPE html>
<html>
    <head>
        <title>defer & async</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script type="text/javascript" src="js/1.js"></script>
    </head>
    <body>
        <div class="text">Hello World</div>
        <script type="text/javascript" src="js/2.js"></script>
    </body>
</html>

在這個HTML文件中，我們先在head中引用了一個外部的指令碼檔案js/1.js，然後在我們要顯示的Hello World後面又引用了一個js/2.js，它們的內容都很簡單，就是彈出對應的標示資訊：

// js/1.js
alert(1);

// js/2.js
alert(2);

下面我們就來訪問主頁，看看會發生些什麼：
這裡寫圖片描述

從圖中可以看到，渲染的過程的確是自上而下，同步進行的，也就是說遇到外部的指令碼，就得暫停文件的解析，下載並且解釋執行，這種方式是阻塞的，會造成網頁空白的現象。

現在稍微修改一下程式碼，將head中的script標籤加上defer屬性，然後也稍微改動一下兩個JS檔案：

<!DOCTYPE html>
<html>
    <head>
        <title>defer & async</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <!-- adding a 'defer' attribute, by default, the value will be 'true' -->
        <script type="text/javascript" src="js/1.js" defer></script>
    </head>
    <body>
        <div class="text">Hello World</div>
        <script type="text/javascript" src="js/2.js"></script>
    </body>
</html>
// js/1.js
console.log(1);

// js/2.js
console.log(2);

再次訪問index.html，我們會在控制檯中看到下面的執行順序：
這裡寫圖片描述

顯而易見，1.js被延後致至文件解析完成後執行了，它的執行順序比body中的

<!DOCTYPE html>
<html>
    <head>
        <title>defer & async</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <!-- adding a 'defer' attribute, by default, the value will be 'true' -->
        <script type="text/javascript" src="js/1.js" defer></script>
        <script type="text/javascript" src="js/2.js" defer></script>
        <script type="text/javascript" defer>
            console.log(3);
        </script>
    </head>
    <body>
        <div class="text">Hello World</div>

        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function() {
                console.log('dom content loaded, ready state:', this.readyState);
            }, false);

            window.addEventListener('load', function() {
                console.log('window loaded, dom ready state:', document.readyState);
            }, false);
        </script>
    </body>
</html>

這裡寫圖片描述

可以看到，外聯的指令碼是按照宣告順序執行的，內聯指令碼並沒有遵守這個規則，另外，DOMContentLoaded和load事件依次被捕獲，DOM的狀態分別變為interactive和complete

接下來我們介紹一下async屬性，為了能夠很好的演示執行順序，我們還需要一些修改：

<!DOCTYPE html>
<html>
    <head>
        <title>defer & async</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <!-- adding a 'async' attribute, by default, the value is 'true' as well -->
        <script type="text/javascript" src="js/1.js" async></script>
        <script type="text/javascript" src="js/2.js" async></script>
        <script type="text/javascript" src="js/3.js" async></script>
    </head>
    <body>
        <div class="text">Hello World</div>
    </body>
</html>

JS檔案內如下：

// js/1.js
console.log(1);

// js/2.js
console.log(2);

// js/3.js
console.log(3);

再次訪問index.html，會發現控制檯列印如下：
這裡寫圖片描述

我們發現，3個指令碼的執行是沒有順序的，我們也無法預測每個指令碼的下載和執行的時間和順序。async和defer一樣，不會阻塞當前文件的解析，它會非同步地下載指令碼，但和defer不同的是，async會在指令碼下載完成後立即執行，如果專案中指令碼之間存在依賴關係，不推薦使用async。

關於async，也需要注意以下幾點：
1. 只適用於外聯指令碼，這一點和defer一致
2. 如果有多個聲明瞭async的指令碼，其下載和執行也是非同步的，不能確保彼此的先後順序
3. async會在load事件之前執行，但並不能確保與DOMContentLoaded的執行先後順序

以上就是defer和async的介紹，瞭解和掌握這兩個屬性的作用，不僅對JS程式碼執行的控制更加熟練，也會對頁面渲染多一分了解。

參考文章：

相關推薦

script標簽中defer和async屬性的區別

插入 asc sync 過程 並行 事件 需要 -1 事件觸發 　　向html頁面中插入javascript代碼的主要方法就是通過script標簽。其中包括兩種形式，第一種直接在script標簽之間插入js代碼，第二種即是通過src屬性引入外部js文件。由於解釋器在解析執行

script標籤中defer和async屬性的區別

script標籤存在兩個屬性，defer和async，因此script標籤的使用分為三種情況： 　　1.<script src="example.js"></script> 　　　沒有defer或async屬性，瀏覽器會立即載入並執行相應的指令碼。也就是說在渲染script標籤之後的文

defer和async的原理與區別

上一篇剛轉載了一篇有關於網站效能優化的文章，其中提及到了頁面的載入和渲染的過程，提到了defer和async的相關區別，但是本人在此之前並沒有深究其中的區別。 defer和async是script標籤的兩個屬性，用於在不阻塞頁面文件解析的前提下，控制指令碼的下

腳本引用中使用defer和async用法和區別

兩個 不依賴 doc 體驗 html 中文 htm 停止 其他 是的，就是在頁面腳本引用的時候設置defer或者async，為什麽會有這兩個屬相來輔助腳本加載那，因為瀏覽器在遇到script標簽的時候，文檔的解析會停止，不再構建document，有時打開一個網頁上會出現空

defer和async的區別

先來試個一句話解釋仨，當瀏覽器碰到 script 指令碼的時候： <script src="script.js"></script> 沒有 defer 或 async，瀏覽器會立即載入並執行指定的指令碼，“立即”指的是在渲染該 script 標籤

JavaScript 之 非同步載入 defer和async的區別

按照慣例，所有script元素都應該放在頁面的head元素中。這種做法的目的就是把所有外部檔案(CSS檔案和JavaScript檔案)的引用都放在相同的地方。可是，在文件的head元素中包含所有JavaScript檔案，意味著必須等到全部JavaScript

js中defer和async的區別

一般情況 按照慣例，所有script元素都應該放在頁面的head元素中。這種做法的目的就是把所有外部檔案(CSS檔案和JavaScript檔案)的引用都放在相同的地方。可是，在文件的head元素中包含所有JavaScript檔案，意味著必須等到全部JavaSc

defer=“defer”和async=“async”

指定 延遲 順序 def 們的 font 執行 nbsp bsp <script type="text/javascript" src="demo_defer.js" defer="defer"></script> 立即下載，但延遲執行。即腳本將在頁

jquery下的ajax和jsonp實現與區別

soc 分隔 分享 com 服務器 img input post npc json和jsonp和ajax的實質和區別ajax的兩個問題　　1.ajax以何種格式來交換數據　　2.跨域的需求如何解決　　　　數據跨域用自定義字符串或者用XML來描述　　　　跨域可以用服務器代理來

區分defer和async

def 腳本 text view 腳本文件 節日快樂 就是 html5 ext 今天要介紹的讓腳本延遲加載，讓腳本延遲加載的方式有多種，最簡單粗暴的方法就是將 <script> 標簽放在 <body> 標簽的最下面，這樣就可以按照先後順序依次執行了，

HashMapHashTableConcurrentHashMap的原理與區別

htable 分段 但是 最新 底層 RR 插入元素 擴容 volatil HashTable： 底層數組+鏈表，key與value都不能為null，線程安全，實現線程安全的方式是在修改數據時鎖住整個HashTable，效率低。 初始size為11，擴容：newsi

Javascript的defer和async

標簽 amp 還在 說我 亂序 dom scrip ont 遇到 寫在前面 　　作為前端小白，在開發過程中，h5頁面中加載js腳本，一般我們直接<script src="./index.js"></script>就加載完成了；最近在啃《JS高級》

HashMap、Hashtable、ConcurrentHashMap的原理與區別

另一個 cnblogs 需要 構造器 新的 底層 bsp 哈希 fas HashTable 底層數組+鏈表實現，無論key還是value都不能為null，線程安全，實現線程安全的方式是在修改數據時鎖住整個HashTable，效率低，ConcurrentHashMap做了相

script標籤defer和async的不同

參考：https://www.cnblogs.com/neusc/archive/2016/08/12/5764162.html點選開啟連結 　1.<script src="example.js"></script> 　　　沒有defer或async屬性，瀏覽器會

Java 覆寫和過載定義與區別 （面試題）

覆寫和過載 方法的覆蓋（Overriding）和過載（Overloading）是Java多型性的不同表現。覆蓋（也可以叫重寫，覆寫）是父類與子類之間多型性的一種表現，而過載是一個類中多型性的一種表現。 （一）覆寫： 1.方法的覆寫（****重點，Java核心） 定義：子類定義

@RequestMapping @ResponseBody 和 @RequestBody 用法與區別

[email protected] 國際慣例先介紹什麼是@RequestMapping，@RequestMapping 是一個用來處理請求地址對映的註解，可用於類或方法上。用於類上，表示類中的所有響應請求的方法都是以該地址作為父路徑；用於方法上，表示在類的父路徑下追加方法上註解中

Vue.mixin Vue.extend(Vue.component)的原理與區別

1.本文將講述 方法 Vue.extend Vue.mixin 與 new Vue({mixins:[], extend:{}})的區別與原理      先回顧一下 Vue.mixin 官網如下描述：      Vue.mixin( m

hashMap,hashTable,concurrentHashmap的區別 面試必備：HashMap、Hashtable、ConcurrentHashMap的原理與區別

轉自  面試必備：HashMap、Hashtable、ConcurrentHashMap的原理與區別 果你去面試，面試官不問你這個問題，你來找我^_^ 下面直接來乾貨，先說這三個Map的區別： HashTable 底層陣列+連結串列實現，無論key還是value都不能為null，執行

Hadoop和Spark聯絡與區別

轉自：https://blog.csdn.net/vaychen/article/details/83578527      博主講解很形象，建議hadoop,spark學完後在看一遍 談到大資料，相信大家對Hadoop和Apache Spark這兩個名字並不陌生。

面試必備：HashMap、Hashtable、ConcurrentHashMap的原理與區別

如果你去面試，面試官不問你這個問題，你來找我^_^ 下面直接來乾貨，先說這三個Map的區別： HashTable 底層陣列+連結串列實現，無論key還是value都不能為null，執行緒安全，實現執行緒安全的方式是在修改資料時鎖住整個HashTable，效率低，Conc