共计 517 个字符,预计需要花费 2 分钟才能阅读完成。
浏览器开发者工具
概览
模块
1. 控制器
2. 过滤器
- 过滤筛选性能。
- 通过过滤器模块来筛选你想要的文件类型。
3. 抓图信息
- 用来剖析用户期待页面加载工夫内所看到的内容,剖析用户理论的体验状况
- 勾选面板上的“Capture screenshots”即可启用屏幕截图。
4. 工夫线
- 用来展现 HTTP、HTTPS、WebSocket 加载的状态和工夫的一个关系
- 用于直观感触页面的加载过程。
- 如果是多条竖线重叠在一起,那阐明这些资源被同时被加载。
5. 具体列表
- 具体记录了每个资源从发动申请到实现申请这两头所有过程的状态,
- 以及最终申请实现的数据信息。
- 通过该列表,你就能很容易地去诊断一些网络问题。
6. 下载信息概要
下载信息概要中,你要重点关注下 DOMContentLoaded 和 Load 两个事件,以及这两个事件的实现工夫。
- DOMContentLoaded,这个事件产生后,阐明页面曾经构建好 DOM 了,这意味着构建 DOM 所须要的 HTML 文件、JavaScript 文件、CSS 文件都曾经下载实现了。
- Load,阐明浏览器曾经加载了所有的资源(图像、样式表等)。
具体列表
1. 属性
2. 详细信息
3. 单个资源的工夫线
优化工夫线上耗时我的项目
参考
极客工夫 -《浏览器原理》
原文地址
wolai
掘金
正文完