js延遲載入的方式有哪些？
js的延遲載入有助於提高頁面的載入速度
1.defer屬性
<script src="file.js" defer> </script>
如果script標籤設定了該屬性，則瀏覽器會非同步的下載該檔案並且不會影響到後續DOM的渲染；如果有多個設定了defer的script標籤存在，則會按照順序執行所有的script；defer指令碼會在文件渲染完畢後，DOMContentLoaded事件呼叫前執行。
文件解析時，遇到設定了defer的指令碼，就會在後臺進行下載，但是並不會阻止文件的渲染，當頁面解析渲染完畢後。會等到所有的defer指令碼載入完畢並按照順序執行，執行完畢後會觸發DOMContentLoaded事件。
2.async屬性
async的設定，會使得script指令碼非同步的載入並在允許的情況下執行async的執行，並不會按著script在頁面中的順序來執行，而是誰先載入完誰執行。
需要注意：DOMContentLoaded事件的觸發並不受async指令碼載入的影響，在指令碼載入完之前，就已經觸發了DOMContentLoaded。
async指令碼會在載入完畢後執行。async指令碼的載入不計入DOMContentLoaded事件統計。
async script是有可能在DOMContentLoaded事件之前就執行的
rel屬性值：preload
<link> 元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁面中 <head>元素內部書寫一些宣告式的資源獲取請求，可以指明哪些資源是在頁面載入完成後即刻需要的。對於這種即刻需要的資源，你可能希望在頁面載入的生命週期的早期階段就開始獲取，在瀏覽器的主渲染機制介入前就進行預載入。這一機制使得資源可以更早的得到載入並可用，且更不易阻塞頁面的初步渲染，進而提升效能。
預載入的好處可以更清晰直觀的得到展示，在隨後的渲染過程中，這些資源得到有效使用。對於更大的檔案來說，也是如此。
rel屬性值：prefetch
<link rel="prefetch"> 已經被許多瀏覽器支援了相當長的時間，但它是意圖預獲取一些資源，以備下一個導航/頁面使用（比如，當你去到下一個頁面時）。這很好，但對當前的頁面並沒有什麼助益。此外，瀏覽器會給使用prefetch的資源一個相對較低的優先順序——與使用preload的資源相比。畢竟，當前的頁面比下一個頁面相對更加重要
我們可以在一些頁面回撥（例如window.onload）或者宣告週期動態建立script 標籤，並新增到頁面以達到非同步的效果。
把script 指令碼放到頁面最後不會阻塞頁面渲染。
js延遲載入的方式有哪些？
js的延遲載入有助於提高頁面的載入速度
script 標籤1.defer屬性
<script src="file.js" defer> </script>
如果script標籤設定了該屬性，則瀏覽器會非同步的下載該檔案並且不會影響到後續DOM的渲染；如果有多個設定了defer的script標籤存在，則會按照順序執行所有的script；defer指令碼會在文件渲染完畢後，DOMContentLoaded事件呼叫前執行。
文件解析時，遇到設定了defer的指令碼，就會在後臺進行下載，但是並不會阻止文件的渲染，當頁面解析渲染完畢後。會等到所有的defer指令碼載入完畢並按照順序執行，執行完畢後會觸發DOMContentLoaded事件。
2.async屬性
async的設定，會使得script指令碼非同步的載入並在允許的情況下執行async的執行，並不會按著script在頁面中的順序來執行，而是誰先載入完誰執行。
需要注意：DOMContentLoaded事件的觸發並不受async指令碼載入的影響，在指令碼載入完之前，就已經觸發了DOMContentLoaded。
async指令碼會在載入完畢後執行。async指令碼的載入不計入DOMContentLoaded事件統計。
async script是有可能在DOMContentLoaded事件之前就執行的
link標籤rel屬性值：preload
<link> 元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁面中 <head>元素內部書寫一些宣告式的資源獲取請求，可以指明哪些資源是在頁面載入完成後即刻需要的。對於這種即刻需要的資源，你可能希望在頁面載入的生命週期的早期階段就開始獲取，在瀏覽器的主渲染機制介入前就進行預載入。這一機制使得資源可以更早的得到載入並可用，且更不易阻塞頁面的初步渲染，進而提升效能。
預載入的好處可以更清晰直觀的得到展示，在隨後的渲染過程中，這些資源得到有效使用。對於更大的檔案來說，也是如此。
rel屬性值：prefetch
<link rel="prefetch"> 已經被許多瀏覽器支援了相當長的時間，但它是意圖預獲取一些資源，以備下一個導航/頁面使用（比如，當你去到下一個頁面時）。這很好，但對當前的頁面並沒有什麼助益。此外，瀏覽器會給使用prefetch的資源一個相對較低的優先順序——與使用preload的資源相比。畢竟，當前的頁面比下一個頁面相對更加重要
動態建立script我們可以在一些頁面回撥（例如window.onload）或者宣告週期動態建立script 標籤，並新增到頁面以達到非同步的效果。
把script指令碼放到頁面最後把script 指令碼放到頁面最後不會阻塞頁面渲染。