ribbon image search rewind fast-forward speech-bubble pie-graph star

IE vs Chrome vs Safari video 的预加载表现分析

我们知道在 video 的标签中支持 preload的属性, 它表示可以 用于定义视频对于媒体资源的预加载从而达到更好的播放体验。它可以设置下面属性值:

  • auto 表示整个视频都会进行下载,即使用户并不打算播放它。
  • metadata 只请求视频信息的 metadata 数据,比如长度。
  • none 不停止视频资源预加载。

测试表现

Chrome

*版本: 61 *

我们测试Chrome设置为 auto 的时候加载数据大约为 (3.6M / 20.1M)

Preload Size
auto 3.6M / 20.1M
none 0 M / 20.1 M
metadata 896 KB / 20.1 M
Safari

版本: 11.0

Preload Size
auto 20.1M / 20.1M
none 0 M / 20.1 M
metadata 20.1M / 20.1 M

IE

版本: Edge

Preload Size
auto 2.61 M / 20.1M
none 220 KB / 20.1 M
metadata 121 KB / 20.1 M

版本: IE9

Preload Size
auto 2.61 M / 20.1M
none 105 KB / 20.1 M
metadata 177~ 288KB / 20.1 M
数据是多次测量后的平均值

从上面测试的数据中可以发现,不同浏览器下对于设置 preload 的表现是完全不一致的,我们需要重视 safari 的设置,它是会进行资源的全量下载请求的。其次我们在设置 preload 的时候,设置 none 在 IE 下是没有生效的,虽然请求的信息并不会太怎么占用宽带资源,但还是需要注意。

You Can Speak "Hi" to Me in Those Ways