基于网络质量的自适应服务 All In One

自适应服务

当加载构成页面主要内容的资源时，根据用户的设备或网络条件按需获取不同的资源会是一个有效做法。您可以使用网络状况 API、设备内存 API 和硬件并发 API 来实现这一做法。

如果您有对初始渲染十分关键的大型资产，那么您可以根据用户的连接或设备采用同一资源的不同变体。

if (navigator.connection && navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // 加载视频
  } else {
    // 加载图像
  }
}

navigator.connection.effectiveType：有效连接类型
navigator.connection.saveData：启用/禁用数据保护程序
navigator.hardwareConcurrency：CPU 核心数
navigator.deviceMemory：设备内存

refs

https://web.dev/optimize-lcp/#-7

https://web.dev/adaptive-serving-based-on-network-quality/

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载