条件JavaScript：仅在适当时下载

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

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

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

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

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

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

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

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

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

当创建新的Workers（Web Workers API的一部分）时，此功能特别有用。

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

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

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

// {等级：0.53（53％），收费：true ...} const {level，收费} =等待navigator.getBattery（）; //如果设备当前正在充电// //电池电量超过20％if（正在充电||电量> 0.2）{等待import（＆＃39; ./ costly-module.js＆＃39;）;}

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

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

这真的取决于JavaScript的功能。例如，如果JavaScript是：

const {quota} =等待navigator.storage.estimate（）; const fiftyMegabytesInBytes = 50 * 1e + 6; if（quota＆gt; fiftyMegabytesInBytes）{等待import（＆＃39; ./ costly-module.js＆＃39;）;}

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

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

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

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

注意：使用WiFi并不意味着快，而使用3G并不意味着慢。例如，考虑网络共享！

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

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

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

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

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

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