負責，有條件的加載

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中文網其他相關文章！