写在后面

前段时间遇到了一个比拟有意思的GIF图相干的问题，上面我先简略说一下遇到的问题，而后再说一下是怎么做资源解决的。

问题

页面中有很多个雷同的GIF，能够手动触发播放其中一个。（这里播放的计划就不说了，间接说一下播放过程中遇到的问题）

简略来说，预期是这样的：

理论是这样的：

问题总结：触发其中一个播放的时候，其余雷同的GIF动画也会被一起被影响。

剖析

先看一下这些GIF图的资源构造：

能够看到，这些GIF用的都是雷同的资源门路。所以在第一个资源回来的时候，会在浏览器造成一个图片缓存，后续其余GIF资源用的都是这个缓存。所以触发其中一个GIF图播放的时候，相当于播放了存在缓存中的GIF图。这个时候，其余的援用了这个缓存资源的中央也就造成了一起播放的成果。

剖析总结：这些gif图应用了雷同的浏览器缓存。

高级计划

根底实现

计划外围：分化图片源
这个计划是将源文件复制成N多份，而后每个前端的援用映射一个CDN源文件，从图片源上将这些雷同的图片给独立开。
举个栗子，原图的名字是“demo.gif”，而后复制“demo.gif”，生成“demo001.gif”、“demo002.gif”、“demo003.gif”... 。而后前端应用图片的时候，第一张图用“demo001.gif”、第二张用“demo002.gif”、第三张用“demo003.gif”... 。依此类推...

资源构造如下：

预加载

const baseUrl = 'http://www.abc.com/'// 这里包层数组是为了拓展其余图片 const imgArr = [{len: 15, nameFrag: 'demo_00'}]let imgData = [];// imgData 最初变成一个 url 列表// 如：['http://www.abc.com/demo_001.gif','http://www.abc.com/demo_001.gif' ... ]imgArr.forEach((imgConfig) => {    // new Array兼容性有问题 能够思考换成for循环    const arr = new Array(imgConfig.len).fill('').map((item,index) => `${baseUrl}${imgConfig.nameFrag}${index+1}.gif`);    imgData = imgData.concat(arr)})// 拿到一个promise 列表 ，最初用 promise.all 解决所有预加载const promiseAll = imgData.map(function (item, index) {    return new Promise(function (resolve, reject) {      const img = new Image();      img.onload = function () {        img.onload = null;        resolve(img);      };      img.error = function () {        reject('图片加载失败');      };      img.src = item;    }); }); Promise.all(promiseAll).then(    function () {        do something...    },    function (err) {        do something...    });

毛病：

1、资源更新老本高

举个例子，你的网页上原来有 15 张 “点赞.gif” ，UI同学忽然哪天来灵感了，她要把“点赞.gif”替换成“疯狂点赞.gif”。

那这个时候麻烦就来了，你要生成15张新的“疯狂点赞.gif”，别离是“疯狂点赞001.gif”、“疯狂点赞002.gif”、“疯狂点赞003.gif”... 。而后再把原来的15张“点赞.gif”替换调。而后还要前端的援用的图片名一个个改掉。

15张可能还能承受，然而如果再来15张“点踩.gif”，或者其余更多雷同gif呢？那麻烦就大了，这个时候就是经典的吐槽UI工夫...

2、节约存储（cdn）资源

这个很好了解，前端每个援用的图片源都是要存起来的嘛，那理论只须要存 1 张的图片，这个计划须要存15张，相当于资源耗费是原来的N倍。

还是毛病1雷同的问题，简略场景下没有问题，然而场景越简单，存储资源的节约越大。

降级计划

根底实现

计划外围：分化浏览器缓存
后面说的计划一是生成多个图片源，让前端援用和图片源一对一映射关系。那这个计划的外围就是生成多个浏览器缓存，让前端援用和浏览器缓存造成一对一映射关系。
具体就是，在每个图片申请上加一个固定的参数编号，相当于给浏览器缓存打上一个编号。
比方：
原图片门路是：“http://www.abc.com/demo.gif”
新图片门路就是：
“http://www.abc.com/demo.gif?001”
“http://www.abc.com/demo.gif?002”
“http://www.abc.com/demo.gif?003”
......

图片资源构造如下：

这个计划额定须要做的一件事件就是，在实现的时候保护一个参数映射关系，保护的模式能够有很多，这里提供两种简略倡议：

// 第一种// 间接将参数编号列出来// 每用到一个用到一个，则index++cosnt base_url = 'http://www.baidu.com/'const imgMap = {    "demo.gif": {        index: 0,        list:['001','002','003'......]    }}const url_001 = `${base_url}demo.gif?${imgMap['demo.gif'].list[imgMap['demo.gif'].index]}`imgMap['demo.gif'].index++const url_001 = `${base_url}demo.gif?${imgMap['demo.gif'].list[imgMap['demo.gif'].index]}`imgMap['demo.gif'].index++.....// 第二种 // 不必存list，依据index实时计算就行// 须要保障 图片援用的时候 和 预加载的时候 的算法统一就行// 这里个代码就不列举了

预加载

预加载和计划一的没什么大的区别，只是在生成url的时候，略微改一下就行

const arr = new Array(imgConfig.len).fill('').map((item,index) => `${baseUrl}${imgConfig.nameFrag}.gif?${index+1}`);

全副代码：

const baseUrl = 'http://www.abc.com/'// 这里包层数组是为了拓展其余图片 const imgArr = [{len: 15, nameFrag: 'demo'}]let imgData = [];// imgData 最初变成一个 url 列表// 如：['http://www.abc.com/demo_001.gif','http://www.abc.com/demo_001.gif' ... ]imgArr.forEach((imgConfig) => {    // new Array兼容性有问题 能够思考换成for循环    const arr = new Array(imgConfig.len).fill('').map((item,index) => `${baseUrl}${imgConfig.nameFrag}.gif?${index+1}`);    imgData = imgData.concat(arr)})// 拿到一个promise 列表 ，最初用 promise.all 解决所有预加载const promiseAll = imgData.map(function (item, index) {    return new Promise(function (resolve, reject) {      const img = new Image();      img.onload = function () {        img.onload = null;        resolve(img);      };      img.error = function () {        reject('图片加载失败');      };      img.src = item;    }); }); Promise.all(promiseAll).then(    function () {        do something...    },    function (err) {        do something...    });