其他分享
首页 > 其他分享> > chrome F12 performance 性能分析

chrome F12 performance 性能分析

作者:互联网

注: 转自 https://www.cnblogs.com/lansan0701/p/11225956.html

 

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

前端性能工具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,HTML,时间,F12,performance,页面,加载
来源: https://www.cnblogs.com/Avicii2018/p/15756356.html