老旧售地网站优化：如何测量客户端带宽并切换图片/视频横幅？

A. 能否通过PHP等技术测量客户端网络带宽？ #

PHP作为服务端语言，无法直接精确测量客户端的实时带宽——因为PHP的运行阶段在服务器接收请求、返回响应之前，没法获取客户端下载资源的速度数据。

可行的替代方案：

• 前端JavaScript估算：这是最常用的方式。加载一个已知文件大小的静态资源（比如100KB的空白图片），记录资源开始加载和完成加载的时间戳，通过 文件大小 / 加载时间 计算出大致带宽。注意给资源URL加随机参数（比如?t=${Date.now()}）避免浏览器缓存影响结果。
• 服务端间接判断：可以通过分析客户端请求的响应时间、TCP握手耗时等数据做粗略推断，但误差极大，不建议作为核心判断依据。

B. 根据网速自动切换图片/视频的实现方案 #

完全可以实现，且能做到无感知切换，核心思路是先加载静态图保证首屏体验，再根据带宽检测结果动态替换为视频，具体步骤如下：

1. 资源准备：确保短视频的第一帧与静态图片像素完全一致，这样切换时视觉上没有突兀感。
2. 初始渲染：页面先渲染静态图片作为横幅，用<img>标签加载，保证低网速下也能快速显示内容。
3. 带宽检测：用上述前端JS方案估算客户端带宽，设定合理阈值（比如2Mbps，可根据你的视频大小调整）。
4. 动态替换逻辑：
   • 当带宽达标时，创建<video>元素，设置src为视频地址，poster为静态图片地址，同时添加autoplay muted loop属性（浏览器要求视频静音才能自动播放）。
   • 将<img>标签替换为<video>标签，或者隐藏<img>并插入<video>，此时因为poster和初始图片一致，用户看不到切换过程。
   • 若带宽不达标，保持静态图片显示即可。
5. 优化细节：
   • 用Intersection Observer监听横幅是否进入视口，只有当用户看到横幅时再执行带宽检测和替换，节省不必要的资源消耗。
   • 给视频添加preload="auto"或preload="metadata"，根据带宽情况调整预加载策略。
   • 做降级处理：对于禁用JavaScript的浏览器，默认显示静态图片。

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