chrome 浏览器开发者工具:网络面板
1.控制器
2. 过滤器
- 过滤筛选功能。
- 通过过滤器模块来筛选你想要的文件类型。
3. 抓图信息
- 用来分析用户等待页面加载时间内所看到的内容,分析用户实际的体验情况
- 勾选面板上的“Capture screenshots”即可启用屏幕截图。
4. 时间线
- 用来展示 HTTP、HTTPS、WebSocket 加载的状态和时间的一个关系
- 用于直观感受页面的加载过程。
- 如果是多条竖线堆叠在一起,那说明这些资源被同时被加载。
5. 详细列表
- 详细记录了每个资源从发起请求到完成请求这中间所有过程的状态,
- 以及最终请求完成的数据信息。
- 通过该列表,你就能很容易地去诊断一些网络问题。
6. 下载信息概要
重点关注下 DOMContentLoaded
和 Load
两个事件,以及这两个事件的完成时间。
- DOMContentLoaded,这个事件发生后,说明页面已经构建好 DOM 了,这意味着构建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已经下载完成了。
- Load,说明浏览器已经加载了所有的资源(图像、样式表等)。
7. 单个资源的时间线
因此,可以根据这些来优化时间线上耗时项目:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfjhbc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01