浏览器开发者工具

概览

模块

1. 控制器

2. 过滤器

• 过滤筛选性能。
• 通过过滤器模块来筛选你想要的文件类型。

3. 抓图信息

• 用来剖析用户期待页面加载工夫内所看到的内容，剖析用户理论的体验状况
• 勾选面板上的“Capture screenshots”即可启用屏幕截图。

4. 工夫线

• 用来展现 HTTP、HTTPS、WebSocket 加载的状态和工夫的一个关系
• 用于直观感触页面的加载过程。
• 如果是多条竖线重叠在一起，那阐明这些资源被同时被加载。

5. 具体列表

• 具体记录了每个资源从发动申请到实现申请这两头所有过程的状态，
• 以及最终申请实现的数据信息。
• 通过该列表，你就能很容易地去诊断一些网络问题。

6. 下载信息概要

下载信息概要中，你要重点关注下 DOMContentLoaded 和 Load 两个事件，以及这两个事件的实现工夫。

• DOMContentLoaded，这个事件产生后，阐明页面曾经构建好 DOM 了，这意味着构建 DOM 所须要的 HTML 文件、JavaScript 文件、CSS 文件都曾经下载实现了。
• Load，阐明浏览器曾经加载了所有的资源（图像、样式表等）。

具体列表

1. 属性

2. 详细信息

3. 单个资源的工夫线

优化工夫线上耗时我的项目

参考

极客工夫 -《浏览器原理》

原文地址

wolai
掘金