web前端性能优化–缓存

雅虎的16条优化准则，作为前端开发工程师，都是耳熟能详，信手拈来。但很多时候也能难完全的做得到，一些准则跟工程原则是冲突的，难以落实起来。


JS文件放尾部，CSS文件放头部等，这些基本的优化点还是可以做到，但是有时候遇到网速慢的情况，会出现一段时间的白屏，从用户体验的角度来说，还是有提升的空间。 根据移动站点的特性，已经用户对页面的期待看来，用户在刚打开页面的时候可以接受旧的东西。 在加载完js等资源文件时可以更新新的内容。这样，就可以尽可能快的展示数据，而更新数据等逻辑可以放到后面处理。 在移动站点的优化时，可以有以下几种方案，利用localstorage来做缓存。

一、实时性要求高的

1、第一次加载数据，渲染，缓存到localstorage。


2、第二次用户访问的时候直接读取缓存，渲染。


3、正常逻辑，拉取数据。这里可以分为两种，拉取后又渲染一次页面，本地存储；不渲染，直接存储，下次渲染。

HTML头部：

[javascript]  view plain  copy

1. window._cacheModule = {  
2.     write: function(key){  
3.         var ret = this.getCacheData(key);  
4.         if(!ret) return false;  
5.         document.write(ret);  
6.         return true;  
7.     },  
8.     getCacheData: function(key){  
9.         if(!window.localStorage) return false;  
10.         try{  
11.             var str = localStorage.getItem(key);  
12.             var item = JSON.parse(str);  
13.         }catch(e){  
14.             item = false;  
15.         }  
16.         return item;  
17.     }  
18. };  

读缓存：

[javascript]  view plain  copy

1. if(_cacheModule){  
2.     var ret = _cacheModule.write('_forum_my_followed');  
3. }  

写缓存：

[javascript]  view plain  copy

1. var html = render(data);  
2. $(dom).append(html);  
3. storage.set('_forum_my_followed', html);  

原理还是挺简单的，主要是发散下思维，考虑移动站点用户的特性。这样做的话，就能达到用户的预期，让页面尽快的出来，减少白屏时间。页面的业务逻辑还是没有提前，但给用户的感觉页面速度是加快了。
优化的目的并不是拿一些数据指标来判断，而是要给人的感觉，是真的加快了，这才是页面的优化目标。

二、实时性要求低的

1、根据页面访问的次数或者访问页面的间隔时间，如用户5次内访问页面或者半小时内都不再拉取数据。