chrome F12 performance 性能分析
2022/1/1 23:07:17
本文主要是介绍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 F12 performance 性能分析的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-29Elasticsearch慢查询日志配置
- 2024-05-29揭秘华为如此多成功项目的产品关键——Charter模板
- 2024-05-29海外IDC业务拓展的7大挑战
- 2024-05-29InLine Chat功能优化对标Github Copilot,CodeGeeX带来更高效、更直观的编程体验!
- 2024-05-29CodeGeeX 智能编程助手 6 项功能升级,在Visual Studio插件市场霸榜2周!
- 2024-05-29AutoMQ 生态集成 Apache Doris
- 2024-05-292024年IDC行业的深度挖掘:机遇、挑战与未来展望
- 2024-05-29五款扩展组件齐发 —— Volcano、Keda、Crane-scheduler 等,邀你体验
- 2024-05-29AutoMQ 对象存储数据高效组织的秘密: Compaction
- 2024-05-29活动预告|来 GIAC 大会听大数据降本利器:AutoMQ 基于云原生重新设计的 Kafka