gpt4 book ai didi

chromeDevTools性能分析performance

转载 作者:我是一只小鸟 更新时间:2023-04-27 14:31:36 32 4
gpt4 key购买 nike

chrome 的performance用来分析性能优化性能非常好用,下面以一个页面来举例 。

性能分析

性能分析最好使用隐私无痕模式,以保证干净的环境下,避免chrome插件对性能分析结果的影响 。

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

img

img

详细拆分

overview- FPS

页面每秒帧数。用来分析动画的性能指标。fps=60性能很好 。

FPS(frames per second)是用来分析动画的一个主要性能指标。让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿。能保持在60的FPS的话,那么用户体验就是不错的.

为什么是60fps?

我们的目标是保证页面要有高于每秒60fps(帧)的刷新频率,这和目前大多数显示器的刷新率相吻合(60Hz)。如果网页动画能够做到每秒60帧,就会跟显示器同步刷新,达到最佳的视觉效果。这意味着,一秒之内进行60次重新渲染,每次重新渲染的时间不能超过16.66毫秒.

fps<24 会让用户感觉到卡顿,人眼的识别主要是24帧 。

FPS chrome最新版需要开启 。

img

开启后可以看到fps 。

img

红色块标识长时间帧,很容易遇到卡帧,有红色的地方就是这块有问题 。

img

overview-main火焰图

Main中展示的是火焰图,也就是函数调用的堆栈火焰图 x轴表示时间,最上面的第一条就是事件触发的地方,直到结束,这条线是最长的 y轴表示调用的函数,函数中还包含依次调用的函数,越到下面数量越少(瀑布) 。

不同颜色代表不同的事件类型,以下对常见的事件类型进行区分 。

Parse HTML(蓝色): chrome 进行HTML解析 。

Event Script(橙色): Javascript事件(例如 mousedown) 。

Layout(粉色): 样式计算和布局,即重排 。

Recalculate style(粉色): 样式计算和布局,即重排 。

Paint(绿色): 合成的图层被绘制到显示画面的一个区域 。

Composite(绿色): Chrome的渲染引擎合成了图像层 。

识别问题

在火焰图里有很多的task,如果是耗时长的task ,右上角就有红色三角号,这是chrome自动识别的有问题的部分,点击任务,就可以在下面统计看到具体信息 。

img

最后此篇关于chromeDevTools性能分析performance的文章就讲到这里了,如果你想了解更多关于chromeDevTools性能分析performance的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com