瀏覽器解析草圖
瀏覽器渲染原理
1、解析HTML，生成DOM樹，解析CSS，生成CSSOM樹
2、將DOM樹和CSSOM樹相結合，生成渲染樹（Render Tree）
3、Layout（迴流）：根據生成的渲染樹，計算它們在設備視口（viewport）內的確切位置和大小，這個計算的階段就是迴流
4、Painting（重繪）：根據渲染樹以及迴流得到的幾何信息，得到節點的絕對像素
5、Display：將像素髮送給GPU，展示在頁面上
瀏覽器頁面性能優化
核心就是：減少HTTP的請求次數和大小
比如：
- 資源合併壓縮
- 圖片懶加載
- 音頻 走 流文件（加載一部分）
- 儘可能避免迴流和重繪