首頁 > web前端 > js教程 > 網頁如何執行:逐步分解?

網頁如何執行:逐步分解?

Patricia Arquette
發布: 2024-11-29 05:05:16
原創
104 人瀏覽過

How Does a Web Page Execute: A Step-by-Step Breakdown?

網頁的執行順序

收到網頁的回應後,瀏覽器啟動以下執行順序:

1。 HTML 載入

瀏覽器下載並解析 HTML 文檔,建立文檔物件模型 (DOM)。

2.外部資源擷取

瀏覽器從上到下開始並行載入外部資源(腳本、CSS、映像)。

3. JavaScript 執行

外部(同步): 瀏覽器立即下載、解析並執行外部 JavaScript 文件,阻止 HTML 解析。
外部(非同步) : 現代瀏覽器可能會使用非阻塞載入技術,允許在載入和執行外部的同時繼續進行 HTML 解析腳本。
內嵌:內嵌 JavaScript 在 HTML 解析過程中執行。

4. CSS 執行

瀏覽器在 HTML 中遇到 CSS 規則時下載、解析並套用它們。

5.文件就緒事件

一旦所有DOM 元素和外部資源都已載入並解析,瀏覽器就會觸發「文件就緒」事件,通常是$ (document).ready().

6.進一步的JavaScript執行

「文件就緒」事件後執行的 JavaScript 程式碼繼續執行。

7.圖片下載

瀏覽器依照HTML中的規格下載圖片和其他媒體資源。

回答您的特定問題:

  1. 頁面載入自上而下,並行載入外部資源。
  2. 載入順序為: HTML->外部資源-> JavaScript -> CSS-> 「文件就緒」事件 ->進一步的 JavaScript ->圖片下載。
  3. 內嵌 JavaScript:HTML 解析期間。外部 JavaScript(同步):阻止 HTML 解析。外部 JavaScript(非同步):繼續載入 HTML。
  4. CSS:按照在 HTML 中遇到的方式應用。
  5. $(document).ready:載入所有 DOM 元素和資源後觸發。
  6. 只會下載kkk.png,替換原來的

注意:

執行順序可能會因瀏覽器設定(例如並行請求限制)和快取機製而略有不同。瀏覽器載入和執行過程的詳細介紹可以在:https://browser.engineering/(開源:https://github.com/browserengineering/book)。

以上是網頁如何執行:逐步分解?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板