专栏文章 前端性能测试工具 Chrome performance

飞天小子的性能课堂 · 2020年05月25日 · 最后由 AllenGuo 回复于 2020年05月28日 · 551 次阅读

性能答疑 QQ 群:697244251

前端性能测试

什么是前端性能测试?打开一个网页,或者一个 app,首页加载的速度直接决定了后续用户是否会继续使用。例如我打开一个 H5 页面超过了 10s,那下一步的操作肯定是卸载。

前端性能测试工具 Chrome performance

Chrome performance
1、F12 调出 DevTools;
2、点击 “Performance”;

3、点击灰色圆点,开始界面录制;

4、操作完成后点击 stop 按钮,开始生成测试报告;

视图区域


1:FPS。每秒帧数。绿色竖线越高,FPS 越高。FPS 图表上的红色块表示长时间帧,很可能会出现卡顿。
2:CPU。CPU 资源。此面积图指示消耗 CPU 资源的事件类型
3:NET。每条彩色横杠表示一种资源。横杠越长,检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间(从请求资源到第一个字节下载完成的时间)
在视图区可以看到三条垂直的虚线。
蓝线::DOMContentLoaded 事件。
绿线:首次绘制的时间。
红线: load 时间。

时间拆分区域


蓝色 (Loading):网络通信和 HTML 解析时间
黄色 (Scripting):JavaScript 执行时间
紫色 (Rendering):渲染时间
绿色 (Painting):重绘
灰色 (system):系统消耗的时间
白色 (Idle):空闲时间
总时间 - 空闲时间,就是前端完全展示需要的时间。我们也称之为首屏时间。这是一个很重要的前端性能指标!!!

前端性能关键指标

白屏时间:用户首次看到网页有内容的时间,即第一次渲染流程完成时间。
首屏时间:用户看到第一屏,即整个网页顶部大小为当前窗口的区域,显示完整的时间。尽量让它满足一秒钟法则。
首资源下载时间:从开始下载到第一个资源均下载完成的时间,不包括页面绘制时间。
总资源下载时间:从开始下载到所有资源均下载完成的时间,不包括页面绘制时间。
用户可操作时间:从页面开始加载到用户操作可响应的时间。
FPS(流畅度):应该重点关注帧率,防止出现页面卡顿。

h5 页面渲染流程

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 2 条回复 时间 点赞
1楼 已删除

可以模拟,可以远程连接真机

可以介绍一下如何真机测试吗?

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册