想了解 AirBnb 如何能够如此快速地在其主页上加载 20MB 的背景视频文件。在 WebPageTest 查看了他们的主页之后, 我注意到该视频没有出现在任何下载的资源中，这使得它的得分如此之高。当我尝试这种策略时，通过 AJAX 异步加载视频，视频仍然作为下载资源显示在 WebPageTest 上，但只是在 DOM 加载之后。所以我真的不确定 AirBnb 是如何做到这一点的。有人有想法吗？
最佳答案
AirBnb 在这里没有做任何特别的事情。他们刚刚开始使用渐进式下载播放媒体，这仅意味着在视频仍在下载时开始播放。
在他们的 CDN 上，他们上传了一些相当大的 MP4 文件，这些文件具有两个重要特征:
- 索引信息(MOOV 原子)已移至 MP4 文件的开头
- 视频以您的浏览器支持的格式和编解码器编码
由于这些特性，站点所要做的就是告诉您的浏览器开始播放源 URL，它会做正确的事情:它向 CDN 发出 Web 请求并开始下载文件。一旦传输了足够的数据开始播放，它就会开始播放。
最后，我不能确定为什么 WebPageTest 不向您显示驱动视频的视频 MP4，但它们肯定存在，并且 URL 看起来像 https://a0.muscache.com/airbnb/static/Xxxxx-X1-1.mp4 .我怀疑他们正在查看您的用户代理来决定向您发送哪个文件，并且根本不会向 Google 和 WebPageTest 等机器人发送任何视频。
您无法通过 WebPageTest 了解真实情况。不要依赖第三方在他们的环境中评估页面，您应该使用 Fiddler 观察您实际发送的流量。或 Chrome 开发者工具上的网络选项卡。
关于javascript - 在网页上加载视频的最佳做法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33549178/