js延遲加載的方式有哪些？
js的延遲加載有助于提高頁面的加載速度
script標(biāo)簽
1.defer屬性
<scriptsrc="file.js"defer></script>
如果script標(biāo)簽設(shè)置了該屬性，則瀏覽器會異步的下載該文件并且不會影響到后續(xù)DOM的渲染；
如果有多個設(shè)置了defer的script標(biāo)簽存在，則會按照順序執(zhí)行所有的script；
defer腳本會在文檔渲染完畢后，DOMContentLoaded事件調(diào)用前執(zhí)行。
文檔解析時，遇到設(shè)置了defer的腳本，就會在后臺進(jìn)行下載，但是并不會阻止文檔的渲染，當(dāng)頁面解析渲染完畢后。
會等到所有的defer腳本加載完畢并按照順序執(zhí)行，執(zhí)行完畢后會觸發(fā)DOMContentLoaded事件。
2.async屬性
async的設(shè)置，會使得script腳本異步的加載并在允許的情況下執(zhí)行
async的執(zhí)行，并不會按著script在頁面中的順序來執(zhí)行，而是誰先加載完誰執(zhí)行。
需要注意：DOMContentLoaded事件的觸發(fā)并不受async腳本加載的影響，在腳本加載完之前，就已經(jīng)觸發(fā)了DOMContentLoaded。
async腳本會在加載完畢后執(zhí)行。
async腳本的加載不計(jì)入DOMContentLoaded事件統(tǒng)計(jì)。
asyncscript是有可能在DOMContentLoaded事件之前就執(zhí)行的
link標(biāo)簽
rel屬性值：preload
<linkrel="preload"href="main.js"as="script">
<link>元素的rel屬性的屬性值preload能夠讓你在你的HTML頁面中<head>元素內(nèi)部書寫一些聲明式的資源獲取請求，可以指明哪些資源是在頁面加載完成后即刻需要的。對于這種即刻需要的資源，你可能希望在頁面加載的生命周期的早期階段就開始獲取，在瀏覽器的主渲染機(jī)制介入前就進(jìn)行預(yù)加載。這一機(jī)制使得資源可以更早的得到加載并可用，且更不易阻塞頁面的初步渲染，進(jìn)而提升性能。
預(yù)加載的好處可以更清晰直觀的得到展示，在隨后的渲染過程中，這些資源得到有效使用。對于更大的文件來說，也是如此。
rel屬性值：prefetch
<linkrel="prefetch">已經(jīng)被許多瀏覽器支持了相當(dāng)長的時間，但它是意圖預(yù)獲取一些資源，以備下一個導(dǎo)航/頁面使用（比如，當(dāng)你去到下一個頁面時）。這很好，但對當(dāng)前的頁面并沒有什么助益。此外，瀏覽器會給使用prefetch的資源一個相對較低的優(yōu)先級——與使用preload的資源相比。畢竟，當(dāng)前的頁面比下一個頁面相對更加重要
動態(tài)創(chuàng)建script
我們可以在一些頁面回調(diào)（例如window.onload）或者聲明周期動態(tài)創(chuàng)建script標(biāo)簽，并添加到頁面以達(dá)到異步的效果。
把script腳本放到頁面最后
把script腳本放到頁面最后不會阻塞頁面渲染。