JavaScript在瀏覽器中如何載入

JavaScript在瀏覽器中的載入方法：1​​、解析web頁面；2、透過link引入外部css；3、透過script引入外部js；4、建立執行緒非同步載入；5、繼續解析文件； 6、依照順序執行defer的腳本；7、轉換為事件驅動階段等等。

本文操作環境：Windows7系統、Dell G3電腦、javascript1.8.5版。

今天將和大家分享關於JavaScript中加載的過程，有一定的參考價值，希望對大家有所幫助

JavaScript加載是從他開始那一刻一直到瀏覽器按照事情順序完成所有的事為止，大概步驟可以分為建立document 物件==>文檔解析完成==>文檔載入完並執行完，接下來在文章中將和大家詳細介紹。

載入過程

（1）解析web 頁面也就是解析HTML 元素和他們的文字內容，將物件和文字加入文件中，document處於載入中

文件解析

（2）透過link引入外部css，建立線程，進行非同步載入。

（3）透過script 引入外部js，並且沒有設定async、defer，瀏覽器同步加載，並阻塞等

（4）等待js加載後為其設定為async、defer ，瀏覽器建立線程異步加載，其中 async在腳本加載完成後立即執行（注意 ：異步加載應禁止使用document.write()）

（5）遇到img 等帶有src的屬性，應該先正常解析dom 結構，然後瀏覽器非同步載入src，並繼續解析文檔，如果看到標籤就直接生產dom 樹，不需要等著img 載入完scr。

（6）文件解析完成後，所有設定有 defer 的腳本會依照順序執行。 （注意與async 的不同，但同樣禁止使用document.write()）;

（7）document 物件觸發DOMContentLoaded 事件，這也標誌著程式執行從同步腳本執行階段，轉換為事件驅動階段。

（8）當所有 async 的腳本載入完成並執行後、img 等載入完成後（頁面所有的都執行載入完之後），document.readyState = 'complete'，window 物件觸發 load 事件。

（9）從此，以非同步回應方式處理使用者輸入、網路事件等

#注意

我們在寫程式的時候最好將script標籤寫在下面，雖然寫在上面不僅可以操作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>

#總結：以上就是這篇文章的全部內容了，希望透過這篇文章讓大家對JavaScript的載入有一定的了解。

以上是JavaScript在瀏覽器中如何載入的詳細內容。更多資訊請關注PHP中文網其他相關文章！