理解網頁的載入和執行順序
簡介
當使用者要求網頁時，瀏覽器會經歷一個系統的過程來載入並渲染頁面。此過程涉及各種資源的順序下載、解析和執行，包括 HTML、CSS、JavaScript 和映像。
載入與執行順序
HTML 解析：
- 瀏覽器載入HTML 文件並啟動解析
- 瀏覽器載入HTML 文件並啟動解析
瀏覽器載入HTML 文件並啟動解析
瀏覽器載入HTML 文件並啟動解析-
- 瀏覽器載入HTML 文件並啟動解析
外部資源下載：
- 解析HTML 時，瀏覽器會偵測CSS 檔案與JavaScript 等外部資源
- 瀏覽器並行啟動這些資源的非同步下載。
內聯 CSS 和 JavaScript 執行：
- As HTML 被解析，瀏覽器遇到內嵌 CSS 和 JavaScript 區塊。
- 這些資源被執行
CSS 應用：
- 下載CSS 檔案時，瀏覽器會解析並將規則套用到DOM。
- DOM 中的元素具有樣式
JavaScript 執行：
- HTML 解析過程中遇到外部JavaScript 檔案就會下載並執行。
- 瀏覽器會阻止解析，直到 JavaScript 執行完畢完成。
DOM 操作：
- 解析完成後，DOM 就可以進行操作了。
- 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中文網其他相關文章！
