zoukankan      html  css  js  c++  java
  • Chrome自带工具Performance

    最近接到一个新需求,测试前端页面在浏览器中的运行性能,在网上一通找,最后锁定了Chrome自带工具Performance,原因很简单:免费并可以解决问题

    之前也试过一个APM平台,总体感觉是报告数据比较直观,统计维度比较广,但是感觉测试结果并不准确(与Performance对比),不过也可能是自己没有找到正确的使用方法。

    第一步:F12,打开开发者工具,点击Performance标签

    第二步:点击右上角的小齿轮图标,进行设置

    在这个设置中,可以模拟较差的网络环境,也可以模拟较差的cpu速度,比如手机环境中,cpu就没有pc端的快,勾选Screenshots复选框,录制过程可以生成截图

    第三步:点击录制按钮,并且快速在浏览器中输入要测试的页面地址,如果是登录后的某个页面,建议先登录,再点录制

    第四步:等待页面全部加载完成,点击stop按钮,页面会立即生成报告

     

    第五步:分析报告中的各个参数

    这部分建议参考:https://zhuanlan.zhihu.com/p/29879682,写得非常详细,不再赘述

    最后补充几点:

    1、饼图中的各个色块代表什么意思:

    蓝色(Loading):网络通信和HTML解析
    黄色(Scripting):JavaScript执行
    紫色(Rendering):样式计算和布局,即重排
    绿色(Painting):重绘
    灰色(other):其它事件花费的时间
    白色(Idle):空闲时间

    其中,紫色+绿色就是我们常说的渲染时间

    2、ajax请求回来的数据加载到页面上,是算渲染时间,还是js执行时间

    应该算在js执行时间中,请看下面具体事件说明

    其他事件说明请参考:

     3、调用fps实时查看面板工具方法

    在开发者工具面板右上角,点击竖着的三个小圆点,选择more tools,然后选择Rendering

    然后勾选FPS meter,最小化开发者工具,在页面右上角就可以看到了

    以上内容参考如下:

    https://segmentfault.com/a/1190000003991459#articleHeader1

    https://zhuanlan.zhihu.com/p/29879682

  • 相关阅读:
    接口测试基础operation
    关于Fiddler常见问题之一
    接口测试用例编写规则
    Codeforces 959E. Mahmoud and Ehab and the xor-MST 思路:找规律题,时间复杂度O(log(n))
    Codeforces 930A. Peculiar apple-tree (dfs)
    51nod 2020 排序相减(暴力解法)
    《汇编语言(第三版)》pushf 和 popf 指令,以及标志寄存器在 Debug 中的表示
    DF标志和串传送指令
    《汇编语言(第三版)》cmp指令
    《汇编语言(第三版)》标志寄存器
  • 原文地址:https://www.cnblogs.com/tjtest/p/9361593.html
Copyright © 2011-2022 走看看