zoukankan      html  css  js  c++  java
  • 前端性能测试工具Chrome performance

    页面加载速度慢,到底是多少秒,瓶颈在哪里?

    前端性能工具Chrome performance 结合F12,基本可以搞定。

    一、Chrome performance

    1、shift+ctrl+N进入谷歌的私密浏览模式;

    2、F12调出DevTools;

    3、点击Tab “Performance”;

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

    5、操作测试界面;

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

    7、分析报告

    蓝色(Loading):网络通信和HTML解析时间

    黄色(Scripting):JavaScript执行时间

    紫色(Rendering):渲染时间

    绿色(Painting):重绘

    灰色(system):系统花费的时间

    白色(Idle):空闲时间

    总时间-空闲时间,就是此界面显示需要的时间。

    二、F12

    如果不需要分析界面的瓶颈,也可以直接使用Tab “network” ,刷新要测试的界面,会显示下图时间:(但不会有详细的瓶颈数据)

    DOMContentLoaded:DOM树构建完成。即HTML页面由上向下解析HTML结构到末尾封闭标签</html> 。

    Load:页面加载完毕。 DOM树构建完成后,继续加载html/css 中的图片资源等外部资源,加载完成后视为页面加载完毕。

    Finish:时间是页面上所有 http 请求发送到响应完成的时间,HTTP1.0/1.1 协议限定,单个域名的请求并发量是 6 个,即Finish是所有请求(不只是XHR请求,还包括DOC,img,js,css等资源的请求)在并发量为6的限制下完成的时间。

    其实 Chrome performance 比这强大的多,有待大家自己去挖掘。

  • 相关阅读:
    SQL性能优化(不断总结)
    字符编码:区位/国标(gb2312、gbk)/机内码/ASCII/ANSI/Big5
    计算机中信息编码
    删除sybase一列报错:The 'select into' database option is not enabled for database.....
    常用Oracle函数(From OTN)
    常用正则
    剖析Windows的消息运行机制 (学习一)
    服务器响应码及解释
    了解注册表结构
    Windows消息大全收藏
  • 原文地址:https://www.cnblogs.com/lansan0701/p/11225956.html
Copyright © 2011-2022 走看看