Question

我一直在研究一个jquery插件，它使用HTML5音频播放器（）来播放mp3。我注意到在各种浏览器中，当加载音频播放器时，对同一个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中打开页面时，我从Web服务器看到了以下日志（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前缀。

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

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

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

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

Answer 1

Safari是否可能会提取其他请求以获取元数据？尝试使用preload属性的不同值来查看它是否有任何区别：

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

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

Answer 2

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

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

虽然此解释仅适用于Firefox，但您可以假设webkit浏览器也使用类似的方法。

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

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

2 个答案: