Web 瀏覽器如何載入和執行網頁資源？

理解網頁的載入和執行順序

簡介

當使用者要求網頁時，瀏覽器會經歷一個系統的過程來載入並渲染頁面。此過程涉及各種資源的順序下載、解析和執行，包括 HTML、CSS、JavaScript 和映像。

載入與執行順序

HTML 解析：

1. 瀏覽器載入HTML 文件並啟動解析
2. 瀏覽器載入HTML 文件並啟動解析

瀏覽器載入HTML 文件並啟動解析

瀏覽器載入HTML 文件並啟動解析
4. 瀏覽器載入HTML 文件並啟動解析

外部資源下載：

5. 解析HTML 時，瀏覽器會偵測CSS 檔案與JavaScript 等外部資源
6. 瀏覽器並行啟動這些資源的非同步下載。

內聯 CSS 和 JavaScript 執行：

7. As HTML 被解析，瀏覽器遇到內嵌 CSS 和 JavaScript 區塊。
8. 這些資源被執行

CSS 應用：

9. 下載CSS 檔案時，瀏覽器會解析並將規則套用到DOM。
10. DOM 中的元素具有樣式

JavaScript 執行：

11. HTML 解析過程中遇到外部JavaScript 檔案就會下載並執行。
12. 瀏覽器會阻止解析，直到 JavaScript 執行完畢完成。

DOM 操作：

13. 解析完成後，DOM 就可以進行操作了。
14. JavaScript 可以修改DOM，影響版面與內容

文件就緒事件：

當HTML 解析與外部資源載入完成時，會觸發文件就緒事件。

執行此事件中的JavaScript 程式碼來初始化頁面元素並處理使用者

圖片載入在您的範例中，在HTML 解析過程中遇到abc.jpg 時會下載並顯示。當 $(document).ready 事件被觸發時，kkk.png 被下載並設定為圖像來源。 瀏覽器差異載入和執行順序可能會因瀏覽器的不同而略有不同。例如，某些瀏覽器會限制每個網域的同時請求數以最佳化資源載入。 快取快取機制會影響資源載入。可以從儲存而不是伺服器載入快取資源，從而減少下載時間。

並行執行

通常，HTML 解析、JavaScript/DOM 操作和 CSS 應用程式在單獨的執行緒中並行運行。但是，JavaScript 執行可能會阻止 HTML 解析，直到腳本完成。 CSS 規則增量應用，允許非同步渲染。

參考文獻

• [瀏覽器工程書籍](https://browser.engineering/)
• [jQuery文件](https://docs. jquery.com/Tutorials:Introducing_$(document).ready())

以上是Web 瀏覽器如何載入和執行網頁資源？的詳細內容。更多資訊請關注PHP中文網其他相關文章！