徹底弄懂＜script＞標(biāo)簽

文章目錄

一、script標(biāo)簽特性

二、script特性驗(yàn)證

三、script標(biāo)簽優(yōu)化

script標(biāo)簽主要用于從服務(wù)器端加載一段javascript腳本并在當(dāng)前頁(yè)面中執(zhí)行。因?yàn)槠湫枰獜姆?wù)器端中加載，所以會(huì)在一定程度上影響到web的性能。在性能優(yōu)化中，script標(biāo)簽的優(yōu)化至關(guān)重要。

①?script標(biāo)簽?zāi)J(rèn)是同步加載的。當(dāng)HTML頁(yè)面在加載的過程中，遇到了一個(gè)script標(biāo)簽，就會(huì)中斷HTML頁(yè)面的加載，然后根據(jù)對(duì)應(yīng)的src地址向服務(wù)器發(fā)起請(qǐng)求，當(dāng)對(duì)應(yīng)的javascript腳本加載完成后，HTML頁(yè)面仍然不能加載，還必須等加載的javascript腳本執(zhí)行完成后，HTML頁(yè)面才能繼續(xù)往下加載。

②?當(dāng)遇到script標(biāo)簽的時(shí)候會(huì)立即渲染一次。當(dāng)HTML頁(yè)面加載的過程中，遇到了一個(gè)script標(biāo)簽，如果之前已經(jīng)加載了部分HTML內(nèi)容，那么會(huì)先將之前加載的HTML內(nèi)容渲染出來，然后再去加載對(duì)應(yīng)的javascript腳本。

① 驗(yàn)證特性1，我們通過服務(wù)器設(shè)置一個(gè)請(qǐng)求，這個(gè)請(qǐng)求需要等待5秒后返回，來模擬延長(zhǎng)javascript的加載時(shí)間。

當(dāng)我們?cè)L問該頁(yè)面的時(shí)候，在頁(yè)面加載過程中，頁(yè)面首先遇到了一個(gè)script標(biāo)簽，并去加載服務(wù)器http://localhost:8080/test返回的腳本，由于該腳本需要5秒后返回，所以我們可以看到頁(yè)面白屏了5秒后，執(zhí)行了加載的腳本，然后再才顯示頁(yè)面內(nèi)容hello script 0。 說明頁(yè)面加載過程中，如果遇到了script標(biāo)簽，那么會(huì)中斷頁(yè)面的加載，必須等待對(duì)應(yīng)的javascript的腳本加載并執(zhí)行完成后才會(huì)繼續(xù)頁(yè)面加載。

② 驗(yàn)證特性2，我們修改一下script標(biāo)簽的順序，將script標(biāo)簽放到hello script 0后面**。

當(dāng)我們?cè)L問該頁(yè)面的時(shí)候，在頁(yè)面加載過程中，頁(yè)面首先遇到了一個(gè)h1標(biāo)簽，然后才遇到了一個(gè)script標(biāo)簽，同樣會(huì)去加載服務(wù)器http://localhost:8080/test返回的腳本，同樣該腳本也需要5秒后返回，但是這次我們可以看到頁(yè)面中首先出現(xiàn)了hello script 0內(nèi)容，等待5秒白屏后，腳本加載完成并執(zhí)行腳本輸出結(jié)果，接著繼續(xù)渲染HTML頁(yè)面，顯示hello script 1內(nèi)容。 說明，頁(yè)面加載過程中，如果遇到了script標(biāo)簽，那么會(huì)將之前已經(jīng)解析的HTML內(nèi)容先渲染出來，然后再去服務(wù)器加載對(duì)應(yīng)的javascript。所以我們通常需要將script標(biāo)簽放到body標(biāo)簽之后，以便盡早的展現(xiàn)HTML內(nèi)容。

script標(biāo)簽?zāi)J(rèn)是同步加載的，但是其提供了一些屬性可以變成異步加載，如:?async、defer、type=“module”。

①?async: 異步加載對(duì)應(yīng)的javascript腳本，不阻塞HTML頁(yè)面的渲染，當(dāng)對(duì)應(yīng)的javascript加載完成后，如果此時(shí)HTML頁(yè)面還未加載完成，那么會(huì)阻塞頁(yè)面的渲染，等javascript執(zhí)行完成后再繼續(xù)HTML頁(yè)面的加載。

②?defer: 異步加載對(duì)應(yīng)的javascript腳本，不阻塞HTML頁(yè)面的渲染，當(dāng)對(duì)應(yīng)的javascript加載完成后，如果此時(shí)HTML頁(yè)面還未加載完成，那么不會(huì)阻塞頁(yè)面的渲染，等HTML頁(yè)面加載完成后再接著執(zhí)行加載完成的javascript腳本。

③?type=“module”: 也是能起到異步加載的效果，效果同defer，不過其可以配合async屬性讓javascript加載完成后立即執(zhí)行。

當(dāng)我們?cè)L問該頁(yè)面的時(shí)候，在頁(yè)面加載過程中，頁(yè)面首先遇到了一個(gè)帶async屬性的script標(biāo)簽，此時(shí)會(huì)立即去加載test腳本，不阻塞頁(yè)面的加載，繼續(xù)加載HTML內(nèi)容，然后又遇到了一個(gè)同步加載的script標(biāo)簽，然后去加載deferHTML腳本，阻塞頁(yè)面的加載，阻塞時(shí)間為8秒，而5秒后test腳本加載完成，此時(shí)會(huì)立即執(zhí)行該腳本，該腳本執(zhí)行會(huì)輸出當(dāng)前已加載h1標(biāo)簽的個(gè)數(shù)，從輸出結(jié)果可以看到為0。所以我們可以看出，async是異步加載腳本，并且會(huì)在腳本加載完成后立即執(zhí)行。

當(dāng)我們?cè)L問該頁(yè)面的時(shí)候，在頁(yè)面加載過程中，頁(yè)面首先遇到了一個(gè)帶defer屬性的script標(biāo)簽，此時(shí)會(huì)立即去加載test腳本，不阻塞頁(yè)面的加載，繼續(xù)加載HTML內(nèi)容，然后又遇到了一個(gè)同步加載的script標(biāo)簽，然后去加載deferHTML腳本，阻塞頁(yè)面的加載，阻塞時(shí)間為8秒，而5秒后test腳本加載完成，此時(shí)不會(huì)立即執(zhí)行該腳本，8秒后deferHTML腳本加載完成，繼續(xù)加載HTML頁(yè)面，當(dāng)HTML頁(yè)面加載完成后，test腳本才會(huì)開始執(zhí)行，輸出當(dāng)前已加載h1標(biāo)簽的個(gè)數(shù)，從輸出結(jié)果可以看到為1。所以我們可以看出，defer是異步加載腳本，并且會(huì)在HTML加載完成后再執(zhí)行。