大家好，我是IT修真院上海分院第01期學員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng) CSS任務中可能會使用到的知識點：
瀏覽器如何渲染頁面
一、背景介紹
瀏覽器渲染頁面的大致過程：
從瀏覽器地址欄的請求鏈接開始，瀏覽器通過DNS解析查到域名映射的IP地址，成功之后瀏覽器端向此IP地址取得連接，成功連接之后，瀏覽器端將請求頭信息 通過HTTP協(xié)議向此IP地址所在服務器發(fā)起請求，服務器接受到請求之后等待處理，最后向瀏覽器端發(fā)回響應，此時在HTTP協(xié)議下，瀏覽器從服務器接收到 text/html類型的代碼，瀏覽器開始顯示此html，并獲取其中內嵌資源地址，然后瀏覽器再發(fā)起請求來獲取這些資源，并在瀏覽器的html中顯示
二、知識刨析
瀏覽器解析的大概的工作流程可以歸納為以下幾個步驟
1.處理 HTML 標記并構建 DOM 樹。
2.處理 CSS 標記并構建 CSSOM 樹。
3.將 DOM 與 CSSOM 合并成一個渲染樹。
4. 根據(jù)渲染樹來布局，以計算每個節(jié)點的幾何信息。
5. 將各個節(jié)點繪制到屏幕上。
一個包含一些文本和一幅圖片的普通 HTML 頁面，瀏覽器如何處理此頁面？
文檔對象模型
轉換： 瀏覽器從磁盤或網(wǎng)絡讀取 HTML 的原始字節(jié)，并根據(jù)文件的指定編碼（如 UTF-8）將它們轉換成各個字符。
Tokenizing： 瀏覽器將字符串轉換成 W3C HTML5 標準規(guī)定的各種tokens，例如，“html”、“body”，以及其他尖括號內的字符串。每個token都具有特殊含義和一組規(guī)則。
詞法分析： 發(fā)出的標記轉換成定義其屬性和規(guī)則的“對象”。
DOM 構建： 最后，由于 HTML 標記定義不同標記之間的關系（一些標記包含在其他標記內），創(chuàng)建的對象鏈接在一個樹數(shù)據(jù)結構內，此結構也會捕獲原始標記中定義的父項-子項關系：HTML 對象是 body 對象的父項，body是paragraph對象的父項，依此類推。
整個流程最終輸出是頁面的文檔對象模型 (DOM)，瀏覽器對頁面進行的所有進一步處理都會用到它。
瀏覽器每次處理 HTML 標記時，都會完成以上所有步驟：將字節(jié)轉換成字符，確定tokens，將tokens轉換成節(jié)點，然后構建 DOM 樹。
CSS 對象模型 (CSSOM)
在瀏覽器構建這個簡單頁面的 DOM 過程中，在文檔的 head 中遇到了一個 link 標記，該標記引用一個外部 CSS 樣式表：style.css。由于預見到需要利用該資源來渲染頁面，它會立即發(fā)出對該資源的請求，然后獲得一個css樣式表
與處理 HTML 時一樣，我們需要將收到的 CSS 規(guī)則轉換成某種瀏覽器能夠理解和處理的東西。因此，我們會重復 HTML 過程，不過是為 CSS 而不是 HTML：
CSS 字節(jié)轉換成字符，接著轉換成tokens和節(jié)點，最后鏈接到一個稱為“CSS 對象模型”(CSSOM) 的樹結構：
CSSOM 為何具有樹結構？為頁面上的任何節(jié)點對象計算最后一組樣式時，瀏覽器都會先從適用于該節(jié)點的最通用規(guī)則開始（例如，如果該節(jié)點是 body 元素的子元素，則應用所有 body 樣式），然后通過應用更具體的規(guī)則以遞歸方式優(yōu)化計算的樣式。
以上面的 CSSOM 樹為例進行更具體的闡述。任何置于 body 元素內span 標記中的文本都將具有 16 像素字號，并且顏色為紅色 。font-size 指令從 body 向下級層疊至 span。不過，如果某個 span 標記是某個段落 (p) 標記的子項，則其內容將不會顯示。
渲染樹構建、布局及繪制
CSSOM 樹和 DOM 樹合并成渲染樹，它只包含渲染網(wǎng)頁所需的節(jié)點。遍歷每個DOM樹中的node節(jié)點，在CSSOM規(guī)則樹中尋找當前節(jié)點的樣式，生成渲染樹。
布局計算每個對象的精確位置和大小。
最后一步是繪制，使用最終渲染樹將像素渲染到屏幕上。
從 DOM 樹的根節(jié)點開始遍歷每個可見節(jié)點。
某些節(jié)點不可見（例如腳本標記、元標記等），因為它們不會體現(xiàn)在渲染輸出中，所以會被忽略。
某些節(jié)點通過 CSS 隱藏，因此在渲染樹中也會被忽略。例如 span 節(jié)點上設置了“display: none”屬性，所以也不會出現(xiàn)在渲染樹中。
遍歷每個可見節(jié)點，為其找到適配的 CSSOM 規(guī)則并應用它們。
最終輸出的渲染同時包含了屏幕上的所有可見內容及其樣式信息。
有了渲染樹，我們就可以進入“布局”階段。
到目前為止，我們計算了哪些節(jié)點應該是可見的以及它們的計算樣式，但我們尚未計算它們在設備視口內的確切位置和大小---這就是“布局”階段。
布局流程的輸出是一個“盒模型”，它會精確地捕獲每個元素在視口內的確切位置和尺寸：所有相對測量值都轉換為屏幕上的絕對像素。
最后，既然我們知道了哪些節(jié)點可見、它們的computed styles以及幾何信息，我們終于可以將這些信息傳遞給最后一個階段：將渲染樹中的每個節(jié)點轉換成屏幕上的實際像素。這一步通常稱為"painting" or "rasterizing."。
執(zhí)行渲染樹構建、布局和繪制所需的時間將取決于文檔大小、應用的樣式，以及運行文檔的設備：文檔越大，瀏覽器需要完成的工作就越多；樣式越復雜，繪制需要的時間就越長
三、常見問題
什么是回流與重繪？
說到頁面為什么會慢？那是因為瀏覽器要花時間、花精力去渲染，尤其是當它發(fā)現(xiàn)某個部分發(fā)生了點變化影響了布局，需要倒回去重新渲染， 該過程稱為reflow（回流）。
reflow 幾乎是無法避免的?，F(xiàn)在界面上流行的一些效果，比如樹狀目錄的折疊、展開（實質上是元素的顯 示與隱藏）等，都將引起瀏覽器的 reflow。鼠標滑過、點擊……只要這些行為引起了頁面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲 染。通常我們都無法預估瀏覽器到底會 reflow 哪一部分的代碼，它們都彼此相互影響著。
如果只是改變某個元素的背景色、文 字顏色、邊框顏色等等不影響它周圍或內部布局的屬性，將只會引起瀏覽器 repaint（重繪）。
repaint 的速度明顯快于 reflow。
四、擴展思考
如何盡量避免reflow？
五、參考文獻
參考一：reflow（回流）和repaint（重繪）及其優(yōu)化
參考二：瀏覽器如何渲染頁面？
六、視頻鏈接
PPT：https://ptteng.github.io/PPT/PPT/css-15-Hbrp.html#/
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始，找個師兄，帶你入門，掌控自己學習的節(jié)奏，學習的路上不再迷?！?。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧?！
鳴謝 王力師兄！
感謝大家的閱讀！
