图片文件本地缓存

随着html5不断的被得到支持，从性能优化的角度讲，减少http请求是非常重要的优化手段。

html5的新的接口localstorage，提供了更大的存储空间，大部分浏览器支持5M的容量，足够存储JS等脚本文件。这样依赖就能减少一些HTTP请求，提升速度。

但也可以存储一些改动频率较低的静态图片，方案是将图标进行编码，存储该文件的编码。下面直接看代码：


var setImageSrc = function(img, src){
var local = localStorage.getItem("src"); //用src作key，也可以换其他标记
if(local){
img.src= local;
}else{
img.src = src;
img.onload = function(){
var canvas = document.createElement('canvas')
ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0);
var data = canvas.toDataURL('jpg'); //注意，浏览器不一定支持jpg格式的转换,这时会自动降级到png格式
localStorage.setItem("src", data);
}
// 跨域
img.setAttribute("crossorigin","anonymous"); //关键属性
}
}
setImageSrc($('feedImg'),'http://test.com/img/header-logo.png');

这样就可以存储一些静态图片，但大小是图片本身的两倍，主要应用canvas的toDataURL函数

可以配合图片的懒加载使用

稍加改变，加上版本号，可以控制图片的改版发布了。

个人知乎，欢迎关注：https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】