在HTML中使用JS方法總結(jié)

前言

JavaScript是瀏覽器的內(nèi)置腳本語(yǔ)言。當(dāng)網(wǎng)頁(yè)中嵌入了JavaScript腳本，瀏覽器加載網(wǎng)頁(yè)時(shí)，就會(huì)執(zhí)行腳本，從而操作瀏覽器，實(shí)現(xiàn)各種動(dòng)態(tài)效果

JavaScript代碼嵌入網(wǎng)頁(yè)的方法

1、<script>元素直接嵌入代碼

<script type="text/javascript">
 function sayHello() {
 alert("hello!");
 }
</script>

2、<script>元素加載外部腳本

<script type="text/javascript" src="example.js"></script>

<script>標(biāo)簽相關(guān)屬性

type屬性

defer屬性

<script src="a.js" defer></script>
<script src="b.js" defer></script>

defer屬性的運(yùn)行流程：

1. 瀏覽器開(kāi)始解析HTML網(wǎng)頁(yè)

2. 解析過(guò)程中，發(fā)現(xiàn)帶有defer屬性的<script>元素

3. 瀏覽器繼續(xù)往下解析HTML網(wǎng)頁(yè)，同時(shí)并行下載<script>元素加載的外部腳本

4. 瀏覽器完成解析HTML網(wǎng)頁(yè)，此時(shí)再回過(guò)頭執(zhí)行已經(jīng)下載完成的腳本

需要注意：

async屬性

<script src="a.js" async></script>
<script src="b.js" async></script>

async屬性的運(yùn)行流程：

1. 瀏覽器開(kāi)始解析HTML網(wǎng)頁(yè)

2. 解析過(guò)程中，發(fā)現(xiàn)帶有async屬性的<script>標(biāo)簽

3. 瀏覽器繼續(xù)往下解析HTML網(wǎng)頁(yè)，同時(shí)并行下載<script>標(biāo)簽中的外部腳本

4. 腳本下載完成，瀏覽器暫停解析HTML網(wǎng)頁(yè)，開(kāi)始執(zhí)行下載的腳本

5. 腳本執(zhí)行完畢，瀏覽器恢復(fù)解析HTML網(wǎng)頁(yè)

需要注意：

async和defer屬性歸納

動(dòng)態(tài)生成腳本

['a.js', 'b.js'].forEach(function(src) {
 var script = document.createElement('script');
 script.src = src;
 script.async = false;
 document.head.appendChild(script);
});

相關(guān)知識(shí)點(diǎn)總結(jié)

1. 包含在<script>標(biāo)簽內(nèi)部的JavaScript代碼，將被從上到下一次解析

2. 無(wú)論以哪種方式嵌入代碼，只要不存在defer和async屬性，瀏覽器都會(huì)按照<Script>標(biāo)簽在頁(yè)面中出現(xiàn)的先后順序?qū)λ鼈冞M(jìn)行解析

3. 加載外部腳本的優(yōu)點(diǎn)：可維護(hù)性、可緩存、適應(yīng)未來(lái)

4. <script>放在底部的原因1、避免“阻塞效應(yīng)”。2、避免，在DOM結(jié)構(gòu)生成之前調(diào)用DOM節(jié)點(diǎn)，而產(chǎn)生錯(cuò)誤

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

怎樣處理MySQL數(shù)據(jù)庫(kù)拒絕訪問(wèn)

怎樣實(shí)現(xiàn)六邊形按鈕特效

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com