1、重繪(Repaint)
重繪（repaint或redraw）：當盒子的位置、大小以及其他屬性，例如顏色绘闷、字體大小等都確定下來之后橡庞，瀏覽器便把這些原色都按照各自的特性繪制一遍，將內容呈現在頁面上印蔗。重繪是指一個元素外觀的改變所觸發(fā)的瀏覽器行為扒最，瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀华嘹。
重繪不會帶來重新布局扼倘，所以并不一定伴隨重排。
"重繪"不一定需要"重排"除呵，比如改變某個網頁元素的顏色再菊，就只會觸發(fā)"重繪"，不會觸發(fā)"重排"颜曾，因為布局沒有改變纠拔。
但是，"重排"必然導致"重繪"泛豪，比如改變一個網頁元素的位置稠诲，就會同時觸發(fā)"重排"和"重繪"，因為布局改變了诡曙。
2臀叙、重排(Reflow)
重排（重構/回流/reflow）：當渲染樹中的一部分(或全部)因為元素的規(guī)模尺寸，布局价卤，隱藏等改變而需要重新構建, 這就稱為回流(reflow)劝萤。每個頁面至少需要一次回流，就是在頁面第一次加載的時候慎璧。
渲染對象在創(chuàng)建完成并添加到渲染樹時床嫌，并不包含位置和大小信息。計算這些值的過程就稱為布局或重排胸私。
Reflow 的成本比 Repaint 的成本高得多的多厌处。DOM Tree 里的每個結點都會有 reflow 方法，
一個結點的 reflow 很有可能導致子結點岁疼，甚至父點以及同級結點的 reflow阔涉。在一些高性能的電腦上也許還沒什么，
但是如果 reflow 發(fā)生在手機上捷绒，那么這個過程是消耗內存性能和耗電的瑰排。
重排必定會引發(fā)重繪，但重繪不一定會引發(fā)重排疙驾。
觸發(fā)重排的條件：
任何頁面布局和幾何屬性的改變都會觸發(fā)重排凶伙，比如：
1、頁面渲染初始化它碎；(無法避免)
2、添加或刪除可見的DOM元素；
3扳肛、元素位置的改變傻挂，或者使用動畫；
4挖息、元素尺寸的改變——大小金拒，外邊距，邊框套腹；
5绪抛、瀏覽器窗口尺寸的變化（resize事件發(fā)生時）；
6电禀、填充內容的改變幢码，比如文本的改變或圖片大小改變而引起的計算值寬度和高度的改變；
7尖飞、讀取某些元素屬性：（offsetLeft/Top/Height/Width, clientTop/Left/Width/Height, scrollTop/Left/Width/Height, width/height, getComputedStyle(), currentStyle(IE) )
重繪發(fā)生的情況：
重繪發(fā)生在元素的可見的外觀被改變症副，但并沒有影響到布局的時候。比如政基，僅修改DOM元素的字體顏色（只有Repaint贞铣，因為不需要調整布局）
1、改變字體
2沮明、增加或者移出樣式表
3辕坝、內容變化，比如用戶在input框中輸入文字
4荐健、激活css偽類圣勒，比如:hover
5、腳本操作DOM
6摧扇、計算offsetWidth和offsetHeight屬性
7圣贸、設置style屬性的值
image.png
1、前端性能指標
- FP 首次繪制
- FCP 首次內容繪制
- FMP 首次有效繪制
- TTI 可交互時間
2扛稽、前端頁面渲染流程
- HTML頁面請求
- HTML文檔下載
- html -> 文檔自身
- javascript -> js
- link -> css
- video -> .ogg .mp4
- audio -> .mp3
- img -> 圖片src
- HTML文檔解析（按順序依次執(zhí)行）
- dom樹生成（html文檔中所有標簽元素吁峻，不管該標簽在頁面中是否實際可見）
- render樹生成（結合css樣式、js代碼繪制成的頁面實際展示的dom元素）
- 逐級解析dom樹
- p在张、label用含、ol、a等等一般不引用外部資源的標簽
- link帮匾、javascript啄骇、img可引用外部資源的標簽
- link -> css、盡量減少頁面的reflow （reflow-回流：當頁面結構發(fā)生改變時瘟斜，例如當元素位置發(fā)生改變缸夹，比如某個元素的margin痪寻、padding的改變導致其他元素位置的變化，或者說render樹被重新組裝虽惭；repaint-重繪）
- javascript -> js橡类，js繪制dom節(jié)點會阻塞其他標簽接解析、甚至下載
- img -> 圖片src芽唇，圖片加載可以先使用分辨率較低的圖片
- HTML文檔下載
- 瀏覽器的js引擎
3顾画、技術優(yōu)化出發(fā)點
- 復用（維護性、開發(fā)成本）
- 前端復用
- 后端復用
- 加載方式（提升用戶體驗）
- 同步加載
- 都加載完才能展示給用戶想看的
- 可能很少的tcp連接就能完成頁面的加載
- 分級加載
- 同步加載和異步加載相結合
- 先給用戶加載重要信息匆笤，比如logo/核心功能研侣，后面加載不重要的
- 按需加載
- 用戶不觸發(fā)該功能我們就不加載
- 用戶不觸發(fā)該功能，但是寬帶閑置炮捧，或者頁面的主要元素都加載完了庶诡，就可以加載
- 同步加載
