在不断变化的网络条件下优化性能 | chrome F12 network

AlgoRoverPro
• 阅读 3590

在不断变化的网络条件下优化性能

很容易忽视您的用户在使用移动设备时遇到的网络条件。使用 DevTools 可以模拟不同的网络条件。解决全部的加载时间问题,您的用户会感谢您。

TL;DR

  • 使用 Chrome DevTools 网络模拟器,在不影响其他标签流量的情况下模拟您网站的性能。

  • 使用特定于您的受众网络条件的自定义配置文件。

模拟网络连接

利用网络调节,您可以在不同的网络连接(包括 Edge、3G,甚至离线)下测试网站。这样可以限制出现最大的下载和上传吞吐量(数据传输速率)。延迟时间操控会强制连接往返时间 (RTT) 出现最小延迟。

可以通过 Network 面板开启网络调节。从下拉菜单中选择要应用网络节流和延迟时间操控的连接。

在不断变化的网络条件下优化性能 | chrome F12 network

提示:您还可以通过 Network conditions 抽屉式导航栏设置网络节流。

启用节流后,面板指示器会显示一个警告图标,在您位于其他面板时提醒您已启用节流。

在不断变化的网络条件下优化性能 | chrome F12 network

自定义节流

DevTools 提供了许多默认条件。您可能需要添加自定义条件,以便覆盖受众的主要条件。

要添加条件,请打开下拉菜单应用条件。在 custom 标题下,找到并选择 Add... 选项。这将打开 DevTools 的 Settings 对话框,“Throttling”标签也会处于打开状态。

在不断变化的网络条件下优化性能 | chrome F12 network

首先,请点击 Add custom profile 按钮。这将打开一个内联表单,用于提供配置文件条件。准确地填写表单,满足您的需求后按 Add 按钮。

在不断变化的网络条件下优化性能 | chrome F12 network

您可以将鼠标悬停在条目上修改现有的自定义配置文件。悬停时,Edit 和 Delete 图标会显示在条目的右侧。

在不断变化的网络条件下优化性能 | chrome F12 network

现在您可以关闭 Settings 对话框。您的新自定义配置文件会显示在 custom 标题下,用于条件选择。

打开 Network conditions 抽屉式导航栏

其他 DevTools 面板会随 Network conditions 抽屉式导航栏一起打开,您可以借此访问诸多网络功能。

在不断变化的网络条件下优化性能 | chrome F12 network

从 DevTools 主菜单访问抽屉式导航栏(Main Menu > More Tools > Network Conditions)。

在不断变化的网络条件下优化性能 | chrome F12 network

点赞
收藏
评论区
推荐文章
AWS认证的10大工作清单(下)
通过可以从事哪些职业?6.网络专家基于云计算的高效网络,确实需要网络专家来研究其功能。作为网络专家,您需要执行诸如分析网络性能、维护网络安全、例行测试和预测问题等任务,以便排除任何问题,避免浪费时间。在企业中安装路由器、防火墙和许多其他网络系统、工具或设备也是他们的责任。AWS认证网络专家平均年薪超过5万美元。7.云安全专家迁移到云是安全企业最关心的问题之一
Stella981 Stella981
3年前
LeanCloud 十月变化
产品动态1\.商用版应用网络隔离优化方案上线,独立IP降价50%为了彻底隔离不同用户的网络访问入口,避免意外情况下的相互影响,我们在10月份上线了网络隔离优化方案,为拥有商用版应用的账户免费分配了一个独立IP(默认提供2Gbps的防护带宽),以作为账户下所有应用使用存储服务的默认入口。这一变化对有些应用已经自动生效,
新支点小星 新支点小星
1年前
CNAS中兴新支点——软件测试中的非功能测试包含哪些测试内容
软件测试中的非功能测试是指对软件产品在功能之外的其他特性进行测试,包括性能测试、可靠性测试、安全性测试、易用性测试、可维护性测试等。1、性能测试:性能测试是对软件产品在特定条件下的性能进行测试和评估。包括负载测试、强度测试、数据库容量测试等。通过模拟不同的
新支点小玉 新支点小玉
1年前
软件测试中的非功能测试包括什么?
软件测试中的非功能测试是指对软件产品在功能之外的其他特性进行测试,包括性能测试、可靠性测试、安全性测试、易用性测试、可维护性测试等。1、性能测试:性能测试是对软件产品在特定条件下的性能进行测试和评估。包括负载测试、强度测试、数据库容量测试等。通过模拟不同的
幂简集成 幂简集成
10个月前
2024年七大最佳免费货币转换API
如果您与国际客户合作,那么您需要掌握最新的货币信息。然而,汇率每天都在迅速变化,因此很难获得准确的价值。通过使用,您可以毫不费力地获得实时货币汇率。此外,它也非常容易集成到您的网络应用程序中。您只需编写几行代码即可。通过这种方式,API可以帮助您节省时间和
融云IM即时通讯 融云IM即时通讯
9个月前
融云IM干货丨推送通知的延迟问题如何解决?
解决推送通知的延迟问题,可以从以下几个方面进行优化:网络优化:切换到稳定的网络环境,尽量使用WiFi连接,避免在信号较弱的地方使用移动数据。优化网络设置,如APN设置等。关闭不必要的后台应用,它们可能会占用网络资源,导致推送延迟。推送服务配置:检查应用推送
chrony时间同步软件介绍
本文分享自天翼云开发者社区《》,作者:刘苏chrony是网络时间协议NTP的通用实现,它可以将系统时钟和NTP服务器同步。它支持在各种条件下包括间歇性的网络连接、严重阻塞的网络、不断变化的温度以及支持不连续的运行并且可以运行于虚机上。本文介绍chrony工
飞龙AI 飞龙AI
3个月前
DevEcoStudio 中使用模拟器时如何过滤日志
DevEcoStudio中使用模拟器时如何过滤日志鸿蒙核心技术鸿蒙开发者工具DevEcoStudio在HilogSettingsFilter设置Logmessage:A03d00/JSAPP当你看到不断更新的日志时,你会不会崩溃因为Nofilters模式下
燕青 燕青
1年前
Macos抓包工具:Debookee for Mac最新激活版 支持M1
具备强大的网络分析功能。它能够实时监控和分析您自己的Mac或其他设备的网络数据,支持HTTP、HTTPS、DNS、TCP、DHCP、SIP、RTP(VoIP)、IMAP协议。通过实时监控和分析网络数据,您可以更好地了解设备的网络活动和性能,及时发现和解决网