我们知道在 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 下是没有生效的，虽然请求的信息并不会太怎么占用宽带资源，但还是需要注意。