浏览器渲染过程
浏览器渲染过程：
- 解析模板，生成DOM树和CSSOM树
- 结合DOM树和CSSOM树，生成渲染树（不含非可见节点，如link，script，meta，以及
display: node的节点） - 回流：根据渲染树，通过回流得到节点的几何信息，如位置，大小等
- 重绘：根据几何信息，得到节点的像素信息，如颜色等
- 展示：将像素信息发送给GUI，进行真实渲染
回流
渲染树中的节点因为尺寸、布局、隐藏等被修改，浏览器需要对渲染树进行重新构建的过程。
重绘
渲染树中某些节点因为外观、风格等被修改，但这些修改并不影响整体布局，浏览器需要对该节点进行重新构建的过程。
回流和重绘的关系
1、回流必定引起重绘，而重绘不一定引起回流。
2、重绘和回流至少会构建一次
引起回流和重绘的操作
- 页面第一次渲染时
- JS添加或删除DOM元素时（不包含
display: node的元素） - 元素位置发生变化时（如：position、top等）
- 元素尺寸发生变化时（如：宽高、内外边距、边框大小等）
- 图片发生内容变化时
- 浏览器尺寸发生变化时
- JS获取某些布局信息时（如：offsetTop、clientTop、scrollTop、getComputedStyle()等）
优化方案
- 1、减少JS脚本对DOM的操作
// 未优化
el.style.paddingTop = '15px';
el.style.paddingLeft = '10px';
// 优化后
el.style.padding = '15px 0 0 10px';
- 2、如果修改的样式内容过多，使用class
// 未优化
el.style.paddingTop = '15px';
el.style.paddingLeft = '10px';
el.style.position = 'relative';
el.style.top = '10px';
el.style.left = '15px';
// 优化后
el.add('demo-class');
- 3、使节点脱离文本流（
display: none、fragment、position: absolute、cloneNode等） - 4、
trsansform、filters、opacity等引起硬件加速 - 5、减少
offsetTop、clientTop、scrollTop等会引起回流的操作。 - 6、规范CSS属性的书写顺序
更多相关文档，请见：
线上地址 【前端橘子君】
GitHub仓库【前端橘子君】
