chrome如何分析页面加载时间

以chrome为例，开发者模式中跟页面加载时间相关的是network面板。

network 面板的 DOMContentLoaded和load

打开Network面板后，刷新页面，面板底部有这三个时间：

  • finish：页面最后一个请求截止的时间，如果页面加载完成后，触发了ajax请求，那么该时间会变更。
  • DOMContentLoaded：dom内容加载并解析完成的时间，即页面白屏时间
  • load：页面所有的资源（图片、音频、视频等）加载完成的时间。

当页面的初始的标记被解析完成时，会触发DOMContentLoaded，它在Network面板上的两个位置显示：

  • 在Overview窗格中的蓝色垂直线表示这个事件。
  • 在Summary窗格中，可以查看这个事件的确切耗时。

当页面完全加载时触发load事件，它显示在三个地方：

  • 在Overview窗格的红色垂直线表示这个事件。
  • 在Request Table中的红色垂直线也表示这个事件。
  • 在Summary中，可以查看该事件的确切时间。

查看网络时序

点击Timing选项卡可以查看单个资源的请求生命周期的明细分类。

  • Queuing 队列
  • Stalled 停滞
  • DNS lookup DNS查找
  • initial connection 初始连接
  • SSL handshake SSL握手
  • Request sent 请求发送
  • Waiting 等待，具体指到开始下载第一个字节的时间（TTFB：time for first byte）
  • Content Download 内容下载

资源加载时序

所有网络请求都被视为资源，当它们通过网络检索时，分为不同的生命周期。

一个完整请求生命周期的主要阶段如下

  • Redirect 重定向
    • 立即开始 startTime
    • 如果发生重定向，redirectStart也会开始计时
    • 如果重定向发生在此阶段结束，那么redirectEnd被采用
  • App Cache 应用程序缓存
    • 如果浏览器有缓存，将采用fetchStart时间
  • DNS
    • domainLookupStart 记录DNS请求开始时间
    • domainLookupEnd记录DNS请求结束的时间
  • TCP
    • connectStart 记录开始连接到服务器的时间
    • 如果用了TLS或者SSL，secureConnectionStart记录开始连接时间
    • connectEnd记录连接完毕时间
  • Request 请求
    • requestStart记录请求发生到服务器的时间
  • Response 响应
    • responeseStart记录最开始的响应时间
    • responseEnd记录响应结束时间

timing面板信息详解

  • Queuing 排队 如果一个请求排队，则表明：
    • 请求被渲染引擎推迟，因为它比关键资源（如脚本/样式）的优先级低。例如，images。
    • 这个请求被搁置，在等待一个即将被释放的不可用的TCP socket
    • 这个请求被搁置，因为浏览器限制。在HTTP 1协议中，每个源上只能有6个TCP连接。
    • 正在生成磁盘缓存条目（通常非常快）
  • Stalled/Blocking 停止/阻塞
    • 发送请求之前的等待时间。它可能因为进入队列的任意原因而被阻塞。这个时间包括代理协商的时间。
  • Proxy Negotiation 代理协商
    • 与代理服务器连接协商花费的时间
  • DNS Lookup DNS查找
    • 执行DNS查找所用的时间。页面上的每个新域都需要完整的往返（roundtrip）才能进行DNS查找。
  • Initial Connection/Connecting 初始连接/连接
    • 连接连接所需的时间，包括TCP握手/重试和协商SSL。
  • SSL
    • 完成SSL握手所用的时间
  • Request Sent/Sending 请求已经发送/正在发送
    • 发出网络请求所花费的时间，通常是几分之一毫秒
  • Waiting（TTFB） 等待
    • 等待初始响应所花费的时间。这个时间包含：等待服务器传递响应花费的时间、捕获到服务器发送数据的延迟时间
  • Content Download/Downloading 内容下载/下载
    • 接收响应数据所花费的时间：从接收到第一个字节开始，到下载完最后一个字节结束。

Network面板诊断网络问题

  1. 排队或者阻塞：很多个请求队列被阻塞。这表示单个客户端检索的资源太多。在HTTP 1.0/1.1连接协议中，Chrome限制每个域名最多执行6个TCP连接。

    • 解决方法：分域，即用多个字域名提供服务资源，将资源拆分到多个子域中，均匀分配。
    • HTTP2，TCP连接支持多路复用，消除了HTTP 1的6个连接限制，并且可以通过单个连接同时传输多个资源。

  2. 接收到第一个字节的时间很慢：很多绿色。

    • 解决方法：1、尽量减少网络连接。理想情况下，在本地托管应用程序（部署在本地）。2、优化应用程序的响应速度

  3. 加载缓慢：很多蓝色。

    • 解决方法：减少响应的字节。例如，优化图片。

参考：
https://www.html.cn/doc/chrome-devtools/network-performance/resource-loading/
https://www.jianshu.com/p/24b93b13e5a9

posted @ 2020-06-14 16:48  AmyZYX  阅读(19026)  评论(0)  编辑  收藏  举报