专注于
IT技术和业内交流

Chrome DevTools — 在不同网络条件下优化性能

用户在手机上的网络条件很容易被忽略。用DevTool模拟不同的网络条件,解决加载慢的问题,你的用户就会感谢你。

模拟网络连接

网络仿真可以测试站点在不同网络条件下(包括Edge,3G,或者离线)的情况。它可以限制上传和下载的吞吐量,并且会模拟一个往返时延。

在Network面板可以开启网络仿真,在下拉列表里选择一个网络条件即可。

Select Network Throttle

提示: 你可以在Network conditions draws里修改网络阀值。

当网络节流阀开启后,Network面板名字旁会出现一个警告符号。

Network Panel Selector With Warning Indicator

自定义网络条件

custom下选择Add…,弹出如下窗口:

Throttle Settings Index

点击Add custom profile按钮,填入需要的阀值后,点击Add按钮即可增加一种网络条件。

Throttle Settings Add Custom Throttle

移动鼠标到自定义的网络条件上,右边会出现编辑和删除按钮。

Throttle Settings Modify Custom Entry

添加好自定义网络条件后,就可以在Network面板上选择使用它了。

打开network conditions drawer

在其它面板打开Network conditions drawer也可以访问网络功能。

the network conditions drawer

从DevTools主菜单访问drawer(Main Menu > More Tools >
Network Conditions).

opening the network conditions drawer

本文由向波翻译、@海欧校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome DevTools — 在不同网络条件下优化性能

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们