HTML5 音频播放器在加载时发出多个 GET 请求。为什么？答案

【问题标题】：HTML5 Audio Player makes multiple GET requests when loading. Why?HTML5 音频播放器在加载时发出多个 GET 请求。为什么？
【发布时间】：2010-08-17 15:15:39
【问题描述】：

我一直在开发一个使用 HTML5 音频播放器 () 播放 mp3 的 jquery 插件。我注意到在各种浏览器中，当加载音频播放器时，会针对同一个 MP3 文件发出多个 GET 请求。

我创建了一个简单的独立 HTML 文件来测试它。

<html>
<head></head>

<body>
    <audio controls src="http://localhost:5000/files/one.mp3" type="audio/mp3"></audio>
<body>  
<html>

在 OS X Safari 5.0.1 中打开页面时，我从我的网络服务器中看到以下日志（3 个 GET 请求）：

>> Thin web server (v1.2.7 codename No Hup)
>> Maximum connections set to 1024
>> Listening on 0.0.0.0:5000, CTRL+C to stop
127.0.0.1 - - [17/Aug/2010 11:09:32] "GET /one.mp3 HTTP/1.1" 200 4030432
0.0022
127.0.0.1 - - [17/Aug/2010 11:09:32] "GET /one.mp3 HTTP/1.1" 200 4030432
0.0012
127.0.0.1 - - [17/Aug/2010 11:09:32] "GET /one.mp3 HTTP/1.1" 200 4030432
0.0010

请注意，请求是针对“GET /one.mp3”而不是“GET /files/one.mp3”的，因为我的瘦 Web 服务器正在使用 /files 前缀。 p>

在 OS X Chrome 中打开同一个 HTML 文件时，我看到了 2 个对 /one.mp3 的 GET 请求。

在 OS X Opera 中打开同一个 HTML 文件时，我看到了 1 个对 /one.mp3 的 GET 请求。

单个文件多次 GET 请求的原因是什么？我的服务器上的带宽是有限的，我将连接限制在 75KB/s（那是 HTTP 连接，而不是用户）。我担心的是，如果 Safari 建立 3 个 HTTP 连接来下载（流式传输）单个 mp3 文件，它会减少我的服务器可以处理的并发用户数。

这是我在性能/带宽方面应该担心的事情吗？另外，我很好奇为什么某些浏览器对同一个文件发出多个请求，而其他浏览器却没有。

【问题讨论】：

标签： html audio get

【解决方案1】：

对于 Firefox，发出三个音频请求。这是为了支持播放区域和寻找尚未下载的媒体文件。它本质上是下载文件并确定它的持续时间为三个块。当此行为为reported to Mozilla as a bug 时，给出以下解释：

第一个 GET 读取 ogg 文件的第一个块。由此我们可以确保它是一个有效的 ogg 等。下载的数据应该被 Firefox 缓存。
第二个 GET：不幸的是 Ogg 文件不包含其持续时间，因此我们终止了初始下载，并寻找到 Ogg 文件的末尾并读取一些数据以提取媒体的持续时间。
第三个 GET：确定媒体的持续时间后，我们将继续下载媒体。我们不需要重新下载已经缓存的数据，所以我们从之前下载停止的地方继续。

虽然这个解释只适用于 Firefox，但你可以假设 webkit 浏览器也使用了类似的方法。

我认为您不应该担心这会影响并发用户的数量。如果您的服务器日志以毫秒为单位显示时间戳，您会看到三个请求连续触发，并且每个请求在发出后续请求之前都被取消。

【讨论】：

【解决方案2】：

Safari 是否有可能发出额外的请求来获取元数据？尝试不同的 preload 属性值，看看是否有任何不同：

preload="none" - 没有预取数据（不应看到任何 GET）
preload="metadata" - 基本元数据，如持续时间、比特率、采样率等被预取（应该看到一个 GET）
preload="auto" - 预取整个文件（可能会看到多个 GET）

有关此属性的完整说明，请参阅http://dev.w3.org/html5/spec/Overview.html#attr-media-preload。

【讨论】：