web性能优化–缓存
by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。
雅虎的16条优化准则,作为前端开发工程师,都是耳熟能详,信手拈来。但很多时候也能难完全的做得到,一些准则跟工程原则是冲突的,难以落实起来。
JS文件放尾部,CSS文件放头部等,这些基本的优化点还是可以做到,但是有时候遇到网速慢的情况,会出现一段时间的白屏,从用户体验的角度来说,还是有提升的空间。 根据移动站点的特性,已经用户对页面的期待看来,用户在刚打开页面的时候可以接受旧的东西。 在加载完js等资源文件时可以更新新的内容。这样,就可以尽可能快的展示数据,而更新数据等逻辑可以放到后面处理。 在移动站点的优化时,可以有以下几种方案,利用localstorage来做缓存。
一、实时性要求高的
1、第一次加载数据,渲染,缓存到localstorage。
2、第二次用户访问的时候直接读取缓存,渲染。
3、正常逻辑,拉取数据。这里可以分为两种,拉取后又渲染一次页面,本地存储;不渲染,直接存储,下次渲染。
HTML头部:
window._cacheModule = {
write: function(key){
var ret = this.getCacheData(key);
if(!ret) return false;
document.write(ret);
return true;
},
getCacheData: function(key){
if(!window.localStorage) return false;
try{
var str = localStorage.getItem(key);
var item = JSON.parse(str);
}catch(e){
item = false;
}
return item;
}
};
读缓存:
if(_cacheModule){
var ret = _cacheModule.write('_forum_my_followed');
}
写缓存:
var html = render(data);
$(dom).append(html);
storage.set('_forum_my_followed', html);
原理还是挺简单的,主要是发散下思维,考虑移动站点用户的特性。这样做的话,就能达到用户的预期,让页面尽快的出来,减少白屏时间。页面的业务逻辑还是没有提前,但给用户的感觉页面速度是加快了。
优化的目的并不是拿一些数据指标来判断,而是要给人的感觉,是真的加快了,这才是页面的优化目标。
二、实时性要求低的
1、根据页面访问的次数或者访问页面的间隔时间,如用户5次内访问页面或者半小时内都不再拉取数据。
本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作
个人知乎,欢迎关注:https://www.zhihu.com/people/iamaddy
欢迎关注公众号【入门游戏开发】
近期评论