在不断变化的网络条件下优化性能
很容易忽视您的用户在使用移动设备时遇到的网络条件。使用 DevTools 可以模拟不同的网络条件。解决全部的加载时间问题,您的用户会感谢您。
TL;DR
使用 Chrome DevTools 网络模拟器,在不影响其他标签流量的情况下模拟您网站的性能。
使用特定于您的受众网络条件的自定义配置文件。
模拟网络连接
利用网络调节,您可以在不同的网络连接(包括 Edge、3G,甚至离线)下测试网站。这样可以限制出现最大的下载和上传吞吐量(数据传输速率)。延迟时间操控会强制连接往返时间 (RTT) 出现最小延迟。
可以通过 Network 面板开启网络调节。从下拉菜单中选择要应用网络节流和延迟时间操控的连接。
提示:您还可以通过 Network conditions 抽屉式导航栏设置网络节流。
启用节流后,面板指示器会显示一个警告图标,在您位于其他面板时提醒您已启用节流。
自定义节流
DevTools 提供了许多默认条件。您可能需要添加自定义条件,以便覆盖受众的主要条件。
要添加条件,请打开下拉菜单应用条件。在 custom 标题下,找到并选择 Add... 选项。这将打开 DevTools 的 Settings 对话框,“Throttling”标签也会处于打开状态。
首先,请点击 Add custom profile 按钮。这将打开一个内联表单,用于提供配置文件条件。准确地填写表单,满足您的需求后按 Add 按钮。
您可以将鼠标悬停在条目上修改现有的自定义配置文件。悬停时,Edit 和 Delete 图标会显示在条目的右侧。
现在您可以关闭 Settings 对话框。您的新自定义配置文件会显示在 custom 标题下,用于条件选择。
打开 Network conditions 抽屉式导航栏
其他 DevTools 面板会随 Network conditions 抽屉式导航栏一起打开,您可以借此访问诸多网络功能。
从 DevTools 主菜单访问抽屉式导航栏(Main Menu > More Tools > Network Conditions)。