JavaScript在瀏覽器中加載的方法

這篇文章給大家分享的是有關(guān)JavaScript在瀏覽器中加載的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

加載過程

（1）解析 web 頁面也就是解析 HTML 元素和他們的文本內(nèi)容，將對像和文本添加到文檔中，document處于加載中

文檔解析

（2）通過link引入 外部 css，創(chuàng)建線程，進(jìn)行異步加載。

（3）通過 script 引入外部 js，并且沒有設(shè)置 async、defer，瀏覽器同步加載，并阻塞等

（4）等待js加載后為其設(shè)置有async、defer，瀏覽器創(chuàng)建線程異步加載，其中 async在腳本加載完成后立即執(zhí)行（注意 ：異步加載應(yīng)禁止使用 document.write()）

（5）遇到 img 等帶有 src的屬性，應(yīng)該先正常解析 dom 結(jié)構(gòu)，然后瀏覽器異步加載 src，并繼續(xù)解析文檔，如果 看到標(biāo)簽就直接生產(chǎn) dom 樹，不需要等著 img 加載完 scr。

（6）文檔解析完成后，所有設(shè)置有 defer 的腳本會(huì)按照順序執(zhí)行。（注意與 async 的不同，但同樣禁止使用 document.write()）;

（7）document 對象觸發(fā) DOMContentLoaded 事件，這也標(biāo)志著程序執(zhí)行從同步腳本執(zhí)行階段，轉(zhuǎn)化為事件驅(qū)動(dòng)階段。

（8）當(dāng)所有 async 的腳本加載完成并執(zhí)行后、img 等加載完成后（頁面所有的都執(zhí)行加載完之后），document.readyState = 'complete'，window 對象觸發(fā) load 事件。

（9）從此，以異步響應(yīng)方式處理用戶輸入、網(wǎng)絡(luò)事件等

注意

我們在寫程序的時(shí)候最好將script標(biāo)簽寫在下面，雖然寫在上面不僅可以操作div，又可以在dom解析完就立刻處理，這樣使效率更高，但是最好還是寫在最下面

<div style="width:100px;height:100px;background: pink;">
<script>
var div=document.getElementsByTagName("div")[0]
div.onclick=function(){
this.style.background="hotpink";
}
</script>

感謝各位的閱讀！關(guān)于JavaScript在瀏覽器中加載的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！