「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」
页面渲染
当在浏览器中输入URL后，一直到浏览器获取到html文件，浏览器会开始自上而下的加载，并在加载的过程中进行解析渲染
渲染流程中会生成两个树： DOM和CSSOM
DOM
表示页面结构。元素是第一个标签也是文档树的根节点。DOM 节点的数量越多，构建 DOM 树所需的时间就越长
CSSOM
如果有CSS， 就会生成CSSOM，CSSOM树来源有 link标签、style标签、内联样式。渲染进程接收到CSS文件时，会执行转换操作，将CSS文本转换为浏览器可以理解的结构 styleSheets，styleSheets 可由 document.styleSheets获取，我们可以在浏览器控制台打印
获取到 styleSheets 结构后，需要将所有值转换为渲染引擎容易理解、标准化的计算值。
渲染树
在 DOM 树和 CSSOM 树构建完成之后，将创建的 DOM 树和 CSSOM 树合并成一个渲染树(Render 树)；
这个时候开始显示页面元素
重绘与重排
重排（reflow）
当DOM的变化影响了元素的几何属性，比如宽和高，这个时候，浏览器需要重新计算元素的几何属性，在这个过程中，同样会影响到其他元素的几何属性，浏览器会重新生成Render 树，这个过程叫做重排；重排又叫回流
| 常见的重排元素 | |||
|---|---|---|---|
| width | height | padding | margin |
| display | border-width | border | top |
| position | font-size | float | text-align |
| overflow-y | font-weight | overflow | left |
| font-family | line-height | vertical-align | right |
| clear | white-space | bottom | min-height |
重绘（replain）
完成重排后，浏览器会重新绘制受影响的部分到屏幕中，这个过程叫重绘
所以，重排必定引发重绘，重绘不一定引发回流
- 几何属性：包括布局、尺寸等可用数学几何衡量的属性
- 布局：
display、float、position、list、table、flex、columns、grid
- 尺寸：
margin、padding、border、width、height
- 外观属性：包括界面、文字等可用状态向量描述的属性
- 界面：
appearance、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip
- 文字：
text、font、word
由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改并执行来优化重排过程，但是频繁的操作节点，还是带来不小的性能问题。所以需要减少和避免回流重绘
减少重排和重绘
样式优化
- 使用transform代替top、left
- 使用visibility:hidden替换display:none
- 尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘
批量修改dom
- 不要逐条变更DOM的样式，应封装在一个style对象中赋值给DOM的样式属性或者切换类名
// css
.active {
padding: 5px;
border-left: 1px;
border-right: 2px;
}
// javascript
var el = document.querySelector('.el');
el.className = 'active';
复制代码- 将原始元素拷贝到一个独立的节点中，操作这个节点，然后覆盖原始元素
let old = document.querySelector('#mylist');
let clone = old.cloneNode(true);
appendNode(clone, data);
old.parentNode.replaceChild(clone, old);
- **使用文档片段documentFragment**
let fragment = document.createDocumentFragment();
appendNode(fragment, data);
ul.appendChild(fragment);
复制代码元素脱离动画流
requestAnimationFrame()代替setInterval()；