css3动画会造成回流重绘吗,网页性能篇——回流与重绘
一、浏览器渲染的过程
解析HTML,构建DOM树。解析CSS，构建CSSOM树
DOM树和CSSOM树结合，生成渲染树
回流(Layout)：根据生成的渲染树进行回流，得到节点的几何信息(大小和位置)
重绘(Painting)： 根据渲染树以及已经得到的回流信息，得到节点的绝对像素。
将像素发送给GPU，展现在页面上
二、什么时候会发生回流与重绘
回流这一阶段主要是计算位置与几何信息，所以当页面布局和几何信息发生变化的时候就需要回流 。比如以下情况
页面一开始渲染的时候
浏览器的窗口发生变化(会重新计算位置和大小)
添加或删除可见的DOM元素
元素的大小(width,height,margin,padding,border-width)，位置发生变化
内容发生变化(如图片的url改变)
只发生重绘的情况：改变一些只影响元素外观的样式，而不影响布局(如background改变)
三、浏览器触发回流与重绘
当浏览器获取布局信息时，由于要获取最新的布局信息，所以浏览器不得不清空队列，触发回流重绘来返回准确的值。如修改下面的值：
offset~ (offsetTop、offsetLeft、offsetWidth、offsetHeight)
scroll~ (scrollTop、scrollLeft、scrollWidth、scrollHeight)
client~ (clientTop、clientLeft、clientWidth、clientHeight)
getComputedStyle()
getBoundingClientRect
三、如何减少回流与重绘
1.合并多次对样式的修改
如：
const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
可以使用cssText合并所有的改变，然后一起处理
const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';
或者通过改变className改变样式
const el = document.getElementById('test');
el.className += ' active';
2. 批量修改DOM
如：
function appendDataToElement(appendToElement, data) {
let li;
for (let i = 0; i < data.length; i++) {
li = document.createElement('li');
li.textContent = 'text';
appendToElement.appendChild(li);
}
}
上面代码每一次循环都添加了DOM元素，所以导致了很多次的回流与重绘
所以可以先创建完所有的元素后一次性添加
const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
ul.appendChild(fragment);
3.避免触发同步布局事件
上文我们提到过，访问一些属性时会导致浏览器强制清空队列，如使用offsetWidth：
function initP() {
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.width = box.offsetWidth + 'px';
}
}
上面代码每一次循环都访问了offsetWidth，所以导致了很多次的回流与重绘
所以我们要尽量减少访问这类属性
function initP() {
const width = box.offsetWidth;
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.width = width + 'px';
}
}
4.对于复杂动画效果,使用绝对定位让其脱离文档流
5.css3硬件加速(GPU加速)
比起考虑如何减少回流重绘，我们更期望的是，根本不要回流重绘。
使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。
对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。