[TOC] # 渲染 * 定義：把元素變成位圖的過程（每一個元素對應的盒變成位圖，一個元素可能對應多個盒（比如 inline 元素，可能分成多行） * 位圖：在內存里建立一張二維表格，把一張圖片的每個像素對應的顏色保存進去（位圖信息也是 DOM 樹中占據瀏覽器內存最多的信息，我們在做內存占用優化時，主要就是考慮這一部分） * 分類：圖形和文字 * 圖形類：盒的背景、邊框、SVG 元素、陰影等特性 * 盒的特性如何繪制，每一個都有對應的標準規定，不詳細探究 * 文字類 * 分類：分為像素字形和矢量字形（會在 6px 8px 等小尺寸提供像素字形，比較大的尺寸則提供矢量字形） * 最普遍的情況下，渲染過程生成的位圖尺寸跟它在上一步排版時占據的尺寸相同，很多屬性會影響渲染位圖的大小，比如陰影，為了優化，瀏覽器實際的實現中會把陰影作為一個獨立的盒來處理 * 一般的操作系統會提供一個底層庫來支持渲染：Android(Skia）Windows(GDI)瀏覽器會做一個兼容層來處理掉平臺差異 * 渲染過程：不會把子元素繪制到渲染的位圖上的，當父子元素的相對位置發生變化時，可以保證渲染的結果能夠最大程度被緩存，減少重新渲染 * 輸入框實現：渲染過程除了位圖，最終繪制上去還產生一個"熱區"，這個“熱區”不但跟你說的input相關，還跟用戶選擇、鼠標事件和scroll等交互相關(太復雜啦,winter沒有講) <br> <br> # 合成 * 定義：為一些元素創建一個“合成后的位圖”（我們把它稱為合成層），把一部分子元素渲染到合成的位圖上面，性能優化行為，非瀏覽器必須 * 合成的策略：最大限度減少繪制次數，“猜測”可能變化的元素，把它排除到合成之外 * 主流瀏覽器一般根據 position、transform 等屬性來決定合成策略，來“猜測”這些元素未來可能發生變化 * 新的 CSS 標準中，規定了 will-change 屬性，可以由業務代碼來提示瀏覽器的合成策略 例如 ~~~ 合成策略能夠把 a、b 兩個 div 合成，而不把 c 合成 在實際場景中，我們的 b 可能有很多復雜的子元素，所以當合成命中時，性能提升收益非常之高 <div id="a"> <div id="b">...</div> <div id="c" style="transform:translate(0,0)"></div> </div> document.getElementById("c").style.transform = "translate(100px, 0)"; ~~~ <br> <br> # 繪制 * 定義：把“位圖最終繪制到屏幕上，變成肉眼可見的圖像”的過程，實際上就是按照 z-index 把它們依次繪制到屏幕 * 瀏覽器不處理，把要顯示的位圖交給操作系統 * 限制繪制的面積(換一個角度理解重繪repaint)： * 問題：鼠標劃過瀏覽器顯示區域。這個過程中，鼠標的每次移動，都造成了重新繪制，如果我們不重新繪制，就會產生大量的鼠標殘影 * 解決：“臟矩形”算法--把屏幕均勻地分成若干矩形區域，重新繪制臟矩形區域時，把所有與矩形區域有交集的合成層（位圖）的交集部分繪制即可。 <br> <br> # 參考資料 重學前端