了解瀏覽器中的渲染：DOM 是如何產生的？
- Linda Hamilton原創
- 2024-11-11 20:14:03800瀏覽
在之前的文章中我們了解了 DOM 和 CSSOM，如果你對這兩個字還有疑問，我建議你閱讀下面兩篇文章：
- 了解瀏覽器中的渲染：DOM
- 了解瀏覽器中的渲染：CSSOM
回顧一下，DOM 是瀏覽器用來渲染頁面的結構。然而，網路資料並不是以 DOM 的形式傳輸的，因此在 DOM 準備好供瀏覽器使用之前需要有一個流程。
此時您可能想知道資料如何在網路上傳輸？
每當我們造訪網站時，都會以我們稱為客戶端 x 伺服器的模式進行交換。
在這個交換中，客戶端（你的瀏覽器）請求伺服器訪問網站www.cristiano.dev，伺服器回應所請求網站的所有內容，但是這些內容以位元組的形式出現，並且以某種方式這與我們所知的html/css/js 相差甚遠。
瀏覽器將從伺服器接收的是一個位元組序列。
對於伺服器提供的這個一小段 html ：
<!doctype html>
<html>
<head>
<title>Um título</title>
</head>
<body>
<a href="#">Um link</a>
<h1>Um cabeçalho</h1>
</body>
</html>
瀏覽器將以位元組為單位接收以下內容：
3C21646F63747970652068746D6C3E0A3C68746D6C3E0A20203C686561643E0A202020203C7469746C653E556D2074C3AD74756C6F3C2F7469746C653E0A20203C2F686561643E0A20203C626F64793E0A202020203C6120687265663D2223223E556D206C696E6B3C2F613E0A202020203C68313E556D2063616265C3A7616C686F3C2F68313E0A20203C2F626F64793E0A3C2F68746D6C3E
但是，瀏覽器無法僅使用此資訊呈現頁面。為了組裝我們的佈局，瀏覽器將在獲得 DOM 之前執行幾個步驟。
這些步驟是：
- 轉換
- 代幣化
- 樂行
轉換：位元組到字符
在此步驟中，瀏覽器從網路或磁碟讀取原始數據，並根據檔案中指定的編碼（例如 UTF-8）將其轉換為字元。
基本上就是瀏覽器將位元組轉換為我們日常生活中編寫的格式的程式碼的步驟。
標記化：標記的字符
在此階段，瀏覽器將字串轉換為稱為標記的小單位。標籤和內容的每個開始、結束都被計算在內，此外，每個標記都有一組特定的規則。
例如，標籤 與
標籤有不同的屬性如果沒有這一步，我們只會得到一堆對瀏覽器沒有意義的文本，在此過程結束時，我們的基本 html 將像這樣被標記：
- ; ➔ 令牌：DOCTYPE，值：html
- ➔ 令牌：StartTag，名稱：html
- ➔ 令牌：StartTag，名稱：頭
- ➔ 令牌：開始標籤，名稱：標題
- 標題範例 ➔ Token：字符，資料：標題範例
- 標題> ➔ 令牌：結束標籤，名稱：標題
-
➔ 令牌：StartTag，名稱：p
- 你好世界！ ➔ 令牌：字符，資料：世界您好！
- ➔ 令牌：EndTag，名稱：p
標記是文本中的單字或符號。 「標記化」是將文字分解為更小的單字、短語或符號的過程。
詞法分析：節點的令牌
詞法分析步驟（詞法分析）負責將標記轉換為對象，但這還不是 DOM。此時，瀏覽器正在產生 DOM 的隔離部分，其中每個標籤將轉換為具有屬性的對象，該對象帶來與屬性、父標籤、子標籤等相關的資訊
對標籤進行詞法分析後的結果
會是這樣的：
<!doctype html>
<html>
<head>
<title>Um título</title>
</head>
<body>
<a href="#">Um link</a>
<h1>Um cabeçalho</h1>
</body>
</html>
DOM 建置：DOM 節點
我們終於到達 DOM 建置階段了！
此時，瀏覽器將考慮 html 標籤之間的關係，並將節點連接成樹狀資料結構，以分層方式表示這些關係。例如：html 物件是 body 物件的父對象，body 是段落物件的父對象，直到建立文件的整個表示。
建置結束時，我們的範例 html 變成如下所示的物件樹：
3C21646F63747970652068746D6C3E0A3C68746D6C3E0A20203C686561643E0A202020203C7469746C653E556D2074C3AD74756C6F3C2F7469746C653E0A20203C2F686561643E0A20203C626F64793E0A202020203C6120687265663D2223223E556D206C696E6B3C2F613E0A202020203C68313E556D2063616265C3A7616C686F3C2F68313E0A20203C2F626F64793E0A3C2F68746D6C3E
回顧
建構 DOM 的過程很複雜，分以下步驟進行：
- 轉換：瀏覽器接收HTML並將其從位元組轉換為字元。
- 標記化：字元轉換為表示 html 部分（標籤、屬性、文字）的標記。
- 詞法分析：令牌被組織成物件節點
- DOM：物件以分層方式組織在樹狀資料結構中。
CSSOM 也發生類似的過程，包括轉換、標記化和詞法分析。
結論
您一定想知道如何在日常開發中應用這些知識...
確實，此類資訊不會被頻繁請求，但了解瀏覽器（主要的前端工作工具）本質上如何運作非常重要。
這些知識對於理解我們將在這裡討論的下一個主題也非常有價值：繪製、重繪、流動和回流。
非常感謝！ ！
感謝您來到這裡！
我希望您在閱讀本文時學到了一些新東西。
下次再見！
參考
建構物件模型
解構網頁：頁面渲染
以上是了解瀏覽器中的渲染：DOM 是如何產生的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！