一名優秀的前端程式員必需要了解瀏覽器渲染網頁的程序，那么這個程序分為幾步呢？
1. 決議HTML
當瀏覽器通過網路接收頁面的HTML資料時，它會立即設定決議器將HTML轉換為檔案物件模型(DOM)，
檔案物件模型 (DOM) 是HTML和XML檔案的編程介面，它提供了對檔案的結構化的表述，并定義了一種方式可以使從程式中對該結構進行訪問，從而改變檔案的結構、樣式和內容，DOM 將檔案決議為一個由節點和物件（包含屬性和方法的物件）組成的結構集合，簡言之，它會將Web頁面和腳本或程式語言連接起來，
決議程序的第一步是將HTML分解并表示為開始標記、結束標記及其內容標記，然后它可以構造DOM，
2. 獲取外部資源
當決議器遇到外部資源（如CSS或JavaScript檔案）時，決議器將提取這些檔案，
決議器在加載CSS檔案時繼續運行，此時會阻止頁面渲染，直到資源加載決議完，
JavaScript 檔案略有不同，默認情況下，決議器會在加載 JS 檔案然后進行決議同時會阻止對HTML的決議， 可以將兩個屬性添加到腳本標簽中以減輕這種情況：defer和 async， 兩者都允許決議器在后臺加載JavaScript 檔案的同時繼續運行，但是它們的執行方式不同，
defer表示檔案的執行將被延遲，直到檔案的決議完成為止， 如果多個檔案具有defer屬性，則將按照頁面放置的順序依次執行，
<script type="text/javascript" src="script.js" defer>
async 意味著檔案將在加載后立即執行，這可能是在決議程序中或在決議程序之后執行的，因此不能保證異步腳本的執行順序，
<script type="text/javascript" src="script.js" async>
<link> 元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁面中 <head>元素內部書寫一些宣告式的資源獲取請求，可以指明哪些資源是在頁面加載完成后即刻需要的，
對于這種即刻需要的資源，你可能希望在頁面加載的生命周期的早期階段就開始獲取，在瀏覽器的主渲染機制介入前就進行預加載，這一機制使得資源可以更早的得到加載并可用，且更不易阻塞頁面的初步渲染，進而提升性能，
<link href="style.css" rel="preload" as="style" />
3. 決議CSS并構建CSSOM
與HTML檔案和DOM相似，加載CSS檔案時，必須將它們決議并轉換為樹，即CSSOM， 它描述了頁面上的所有CSS選擇器，它們的層次結構和屬性，
CSS 物件模型 (CSSOM) 是樹形形式的所有CSS選擇器和每個選擇器的相關屬性的映射，具有樹的根節點，同級，后代，子級和其他關系，
CSSOM 與 DOM一起構建渲染樹，瀏覽器依次使用渲染樹來布局和繪制網頁，
CSSOM 與 檔案物件模型(DOM) 非常相似，兩者都是關鍵渲染路徑的一部分，也是正確渲染一個網站必須采取的一系列步驟，
CSSOM 與 DOM的不同之處在于它不能以增量方式構建，因為CSS規則由于特定性而可以在各個不同的點相互覆寫， 這就是CSS 阻塞渲染的原因，因為在決議所有CSS并構建CSSOM之前，瀏覽器無法知道每個元素在螢屏上的位置，
4. 執行JavaScript
不同的瀏覽器有不同的 JS 引擎來執行此任務，從計算機資源的角度來看，決議 JS 可能是一個昂貴的程序，比其他型別的資源更昂貴，因此優化它對于獲得良好的性能是如此重要，
加載的JS和DOM被完全決議并準備就緒后就會觸發 document.DOMContentLoaded事件， 對于需要訪問DOM的任何腳本，例如以某種方式進行操作或偵聽用戶互動事件，優良作法是在執行腳本之前先等待此事件，
document.addEventListener('DOMContentLoaded', (event) => {
// 這里面可以安全地訪問DOM
});在所有其他內容（例如異步JavaScript，影像等）完成加載后，將觸發 window.load 事件，
window.addEventListener('load', (event) => {
// 頁面現已完全加載
});
5.合并DOM和CSSOM 構建渲染樹
渲染樹是DOM和CSSOM的組合，表示將要渲染到頁面上的所有內容， 這并不一定意味著渲染樹中的所有節點都將在視覺上呈現，例如，將包含 opacity:0或visibility:hidden的樣式的節點，并仍然可以被螢屏閱讀器等讀取，而不包括display:none任何內容， 此外，諸如<head>之類的不包含任何視覺資訊的標簽將始終被忽略，與 JS 引擎一樣，不同的瀏覽器具有不同的渲染引擎，
6. 計算布局和繪制
現在我們有了完整的渲染樹，瀏覽器知道了要渲染什么，但是不知道在哪里渲染， 因此，必須計算頁面的布局（即每個節點的位置和大小）， 渲染引擎從頂部開始一直向下遍歷渲染樹，計算應顯示每個節點的坐標，
完成之后，最后一步是獲取布局資訊并將像素繪制到螢屏上，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/231016.html
標籤：其他
上一篇：5句話輕松搞定js原型鏈