苹果网站如何根据用户网络速度展示不同内容？

苹果官网这类大型站点，会通过几种务实的方式检测用户的网络速度，以此调整内容加载策略，优化用户体验：

• 固定小资源加载测速
  页面初始化阶段，请求一个已知大小的小型静态资源（比如几KB的图标、空脚本文件），用浏览器的performance API记录从请求发起至资源完成加载的耗时，再通过「文件大小/耗时」计算出大致的下行速度。比如苹果官网会在头部加载一个极小的品牌图标，同时完成首次测速。
  简化代码示例：

  // 监听资源加载完成事件
  window.addEventListener('load', () => {
    const resource = performance.getEntriesByName('/static/small-icon.png')[0];
    const loadTime = resource.responseEnd - resource.requestStart;
    const fileSizeKB = resource.transferSize / 1024;
    const speedMbps = (fileSizeKB * 8) / loadTime; // 转换为Mbps单位
  });
  

• 动态梯度资源测试
  先加载低分辨率的资源（比如产品缩略图），同时基于首次测速结果，决定是否加载更高清的资源。比如如果测出用户网速超过5Mbps，苹果官网会自动替换产品图为4K高清版本；如果网速较慢，则保持低清图，避免加载卡顿。这种方法既能完成测速，又能直接优化用户体验。

• 往返时间（RTT）检测
  发送多个小型的HTTP HEAD请求到服务器，计算请求发出到收到响应的平均时间（往返时间），间接判断网络延迟和稳定性。苹果官网用这个数据判断用户是否适合加载实时交互内容，比如AR预览、在线3D模型这类对延迟敏感的功能。

• 利用浏览器原生网络API
  通过navigator.connection API获取浏览器识别的网络类型（如5G、WiFi、4G）和预估的下行速度范围，再结合实际资源加载的测速结果，得到更精准的网络状况判断。比如如果API返回是慢速网络，苹果会直接跳过非必要的动态资源加载，优先展示核心内容。

内容的提问来源于stack exchange，提问作者sayandcode