登录免费注册

首页  思维导图  详情



 



渲染性能

渲染性能

2017-08-28 18:08:41   5  举报





AI智能生成

web性能

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

 Collect

Get Started

渲染流程

 Collect

Get Started

渲染器

 Collect

Get Started

前端

 Collect

Get Started

实时渲染













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document