浏览器解析流程

浏览器解析草图

浏览器渲染原理

1、解析HTML，生成DOM树，解析CSS，生成CSSOM树

2、将DOM树和CSSOM树相结合，生成渲染树（Render Tree）

3、Layout（回流）：根据生成的渲染树，计算它们在设备视口（viewport）内的确切位置和大小，这个计算的阶段就是回流

4、Painting（重绘）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素

5、Display：将像素发送给GPU，展示在页面上

浏览器页面性能优化

核心就是：减少HTTP的请求次数和大小

比如：

1. 资源合并压缩
2. 图片懒加载
3. 音频 走 流文件（加载一部分）
4. 尽可能避免回流和重绘