js延遲加載的方式有哪些？
js的延遲加載有助于提高頁面的加載速度
script標簽
1.defer屬性
<scriptsrc="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事件統計。
asyncscript是有可能在DOMContentLoaded事件之前就執行的
link標簽
rel屬性值：preload
<linkrel="preload"href="main.js"as="script">
<link>元素的rel屬性的屬性值preload能夠讓你在你的HTML頁面中<head>元素內部書寫一些聲明式的資源獲取請求，可以指明哪些資源是在頁面加載完成后即刻需要的。對于這種即刻需要的資源，你可能希望在頁面加載的生命周期的早期階段就開始獲取，在瀏覽器的主渲染機制介入前就進行預加載。這一機制使得資源可以更早的得到加載并可用，且更不易阻塞頁面的初步渲染，進而提升性能。
預加載的好處可以更清晰直觀的得到展示，在隨后的渲染過程中，這些資源得到有效使用。對于更大的文件來說，也是如此。
rel屬性值：prefetch
<linkrel="prefetch">已經被許多瀏覽器支持了相當長的時間，但它是意圖預獲取一些資源，以備下一個導航/頁面使用（比如，當你去到下一個頁面時）。這很好，但對當前的頁面并沒有什么助益。此外，瀏覽器會給使用prefetch的資源一個相對較低的優先級——與使用preload的資源相比。畢竟，當前的頁面比下一個頁面相對更加重要
動態創建script
我們可以在一些頁面回調（例如window.onload）或者聲明周期動態創建script標簽，并添加到頁面以達到異步的效果。
把script腳本放到頁面最后
把script腳本放到頁面最后不會阻塞頁面渲染。