js 引入會(huì)加載整個(gè)文件嗎？會(huì)的，js是通過(guò)script標(biāo)簽引入的，分為同步和異步，同步會(huì)阻塞頁(yè)面加載，異步則不會(huì)js腳本怎么導(dǎo)入？js導(dǎo)入兩種1、傳統(tǒng)導(dǎo)入，在html中直接插入javascript，

js 引入會(huì)加載整個(gè)文件嗎？

會(huì)的，js是通過(guò)script標(biāo)簽引入的，分為同步和異步，同步會(huì)阻塞頁(yè)面加載，異步則不會(huì)

js腳本怎么導(dǎo)入？

js導(dǎo)入兩種

1、傳統(tǒng)導(dǎo)入，在html中直接插入javascript，導(dǎo)入時(shí)加注scripvt 標(biāo)簽。

2、模塊導(dǎo)入，可以將 JavaScript 寫入一個(gè)外部文件之中。然后以 .js 為后綴保存這個(gè)文件。在html中用scripvt src直接導(dǎo)入js文件實(shí)現(xiàn)。

怎么判斷js腳本加載完成？

由于HTML是解釋型語(yǔ)言，一般的DOM構(gòu)建順序是這樣子的：（html → head → title → #text(網(wǎng)頁(yè)標(biāo)題) → style → 加載樣式 → 解析樣式 → link → 加載外部樣式表文件 → 解析外部樣式表 → script → 加載外部腳本文件 → 解析外部腳本文件 → 執(zhí)行外部腳本 → body → div → script → 加載腳本 → 解析腳本 → 執(zhí)行腳本 → img → script → 加載腳本 → 解析腳本 → 執(zhí)行腳本 → 加載外部圖像文件 → 頁(yè)面初始化完畢）

js延遲加載的方式有哪些？

js延遲加載的有哪些？js的延遲加載有助于提高頁(yè)面的加載速度

script 標(biāo)簽屬性

ltscript srcfile.js defergt lt/scriptgt

如果script標(biāo)簽設(shè)置了該屬性，則瀏覽器會(huì)異步的下載該文件并且不會(huì)影響到后續(xù)DOM的渲染；

如果有多個(gè)設(shè)置了defer的script標(biāo)簽存在，則會(huì)按照順序執(zhí)行所有的script；

defer腳本會(huì)在文檔渲染完畢后，DOMContentLoaded事件調(diào)用前執(zhí)行。

文檔解析時(shí)，遇到設(shè)置了defer的腳本，就會(huì)在后臺(tái)進(jìn)行下載，但是并不會(huì)阻止文檔的渲染，當(dāng)頁(yè)面解析渲染完畢后。

會(huì)等到所有的defer腳本加載完畢并按照順序執(zhí)行，執(zhí)行完畢后會(huì)觸發(fā)DOMContentLoaded事件。

屬性

async的設(shè)置，會(huì)使得script腳本異步的加載并在允許的情況下執(zhí)行

async的執(zhí)行，并不會(huì)按著script在頁(yè)面中的順序來(lái)執(zhí)行，而是誰(shuí)先加載完誰(shuí)執(zhí)行。

需要注意：DOMContentLoaded事件的觸發(fā)并不受async腳本加載的影響，在腳本加載完之前，就已經(jīng)觸發(fā)了DOMContentLoaded。

async腳本會(huì)在加載完畢后執(zhí)行。

async腳本的加載不計(jì)入DOMContentLoaded事件統(tǒng)計(jì)。

async script是有可能在DOMContentLoaded事件之前就執(zhí)行的

link標(biāo)簽rel屬性值：preload

ltlink relpreload hrefmain.js asscriptgt

ltlinkgt 元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁(yè)面中 ltheadgt元素內(nèi)部書寫一些聲明式的資源獲取請(qǐng)求，可以指明哪些資源是在頁(yè)面加載完成后即刻需要的。對(duì)于這種即刻需要的資源，你可能希望在頁(yè)面加載的生命周期的早期階段就開始獲取，在瀏覽器的主渲染機(jī)制介入前就進(jìn)行預(yù)加載。這一機(jī)制使得資源可以更早的得到加載并可用，且更不易阻塞頁(yè)面的初步渲染，進(jìn)而提升性能。

預(yù)加載的好處可以更清晰直觀的得到展示，在隨后的渲染過(guò)程中，這些資源得到有效使用。對(duì)于更大的文件來(lái)說(shuō)，也是如此。

rel屬性值：prefetch

ltlink relprefetchgt 已經(jīng)被許多瀏覽器支持了相當(dāng)長(zhǎng)的時(shí)間，但它是意圖預(yù)獲取一些資源，以備下一個(gè)導(dǎo)航/頁(yè)面使用（比如，當(dāng)你去到下一個(gè)頁(yè)面時(shí)）。這很好，但對(duì)當(dāng)前的頁(yè)面并沒(méi)有什么助益。此外，瀏覽器會(huì)給使用prefetch的資源一個(gè)相對(duì)較低的優(yōu)先級(jí)——與使用preload的資源相比。畢竟，當(dāng)前的頁(yè)面比下一個(gè)頁(yè)面相對(duì)更加重要

動(dòng)態(tài)創(chuàng)建script我們可以在一些頁(yè)面回調(diào)（例如）或者聲明周期動(dòng)態(tài)創(chuàng)建script 標(biāo)簽，并添加到頁(yè)面以達(dá)到異步的效果。

把script腳本放到頁(yè)面最后把script 腳本放到頁(yè)面最后不會(huì)阻塞頁(yè)面渲染。