javascript - 第一次加载后，javascript load()方法会缓存资源吗？

Question

我有一个网页，在发生某些事件时会播放“铃声”声音。问题是，音频播放是断断续续的，直到我将代码更改为以下代码，我似乎无法弄清楚是什么原因造成的:

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', '/public/sounds/chime.ogg');
audioElement.load();
audioElement.play();

现在每次都播放音频(仅11kb)，但是我想了解一下性能，是每次从服务器提取文件还是将其缓存并重用？

我以前的代码曾经是这样的:

HTML:

<audio id="chime" preload="auto" autobuffer>
    <source src="@{'/public/sounds/chime.ogg'}" />
</audio>

JavaScript:

$('#chime').get(0).play();

Answer 1

编辑:如果您只想查看浏览器是否在请求文件或遵守缓存信息，请弹出打开开发工具网络面板(或firebug网络面板)并重新加载页面。

您将看到正在加载的文件资源的GET以及状态(请查看chrome工具中的 header 标签-您会看到“200 OK”，“200(来自缓存)”或“304 not改性'。

看一下“计时”选项卡，您会看到它是花时间下载整个文件，还是只是将本地文件与服务器上的文件进行比较。

此行为将完全取决于浏览器，因此，如果您在firefox，webkit和IE中进行测试，则可能会看到略有不同的结果。

firefox尊重音频文件http header 中的缓存信息，webkit浏览器会进行快速检查。

http://mindtrove.info/archive/2010/02/1/