测试网站在网络缓慢时的表现一直是性能优化的重要部分。
以往，Chrome DevTools 允许你为整个会话全局限制网络条件，这会影响页面发出的所有请求。另一种选择是完全屏蔽特定请求。然而，这种方法存在局限：你很难在不拖慢整个网页速度的前提下，模拟并调试应用程序如何处理某个具体的慢速资源，例如响应延迟的第三方 API 或在低速连接下加载的大型图片。
这种全局节流意味着：
- 所有请求——HTML、CSS、JS、图片、字体、API 等——都会同时被减速。
- 你无法单独隔离并观察某个特定缓慢资源的影响。
- 调试诸如“如果只有这个 API 变慢会怎样？”的真实场景变得异常困难。
现实情况往往是，并非所有资源同时遭遇问题，可能仅仅是某个第三方脚本、一张图片或一个后端 API 出现性能瓶颈。
有哪些新特性？
从 Chrome 145 开始，开发者工具引入了单独请求节流功能，为开发者提供了前所未有的细粒度控制能力。
这意味着你现在可以：
- 仅让单次 API 调用的响应变慢。
- 只针对特定的图片、字体或第三方脚本进行限速。
- 对某个具体 URL 或整个域名应用自定义网络条件。
- 保持页面其他所有部分的正常加载速度不受影响。
此功能将原本位于“网络请求屏蔽”抽屉中的相关选项，整合进了一个全新且功能更全面的“请求条件”抽屉。通过单独请求节流，你可以精准地模拟资源加载缓慢的场景，而无需干扰整个网站，从而使调试过程更加高效和聚焦，这在前端性能优化实践中尤为有用。
限制或屏蔽请求
使用这个功能非常简单。打开 Chrome DevTools，切换到 Network (网络) 标签页，重新加载页面以捕获网络请求。然后，右键单击任意一个请求，在菜单中选择 “Throttle request（节流请求）”。接下来，你可以选择节流范围：
- 仅针对这个特定请求。
- 对同一域名下的所有请求生效。
之后，你可以应用现有的预设（例如 “Slow 3G”），或定义自定义的网络条件。应用后，被节流的请求在 Network 面板中会有明显的视觉标记，让你能轻松地识别哪些请求受到了影响。
注意：当你修改了请求条件，Network 面板的标签页上会显示一个警告图标。将鼠标悬停在此图标上时，会提示“请求受到限制”。在 Performance (性能) 面板的 Network 轨道中也会显示相同的注释。
请求条件抽屉
在新的请求条件抽屉式菜单中，你可以集中管理哪些请求会受到何种程度的影响。
你可以通过选择标准预设（如“Slow 3G”）或创建自定义配置文件来调整节流设置。还可以使用通配符 (*) 编辑 URL 匹配模式，将这些条件动态地应用于一组特定的资源或请求。
如果某个请求同时匹配多条规则，开发者工具将应用在列表中找到的第一条规则。你可以使用抽屉中的上下箭头按钮来调整规则的优先级，将高优先级的规则移至列表顶部。
了解哪些请求会被限制或阻止
在调试时，区分自然缓慢的请求与被人为限流的请求至关重要。当你重新加载页面时，新的节流规则便会生效。在 Network 面板中，你可以通过以下方式轻松找到受影响的请求：
- 被屏蔽的请求会以红色显示，并在状态列中标记为
(blocked:devtools)。
- 被节流的请求通常会以黄色或金色高亮显示，并且在“Time (时间)”列中会显示一个时钟图标。将鼠标悬停在该图标上，可以查看具体应用了哪种网络状况。详细信息同样会显示在请求的“Timing (时间详情)”子面板中。
限制请求会直接影响网页的性能表现。当你在记录性能分析文件时，可以将鼠标悬停在 Performance 面板的 Network 轨道中的某个请求上，弹出的提示信息会详细说明该请求所应用的网络条件。
这项功能的引入，极大地增强了开发者模拟和调试复杂网络环境的能力，让性能优化工作更加有的放矢。如果你希望与更多开发者交流此类工具的使用心得，可以前往云栈社区的相关板块进行探讨。 | 
发表于 20 小时前
|
查看: 0|
回复: 0
