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

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

js 复制代码
doms.ul.style.top = `-${offset}px`
// vs
doms.ul.style.transform = `translateY(-${offset}px)`

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

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

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与滚动条
相关推荐
云枫晖9 分钟前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate9 分钟前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰13 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6962 小时前
CSS-响应式布局
前端
三小河2 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法2 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端