chrome Dev Tools 性能分析 performance 页面举例

2023-04-3015:51:44WEB前端开发Comments942 views字数 934阅读模式

chrome 的performance用来分析性能优化性能非常好用，下面以一个页面来举例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

性能分析

性能分析最好使用隐私无痕模式，以保证干净的环境下，避免chrome插件对性能分析结果的影响文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

Performance 性能面板：可看到白屏时间，FPS，资源加载曲线，内存变化
Memory 内存面板，记录某个时刻的页面内存情况，用于分析内存泄露

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

详细拆分

overview- FPS

页面每秒帧数。用来分析动画的性能指标。fps=60性能很好文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

FPS（frames per second）是用来分析动画的一个主要性能指标。让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿。能保持在60的FPS的话，那么用户体验就是不错的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

为什么是60fps?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

我们的目标是保证页面要有高于每秒60fps(帧)的刷新频率，这和目前大多数显示器的刷新率相吻合(60Hz)。如果网页动画能够做到每秒60帧，就会跟显示器同步刷新，达到最佳的视觉效果。这意味着，一秒之内进行60次重新渲染，每次重新渲染的时间不能超过16.66毫秒。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

fps<24 会让用户感觉到卡顿，人眼的识别主要是24帧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

FPS chrome最新版需要开启文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

开启后可以看到fps文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

红色块标识长时间帧，很容易遇到卡帧，有红色的地方就是这块有问题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

overview-main火焰图

Main中展示的是火焰图，也就是函数调用的堆栈火焰图
x轴表示时间，最上面的第一条就是事件触发的地方，直到结束，这条线是最长的
y轴表示调用的函数，函数中还包含依次调用的函数，越到下面数量越少（瀑布）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

不同颜色代表不同的事件类型，以下对常见的事件类型进行区分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

Parse HTML（蓝色）: chrome 进行HTML解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

Event Script（橙色）: Javascript事件（例如 mousedown）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

Layout（粉色）: 样式计算和布局，即重排文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

Recalculate style（粉色）: 样式计算和布局，即重排文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

Paint（绿色）: 合成的图层被绘制到显示画面的一个区域文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html

Composite（绿色）: Chrome的渲染引擎合成了图像层文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37999.html