22，重绘、回流
2019-11-21 本文已影响0人
r8HZGEmq
1，浏览器渲染机制
console.log("渲染机制")
1，采用流式布局模型
2，将HTML解析成DOM，CSS解析成CSSOM，合并成渲染树
3，根据渲染树得到所有节点的大小和位置。并绘制
4，Table布局会多次计算和绘制，耗性能
2，重绘
console.log("重绘")
1，节点的形状、属性发生改变，但是不影响布局。如：color，visiblity
2，代价高昂，因为：浏览器要验证DOM树上其他节点的可见性
3，回流 > 重绘。
console.log("回流")
1，布局、几何属性改变。会引起回流
2，影响性能核心因素，因为：其变化会因为页面的更新。一个元素回流，可能引起子节点和后面的节点 随后回流
<body>
<div class="error">
<h4>我的组件</h4>
<p><strong>错误：</strong>错误的描述…</p>
<h5>错误纠正</h5>
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
</div>
</body>
如上面：<p>标签回流，会引起父节点回流，后面的<h5><ol><li>也有简单回流。
大部分的回流，导致页面的重新渲染！
4，浏览器优化
1，浏览器批量更新布局的方式：修改操作会存在队列中，每16.6ms刷一次。
2，代码中去获取布局信息时，队列中会有影响以下属性和方法的操作。
属性和方法主要包括：（所以尽量避免使用，他们会强制渲染刷新队列）
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
width、height
getComputedStyle()
getBoundingClientRect()
5，减少重绘和回流
1，transform 替代 top
2，visibility 替代 display:none （前者局部重绘，后者整体回流）
3，避免table布局 （小改动可能引发重新布局）
4，尽量在DOM的末端改变class。回流避免不了，但是减小影响范围
5，尽量层级扁平设置样式，css选择符从右向左匹配，要避免层次过多。
如这个，第一种方式O(n)，第二种递归方式O(n³)
<div>
<a> <span></span> </a>
</div>
<style>
span {
color: red;
}
div > a > span {
color: red;
}
</style>
6，动画效果用到position属性：absolute或fixed上，避免影响其他布局。只重绘。
7，css表达式可能会引起回流
8，频繁重绘和回流的节点设置为图层，以阻止该节点影响其他。如video、iframe
9，js避免频繁读取引发回流的属性。如果要多次使用，也要用变量缓存起来
10，复杂动画的元素用绝对定位，脱离文档流，不影响父元素和后续元素
