负责，有条件的加载

Polypane 博客上有一篇优秀的文章（虽然没有署名，但很可能是 Kilian Valkhof 撰写的），名为《使用 prefers-reduced-data 创建网站》，讨论了 prefers-reduced-data 媒体查询。目前浏览器尚不支持，但最终可以在 CSS 中使用它来减少数据使用量。文章中提供了一个示例，仅当用户未指定低数据使用偏好时才加载网络字体：

@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url('Inter-roman.var.woff2') format('woff2');
  }
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
               Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

这是一个不错的模式。它与辅助功能和 prefers-reduced-motion 媒体查询的精神相同。也可以从 JavaScript 中使用两者。

同样思路的还有 Umar Hansa 最近的博客文章《JavaScript：条件式 JavaScript，仅在适当的时候下载》。文章中有很多示例，但要点是 navigator 对象包含有关设备、互联网连接和用户偏好的信息，因此可以将其与 ES 模块结合使用，以在无需过多代码的情况下有条件地加载资源：

if (navigator.connection.saveData === false) {
    await import('./costly-module.js');
}

如果您对所有这些想法感兴趣，可以深入研究 Jeremy Wagner 从这里开始的关于负责任 JavaScript 的系列文章。

以上是负责，有条件的加载的详细内容。更多信息请关注PHP中文网其他相关文章！