chrome浏览器是非常强大的,我用它自带的监控基本就能分析出来问题,开发者工具中有个performance选项
点进入之后点击下图的红色按钮(没点击之前是灰色的)开始录制,recode按钮变为红色,执行页面交互,再次点击Record停止录制。完成录制后,开发者工具会猜测哪一部分记录最相关,并自动缩放到那一部分
主要有4方面:(对照下图)
1.控制按钮。
2.overview。页面性能的高级汇总(FPS:帧率,CPU:CPU占用,NET:网络请求)
3.火焰图。CPU堆叠追踪的可视化(左侧名称是主线程的各种事件,Network:网络请求详细情况)
4.数据统计。以图表的形式汇总数据(summary:统计报表,Bottom-Up:事件时长顺序,Call Tree:事件调用顺序,Event log:事件发生的先后顺序)
颜色表示:HTML 文件为蓝色,脚本为黄色,样式表为紫色,媒体文件为绿色,其他资源为灰色
3.火焰图
在火焰图上看到一到三条垂直的虚线。
蓝线::DOMContentLoaded 事件。
绿线:首次绘制的时间。
红线: load