条件JavaScript:仅在适当时下载

2020-12-18 16:13:29

在本文中,我想分享一些技术,您可以使用这些技术来选择性地下载/执行JavaScript之类的资源。

例如,如果用户设备没有太多的RAM,则可以决定跳过特定JavaScript资源的下载(以及解析和执行成本)。

注意:我不会指定您应尽量减少使用JavaScript的确切时间。最终取决于您的用例。

如果我在WebGL中构建游戏,则无论navigator.deviceMemory如何,都可能会加载文件。

如果我正在构建Wikipedia,则可能确实会跳过基于navigator.deviceMemory + navigator.getBattery()+ navigator.connection.downlink的一些JavaScript的加载。

浏览器支持仅限于基于Chromium的浏览器,根据caniuse的说法,它占全球使用情况统计的70%。如果navigator.deviceMemory未定义,则可以考虑加载JavaScript。

Web平台充满了隐藏的功能。原来您可以在服务器上获得此信息!

浏览器可以发送网络请求标头,这意味着您的服务器可以决定最合适的资源以向下发送。使用此< meta>在HTML中标记以激活此功能:

逻辑处理器内核的数量可用于测量可以立即有效运行的线程数量,而无需上下文切换。

当创建新的Workers(Web Workers API的一部分)时,此功能特别有用。

我们都去过那里。电池电量不足,不用充电器,您便开始清除应用程序,希望4%的续航时间持续下去。

具有JavaScript的页面比没有JavaScript的页面消耗更多的电量-是的,CSS和图像也是如此。

网络下载,解析和执行的费用肯定会消耗电池,但是请不要忘记JavaScript能够执行的各种任务,例如,创建长时间运行的计时器。

// {等级:0.53(53%),收费:true ...} const {level,收费} =等待navigator.getBattery(); //如果设备当前正在充电// //电池电量超过20%if(正在充电||电量> 0.2){等待import(' ./ costly-module.js');}

您还可以获得充电时间和放电时间,在某些情况下,充电时间和放电时间可能比当前水平更有价值。

浏览器支持似乎仅限于基于Chromium的浏览器。有趣的是,由于隐私问题(又名指纹🖐🏼️)在Firefox中将其删除。

这真的取决于JavaScript的功能。例如,如果JavaScript是:

const {quota} =等待navigator.storage.estimate(); const fiftyMegabytesInBytes = 50 * 1e + 6; if(quota> fiftyMegabytesInBytes){等待import(' ./ costly-module.js');}

提示:可以在DevTools中模拟网络连接类型。在我的ModernDevTools.com课程中学习DevTools。

在这一点上,您可以说跳过跳过任何可选资源(不仅仅是JavaScript)也是有效的。

navigator.connection对象提供有关网络的一些信息。例如。下行属性为您提供每秒兆位的带宽。往返时间以毫秒为单位

您如何使用此API高度取决于您的用例。但例如,如果navigator.connection.downlink较低,则可以下载较小的资源。在理想情况下,此设置将是可自定义的(通过您的网页UI)。

注意:使用WiFi并不意味着快,而使用3G并不意味着慢。例如,考虑网络共享!

您还可以通过网络请求标头的形式在服务器上获取某些网络信息。

现在,后续请求具有请求标头:下行链路:例如6。您还可以使用content =" ECT"获取有效连接类型作为网络请求标头。

尽管您可以根据网络信息(例如往返时间和连接类型)推断上下文,但saveData属性指出了设备偏好设置,以减少数据使用量。

这在服务器端可用(作为客户端提示),并且在某些时候应作为CSS媒体功能使用。

减少下载编码严重的图像(例如AVIF)-这可能会消耗大量电池。

减少任何类型的网络资源的下载-这可能会使网络连接拥挤。 如果您想了解此类内容的最新信息,请订阅此开发技巧邮件列表。 如果您对我的更深入的写作感兴趣,请访问我的博客。