乐趣区

关于浏览器:浏览器开发者工具之网络面板一

浏览器开发者工具

概览

模块

1. 控制器

2. 过滤器

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

3. 抓图信息

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

4. 工夫线

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

5. 具体列表

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

6. 下载信息概要

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

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

具体列表

1. 属性

2. 详细信息

3. 单个资源的工夫线

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

参考

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

原文地址

wolai
掘金

退出移动版