脚本宝典收集整理的这篇文章主要介绍了chrome F12 performance 性能分析,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
注: 转自 https://www.cnblogs.com/lansan0701/p/11225956.html
页面加载速度慢,到底是多少秒,瓶颈在哪里?
前端性能工具Chrome performance 结合F12,基本可以搞定。
1、shift+ctrl+N进入谷歌的私密浏览模式;
2、F12调出DevTools;
3、点击Tab “Performance”;
4、点击灰色圆点,已开始界面录制;
5、操作测试界面;
6、操作完成后点击stop按钮,开始生成测试报告;
7、分析报告
蓝色(Loading):网络通信和HTML解析时间
黄色(Scripting):JavaScript执行时间
紫色(Rendering):渲染时间
绿色(Painting):重绘
灰色(system):系统花费的时间
白色(Idle):空闲时间
总时间-空闲时间,就是此界面显示需要的时间。
如果不需要分析界面的瓶颈,也可以直接使用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 F12 performance 性能分析全部内容,希望文章能够帮你解决chrome F12 performance 性能分析所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。