前端性能测试工具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 比这强大的多,有待大家自己去挖掘。
前端性能测试工具Chrome performance的更多相关文章
- [原创]H5前端性能测试工具介绍
[原创H5前端性能测试工具介绍 一 网络抓包工具 网络抓包工具选择原则,可以捕获网络请求,抓取具体请求信息流,同时可以针对网络请包进行修改或拦截: 1.Fiddler(推荐) 2.Charles(推荐 ...
- sitespeedio前端性能测试工具介绍
很久没有写博客了,今天给大家介绍一款比较好用的前端性能测试工具. sitespeedio简介: sitespeed.io是Jonathan Lee发布的一款可监视和衡量网站前端性能的开源工具. 1.开 ...
- 利用Docker安装Web前端性能测试工具Sitespeed.io
目录结构 一.Sitespeed.io概述 1.Sitespeed.io简介 2.Sitespeed.io使用场景 二.Sitespeed.io的安装和使用 1.安装Sitespeed.io 2.连接 ...
- 两款较好的Web前端性能测试工具
前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说. 一.前端性能测试是什么 前端性能测试对象主要包括: HTML.CSS.JS ...
- 【转】两款 Web 前端性能测试工具
前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说. 一.前端性能测试是什么? 前端性能测试对象主要包括: HTML.CSS.J ...
- Docker安装Web前端性能测试工具Sitespeed.io
一.Sitespeed.io概述 1.Sitespeed.io简介 Sitespeed.io:是一款开源的Web性能测试工具,用来衡量Web网站的综合性能,帮助开发和测试人员分析网页的加载速度和渲染性 ...
- 前端性能测试工具 : dynaTrace Ajax (还没写完)
今天开始写这个工具, #什么是dynaTrace Ajax? 随着 jQuery.Dojo.YUI 等框架的兴起让构建 Web2.0 应用更加容易,但随之带来的定位等应用问题也越来越难,尤其是与性能相 ...
- 前端性能测试工具之PageSpeed Insights
谷歌开发的一个免费的网页分析工具,在地址栏中输入被分析的网站 url 地址,点击分析 地址:https://developers.google.cn/speed/pagespeed/insights/ ...
- 前端开发神一样的工具chrome调试技巧
前端开发神一样的工具chrome调试技巧 文章来自 Colin-UED // 与您分享前端开发知识 主页 Javascript HTML CSS NodeJs User Experience FE ...
随机推荐
- Golang安装和配置
Golang安装和配置 Linux Golang 下载源码,解压. # /home/superpika为你的主目录 mkdir /home/superpika/go mkdir /home/super ...
- java redisUtils工具类很全
GitHub地址:https://github.com/whvcse/RedisUtil redisUtils工具类: package com.citydo.utils; import org.spr ...
- Windows中的库编程
Windows操作系统中,库分为动态链接库(dll)和静态链接库(lib) 动态库是Windows中实现代码共享的一种方式.它是一个二进制式文件,不可单独运行,需要调用方调用才能运行.在Windows ...
- .NET Framework 4安装问题
1.安装时,系统提示:运行此安装程序之前,必须安装 32 位 Windows 映像处理组件(WIC). http://www.microsoft.com/downloads/zh-cn/details ...
- axios 内部原理学习记录
前提:一次面试被问到了,axios有什么特点,对比一下ajax.答的很不满意. axios是一个基于Promise的http请求库,可用于浏览器和 Node.可以说是目前最为常用的http库,有必要了 ...
- 在浏览器中输入www.taobao.com后执行的全部过程
>>>点击网址后,应用层的DNS协议会将网址解析为IP地址: DNS查找过程: 1. 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程 ...
- Linux Centos7 网络设置UUID号的修改方法
1.生成一个UUID [root@localhost ~]# uuidgen ens33 223bdb47-2fed-4773-b984-5f5733e61904 2.UUID号写入网络配置文件ifc ...
- lombok自定义扩展实践
lombok是一款能够在java代码编译阶段改变代码的插件.比如生成setter和getter方法,生成log类变量等,能够简化一些特定的模版式代码.本文将以实现一个基于特定注解生成日志代码的方式,简 ...
- 回归分析特征选择(包括Stepwise算法) python 实现
# -*- coding: utf-8 -*-"""Created on Sat Aug 18 16:23:17 2018 @author: acadsoc"& ...
- spring框架中的一个字符串的工具类
stringutils.hasText("字符串") 如果字符串里面的值为null, "", " ",那么返回值为false:否则为tr ...