渲染性能
2017-08-28 18:08:41 5 举报AI智能生成
web性能
作者其他创作
大纲/内容
渲染性能
60fps
大多数屏幕刷新的频率60帧/每秒
每帧16ms
DOM
CSSOM
渲染树
渲染树只包含visible元素
https://csstriggers.com/
layout
paint
composite
RAIL
load
加载
1s
idle
闲置
image
video
50ms
加载完到用户操作的时间
animations
动画
16ms
response
响应
对用户操作响应
100ms
移动端调试
android
chrome/inspect
ios
https://github.com/google/ios-webkit-debug-proxy
js
微优化
浪费时间
for和while的选择
RequestAnimationFrame替代settimeout
settimeout不考虑渲染管道
timeline
js heap
上升表明js在使用内存，快速下降表明垃圾搜集
样式和布局
cost/样式数量
线性
bem
block
element
modifier
选择器
优化元素数量
优化选择器
布局重复
forced reflow
FSL
Forced Synchronous Layout
强制同步布局
合成和绘制
layer
动画放入单独的图层
分层和合成
层数多，可能花费很多时间合成
will-change:transform
0 条评论
回复 删除
下一页
