硅胶 技术支持 东莞网站建设,网站建好后广告是不是需要,免费网站平台,小兵cms个人网站模板Chrome 开发者工具#xff08;简称 DevTools#xff09;是一组网页制作和调试的工具#xff0c;内嵌于 Google Chrome 浏览器中。
Chrome 开发者工具有很多重要的面板#xff0c;比如与性能相关的有网络面板、Performance 面板、内存面板等#xff0c;与调试页面相关的有…Chrome 开发者工具简称 DevTools是一组网页制作和调试的工具内嵌于 Google Chrome 浏览器中。
Chrome 开发者工具有很多重要的面板比如与性能相关的有网络面板、Performance 面板、内存面板等与调试页面相关的有 Elements 面板、Sources 面板、Console 面板等。关于这 10 个面板的大致功能如下 网络面板由控制器、过滤器、抓图信息、时间线、详细列表和下载信息概要这 6 个区域构成如下图所示。
1. 控制器
其中控制器有 4 个比较重要的功能。 红色圆点的按钮表示“开始 / 暂停抓包”这个功能很常见很容易理解。“全局搜索”按钮这个功能就非常重要了可以在所有下载资源中搜索相关内容还可以快速定位到某几个你想要的文件上。Disable cache即“禁止从 Cache 中加载资源”的功能它在调试 Web 应用的时候非常有用因为开启了 Cache 会影响到网络性能测试的结果。Online 按钮是“模拟 2G/3G”功能它可以限制带宽模拟弱网情况下页面的展现情况然后你就可以根据实际展示情况来动态调整策略以便让 Web 应用更加适用于这些弱网。
2. 过滤器
网络面板中的过滤器主要就是起过滤功能。因为有时候一个页面有太多内容在详细列表区域中展示了而你可能只想查看 JavaScript 文件或者 CSS 文件这时候就可以通过过滤器模块来筛选你想要的文件类型。
3. 抓图信息
抓图信息区域可以用来分析用户等待页面加载时间内所看到的内容分析用户实际的体验情况。比如如果页面加载 1 秒多之后屏幕截图还是白屏状态这时候就需要分析是网络还是代码的问题了。勾选面板上的“Capture screenshots”即可启用屏幕截图。
4. 时间线
时间线主要用来展示 HTTP、HTTPS、WebSocket 加载的状态和时间的一个关系用于直观感受页面的加载过程。如果是多条竖线堆叠在一起那说明这些资源被同时被加载。至于具体到每个文件的加载信息还需要用到下面要讲的详细列表。
5. 详细列表
这个区域是最重要的它详细记录了每个资源从发起请求到完成请求这中间所有过程的状态以及最终请求完成的数据信息。通过该列表你就能很容易地去诊断一些网络问题。
6. 下载信息
概要下载信息概要中你要重点关注下 DOMContentLoaded 和 Load 两个事件以及这两个事件的完成时间。
DOMContentLoaded这个事件发生后说明页面已经构建好 DOM 了这意味着构建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已经下载完成了。Load说明浏览器已经加载了所有的资源图像、样式表等。
通过下载信息概要面板你可以查看触发这两个事件所花费的时间。
了解了每个资源的详细请求信息之后分析单个资源请求时间线这就涉及具体的 HTTP 请求流程了。 那详细列表中是如何表示出这个流程的呢这就要重点看下时间线面板了 第一个是 Queuing也就是排队的意思当浏览器发起一个请求的时候会有很多原因导致该请求不能被立即执行而是需要排队等待。导致请求处于排队状态的原因有很多。
首先页面中的资源是有优先级的比如 CSS、HTML、JavaScript 等都是页面中的核心文件所以优先级最高而图片、视频、音频这类资源就不是核心资源优先级就比较低。通常当后者遇到前者时就需要“让路”进入待排队状态。其次浏览器会为每个域名最多维护 6 个 TCP 连接如果发起一个 HTTP 请求时这 6 个 TCP 连接都处于忙碌状态那么这个请求就会处于排队状态。最后网络进程在为数据分配磁盘空间时新的 HTTP 请求也需要短暂地等待磁盘分配结束。
等待排队完成之后就要进入发起连接的状态了。不过在发起连接之前还有一些原因可能导致连接过程被推迟这个推迟就表现在面板中的 Stalled 上它表示停滞的意思。
这里需要额外说明的是如果你使用了代理服务器还会增加一个 Proxy Negotiation 阶段也就是代理协商阶段它表示代理服务器连接协商所用的时间不过在上图中没有体现出来因为这里我们没有使用代理服务器。
接下来就到了 Initial connection/SSL 阶段了也就是和服务器建立连接的阶段这包括了建立 TCP 连接所花费的时间不过如果你使用了 HTTPS 协议那么还需要一个额外的 SSL 握手时间这个过程主要是用来协商一些加密信息的。
和服务器建立好连接之后网络进程会准备请求数据并将其发送给网络这就是 Request sent 阶段。通常这个阶段非常快因为只需要把浏览器缓冲区的数据发送出去就结束了并不需要判断服务器是否接收到了所以这个时间通常不到 1 毫秒。
数据发送出去了接下来就是等待接收服务器第一个字节的数据这个阶段称为 Waiting (TTFB)通常也称为“第一字节时间”。 TTFB 是反映服务端响应速度的重要指标对服务器来说TTFB 时间越短就说明服务器响应越快。
接收到第一个字节之后进入陆续接收完整数据的阶段也就是 Content Download 阶段这意味着从第一字节时间到接收到全部响应数据所用的时间。
如何优化时间线上耗时项
1. 排队Queuing时间过久
排队时间过久大概率是由浏览器为每个域名最多维护 6 个连接导致的。那么基于这个原因你就可以让 1 个站点下面的资源放在多个域名下面比如放到 3 个域名下面这样就可以同时支持 18 个连接了这种方案称为域名分片技术。除了域名分片技术外还可以把站点升级到 HTTP2因为 HTTP2 已经没有每个域名最多维护 6 个 TCP 连接的限制了。
2. 第一字节时间TTFB时间过久
这可能的原因有如下
服务器生成页面数据的时间过久。对于动态网页来说服务器收到用户打开一个页面的请求时首先要从数据库中读取该页面需要的数据然后把这些数据传入到模板中模板渲染后再返回给用户。服务器在处理这个数据的过程中可能某个环节会出问题。网络的原因。比如使用了低带宽的服务器或者本来用的是电信的服务器可联通的网络用户要来访问你的服务器这样也会拖慢网速。发送请求头时带上了多余的用户信息。比如一些不必要的 Cookie 信息服务器接收到这些 Cookie 信息之后可能需要对每一项都做处理这样就加大了服务器的处理时长。
面对第一种服务器的问题你可以想办法去提高服务器的处理速度比如通过增加各种缓存的技术针对第二种网络问题你可以使用 CDN 来缓存一些静态文件至于第三种你在发送请求时就去尽可能地减少一些不必要的 Cookie 数据信息。
3. Content Download 时间过久
如果单个请求的 Content Download 花费了大量时间有可能是字节数太多的原因导致的。这时候你就需要减少文件大小比如压缩、去掉源码中不必要的注释等方法。 此文章为2月Day13学习笔记内容来源于极客时间《浏览器工作原理与实践》推荐该课程。
