淺談script中的defer與async

一直沒有在script上使用過別的屬性，今天看基礎代碼才發現這個，搜索、記錄下，以便記憶。

你們都知道，js加載會形成阻塞，阻礙頁面的繼續渲染。

defer:

js與頁面同步加載，不阻礙頁面渲染，會在頁面渲染完成後執行js。

async:

js與頁面同步加載，不會阻礙頁面的渲染，但在js加載完成後會當即執行，這時會形成阻塞，知道js執行完成繼續渲染頁面。

下圖來自網絡，能夠很好的說明這兩個的區別：

藍色線表明網絡讀取，紅色線表明執行時間，這倆都是針對腳本的，綠色線表明 HTML 解析。