歌词滚动之为什么transform比top性能更好？

左侧使用子绝父相 不断更新top属性，而右侧则使用translate 测试60秒播放查看绘制次数
使用top方式渲染652次，使用translate则只绘制了251次

doms.ul.style.top = `-${offset}px`
// vs
doms.ul.style.transform = `translateY(-${offset}px)`

为什么transform比top少绘那么多次？

这和reflow与repaint有关就是俗称的重排与重绘以及浏览器渲染原理有关

reflow

reflow就是当几何信息变动导致的布局树重新计算以及后续的步骤

哪些操作会导致reflow？
例如修改几何信息width、height、padding、margin、font-size 包括这里说的top

repaint

repaint 的本质就是重新根据分层信息计算了绘制指令(什么是分层？后续会讲)

我们应该知道重排必然引发重绘对吧，所以不断更新top必然repaint

览器渲染流程

1. HTML解析 拿到html文本解析包括不限于html css js,产出DOM树与CSSOM树
2. 样式计算 样式计算产出带有样式的DOM树
3. 布局 计算每个节点的几何信息
4. 分层 现代浏览器为提高性能 将内容易变的分为一层
5. 绘制 主线程为每个层产生单独的绘制指令
6. 分块 合成线程对每个图层分块划分为更小的区域由多个线程完成
7. 光栅化 将每个块变成位图优先处理靠近视口的块
8. 画 用位图生成quad指引标出应该画到屏幕的那个位置，在此阶段考虑transform animation等

注意 ：分块阶段开始是在合成线程处理不会阻塞主线程

分层信息可在控制台layer看

答

因为几何信息的更改重发reflow导致repaint

而transform不影响布局及绘制指令只在合成线程中画的阶段考虑所以性能更优

其他

• font-size更改同样触发reflow可考虑用scale代替
• 因为画是在合成线程所以主线程阻塞不会影响到animation与滚动条

原文链接：https://juejin.cn/post/7327892137881894966 作者：_引力波