歌词滚动之为什么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与滚动条
相关推荐
xw57 分钟前
移动端调试上篇
前端
伍哥的传说10 分钟前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达10 分钟前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing16 分钟前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy20 分钟前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码41 分钟前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
在路上`1 小时前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习
Pu_Nine_92 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆3 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵3 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee