JavaScript 網頁執行原理 詳解
阿新 • • 發佈:2019-02-01
打卡一個網頁,瀏覽器會首先建立一個視窗,該視窗就是一個 window物件,就是 Javascript執行所依附的去全域性環境物件和全域性作用域物件。為載入網頁文件,當前視窗將為要開啟的網頁建立一個 document物件,然後將網頁載入到 document中,網頁就是在這個過程中一邊載入一邊呈現出來的
在一邊載入一邊呈現過程中,有 <script>標籤分割的每一段JavaScript程式碼都是嚴格按照文件中的順序來載入和執行的,對於那些<script>標籤引入的外部JS檔案,載入過程可能分派給多個執行緒去完成,但是瀏覽器會等待需要的JS檔案載入完成,最終還是會按照順序執行JavaScript程式碼的程式邏輯,之後在處理其它內容
進行載入和執行的目的是建立文件物件模型 (DOM) 主框架,而這個主框架是由當前文件視窗主執行緒離開處理,並依照嚴格順序進行,而網頁中可以非同步載入其他附屬資源,如 圖片、聲音和視訊等多媒體資料,是安排在其它執行緒去處理
Web標準 有一個限制,就是對同一個域名最多隻允許使用兩個連線來讀取內容,就是在同一個域名情況下只有兩個執行緒可以同時載入內容,其它的會處於等到狀態。因此,瀏覽器使用多少執行緒在同時載入網頁,要看網頁內容涉及多少域名,反正一個域名兩個連線,執行緒多了也會阻塞
當網頁主框架載入和執行完畢,瀏覽器才開始觸發 window物件或 body物件的 onload事件,在極少數情況下網頁要是沒有body物件瀏覽器會在網頁載入完後自動建立一個body物件,並將其設定為document的body屬性
設定window物件的onload事件 或 設定body物件的 onload事件,只有一個起作用
當網頁主框架載入完成,由此引發的事件也處理完畢,JavaScript就等待下一次執行的時間,當用戶的點選、網頁定時重新整理或者setTimeout 和 setinterval語句達到指定時間,JavaScript 執行引擎再次被啟動,以執行相應的JavaScript程式碼,因此可以認為 JavaScript總是被動執行的
當開啟或重新整理網頁時,頂層的 JavaScript程式碼被執行;設定的時間到達時,相關的JavaScript函式又被執行,網頁元素的事件又被執行,但一切寂靜下來之後,沒有任何JavaScript程式碼被執行
同一個瀏覽器程序中開啟多個頁面,多個視窗,裡面的 JavaScript程式碼都是由同一個執行緒來執行