美文网首页
初探Chrome的性能分析工具--Performance

初探Chrome的性能分析工具--Performance

作者: lixiao_7b22 | 来源:发表于2018-08-06 10:17 被阅读157次
    瑶瑶问:会使用chrome进行网页性能分析吗?
    我 摇头。。。
    

    今天花时间在网上查找资料了解了一下,希望之后在自己的项目中也能找机会运用一下。这次简单记录一下Performance的用法,之后有具体应用将持续更新

    Performance

    如上图,从上到下分别为4个部分
    1:工具栏,包含录制,刷新页面分析,清除结果等一系列操作工具
    2:Overview总览图,高度概括随时间线的变动,包括FPS(FPS(frames per second)是用来分析动画的一个主要性能指标。能保持在60的FPS的话,那么用户体验就是不错的。),CPUNET
    3:火焰图,从不同的角度分析框选区域 。例如:NetworkFrames,Interactions, Main
    4:Details:精确到毫秒级的分析,以及按调用层级,事件分类的整理

    注意,在2,3区域里:

    1. 灰色虚线表示一,通过两帧之间的绿色区域的运算时间,可以求得当前的FPS(事实上当你鼠标放在绿色条上时会出现类似‘78.8ms ~ 13fps’的字样);
    2. 黄色虚线会有 FMP at ***ms’的字样,经过查询,暂确定为[ first meaning paint ],即首次有效绘制;而这条线会紧跟paint之后,并在composite之前。
    3. 蓝色的虚线表示DOMContentLoaded事件
    4. 红色的虚线表示load事件
    5. 绿色的虚线为 first paint事件

    network里面 :
    1. HTML 文件为蓝色
    2. 脚本为黄色
    3. 样式表为紫色
    4. 媒体文件为绿色
    5. 其他资源为灰色

    参考:developers.google.com全新Chrome Devtool Performance使用指南

    相关文章

      网友评论

          本文标题:初探Chrome的性能分析工具--Performance

          本文链接:https://www.haomeiwen.com/subject/ryazmftx.html