by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2014/04/%e5%9b%be%e7%89%87%e6%96%87%e4%bb%b6%e6%9c%ac%e5%9c%b0%e7%bc%93%e5%ad%98/

随着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函数

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

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

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2014/04/%e5%9b%be%e7%89%87%e6%96%87%e4%bb%b6%e6%9c%ac%e5%9c%b0%e7%bc%93%e5%ad%98/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号