chrome Dev-Network教程2

加载时序

导读

了解网络下载资源的阶段至关重要。这是修复加载问题的基础。所有网络请求都被视为资源。当它们通过网络检索时，分为不同的生命周期。Network(网络)面板使用的Resource Timing API和提供给开发者的API是一样的。

TL;DR

  • 了解资源时序的阶段。
  • 知道每个阶段提供给Resource Timing(资源时序)API。
  • 在时间轴图表中识别性能问题的不同指示。如连续的透明条或大块绿色。

资源获取的过程

注意: 当使用跨源资源的Resource Timing API时， 请确保所有资源都有CORS头信息。

image

Resource Timing API提供了关于每个单独资源接收时间的详细信息。 请求生命周期的主要阶段是：

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

诊断网络问题

通过Network(网络)面板可以发现许多可能的问题。要找到这些问题需要很好地了解客户端和服务端之间的通信以及协议的限制。

排队或停止阻塞

image
最常见的问题是很多个请求排队或被阻塞。这表示从单个客户端检索的资源太多。在HTTP 1.0/1.1连接协议中，Chrome限制每个域名最多执行6个TCP连接。如果您一次请求十二个资源，前6个将开始，后6个将排队。一旦其中一个请求完成，队列中的第一个请求项目将开始其请求过程。

优化性能

TL;DR

在不影响其他标签的流量的情况下，使用Chrome DevTools网络模拟器来评估网站的性能。
使用自定义配置文件，配置特定的受众群体网络条件。

模拟网络连接

Network Conditioning(网络调节)允许您在各种网络环境中测试您的网站，包括Edge，3G，甚至离线。 它限制最大下载和上传流量（数据传输速率）。在链接round-trip时间上强制延迟。
image

Network Conditioning(网络调节)通过Network(网络)面板打开。从下拉列表中选择一个连接，可以应用网络节流。

提示：您也可以通过Network conditions(网络条件)抽屉式窗格设置网络调节。

当网络节流开启后，Network(网络)面板名字旁会出现一个警告图标。这是为了当您在其他面板中时给你一个提醒：当前网络节流已经启用。

自定义网络节流

DevTools提供了非常实用的默认条件。如果你要覆盖原来的条件，您可能需要添加自定义条件。

要添加条件，在Network(网络)面板中点击打开网络节流的下拉列表。
image

  1. 在custom(自定义)选项组下找到并选择Add...(添加)选项。 这将打开DevTools Settings(设置)对话框中的Throttling(节流)选项卡。
  2. 单击Add custom profile(添加自定义配置)按钮。这将打开一个编辑配置的内联表单。 根据你的需求填写表单，然后按Add(添加)按钮。
  3. 您可以将鼠标悬停条目上来修改现有的自定义配置。 将鼠标悬停条目上时，Edit(编辑)和Delete(删除)图标会显示在条目的右侧。
  4. 现在您可以关闭 Settings(设置)对话框。 您的新自定义配置将显示在custom(自定义)选项组下，可以选择使用它作为网络条件。
  5. 在DevTools主菜单访问抽屉式窗格（Main Menu(主菜单) > More Tools(更多工具) > Network Conditions(网络条件)）
posted @ 2021-07-04 14:16  君*邪  阅读(260)  评论(0)    收藏  举报