:腳本元素 | 您所在的位置:網(wǎng)站首頁(yè) › 屬鼠買(mǎi)樓買(mǎi)幾層比較好 › :腳本元素 |
下面這些示例說(shuō)明了如何使用 元素來(lái)導(dǎo)入(外部)腳本。 html以下示例展示了如何向 元素內(nèi)放入(內(nèi)聯(lián))腳本。 html alert("Hello World!"); async 和 defer使用了 async 屬性加載的腳本不會(huì)在下載時(shí)阻塞頁(yè)面。這意味著在腳本執(zhí)行完成之前,將無(wú)法為用戶(hù)處理和渲染網(wǎng)頁(yè)上的其余內(nèi)容。無(wú)法保證腳本的運(yùn)行次序。當(dāng)頁(yè)面的腳本之間彼此獨(dú)立,且不依賴(lài)于本頁(yè)面的其他任何腳本時(shí),async 是最理想的選擇。 使用 defer 屬性加載的腳本將按照它們?cè)陧?yè)面上出現(xiàn)的順序加載。在頁(yè)面內(nèi)容全部加載完畢之前,腳本不會(huì)運(yùn)行,如果腳本依賴(lài)于 DOM 的存在(例如,腳本修改了頁(yè)面上的一個(gè)或多個(gè)元素),這一點(diǎn)非常有用。 以下是不同腳本加載方法的可視化表示,以及這對(duì)頁(yè)面意味著什么: 該圖片來(lái)自 HTML 規(guī)范,經(jīng)過(guò)了復(fù)制和裁剪,以 CC BY 4.0 獲得授權(quán)。 比如,如果你的頁(yè)面要加載以下三個(gè)腳本: html你不能依賴(lài)腳本的加載順序。jquery.js 可能在 script2 和 script3 之前或之后調(diào)用,如果這樣,后兩個(gè)腳本中依賴(lài) jquery 的函數(shù)將產(chǎn)生錯(cuò)誤,因?yàn)槟_本運(yùn)行時(shí) jquery 尚未加載。 async 應(yīng)該在有大量后臺(tái)腳本需要加載,并且只想盡快加載到位的情況下使用。例如,你可能需要加載一些游戲數(shù)據(jù)文件,這在游戲真正開(kāi)始時(shí)是需要的,但現(xiàn)在你只想顯示游戲介紹、標(biāo)題和大廳,而不想被腳本加載阻塞。 解決這一問(wèn)題可使用 defer 屬性,在腳本和內(nèi)容下載后,腳本將按照在頁(yè)面中出現(xiàn)的順序加載和運(yùn)行: html在第二個(gè)示例中,我們可以確保 jquery.js 必定在 script2.js 和 script3.js 之前加載,同時(shí) script2.js 必定在 script3.js 之前加載。在頁(yè)面內(nèi)容全部加載完成之前,它們不會(huì)運(yùn)行,如果你的腳本依賴(lài)于 DOM(例如,它們修改了頁(yè)面上的一個(gè)或多個(gè)元素),這將非常有用。 小結(jié): async 和 defer 都指示瀏覽器在頁(yè)面的其他部分(DOM 等)正在下載時(shí),在一個(gè)單獨(dú)的線程中下載腳本,因此在獲取過(guò)程中頁(yè)面加載不會(huì)被阻塞。 帶有 async 屬性的腳本將在下載完成后立即執(zhí)行。這將阻塞頁(yè)面,并不保證任何特定的執(zhí)行順序。 帶有 defer 屬性的腳本將按照它們的順序加載,并且只有在所有腳本加載完畢后才會(huì)執(zhí)行。 如果腳本應(yīng)該立刻運(yùn)行且沒(méi)有任何依賴(lài),那么應(yīng)使用 async。 如果腳本需要等待頁(yè)面解析,且依賴(lài)于其他腳本或 DOM,請(qǐng)使用 defer 加載腳本,并將關(guān)聯(lián)的腳本按你想要瀏覽器加載它們的順序置于相應(yīng) 元素中。 |
CopyRight 2018-2019 實(shí)驗(yàn)室設(shè)備網(wǎng) 版權(quán)所有 |