项目：移动端H5电商项目
痛点：慢！！！
初始方案：最基本的图片懒加载，静态资源放到cdn，predns等等已经都做了。但是还是慢，慢在哪？
显而易见的原因：由于前后端分离，所有的数据都由接口下发，之后根据模板渲染页面。也就是说，我们需要先加载js，等到js加载完毕之后，请求接口，接口返回数据之后，渲染页面，加载图片等等。尽管使用了模块化的加载方式，但是对于要求高的首页和活动页，给用户的感知也不是很好。
最初，由于时间紧迫，基本上都是从客户端作优化处理，基本上可以总结为以下几个方面。
一、本地缓存我们做了本地缓存优化的策略，第一次请求之后就把接口数据缓存到localStorage里面，并且存储当时的时间，设定过期时间，一般设置为5分钟，用户在5分钟内重复打开页面，不会再次请求接口，从localstorage中拿取数据，直接渲染页面。
后续干脆把模板渲染好的html片段存储了起来，直接拼接，省去了模板计算的时间。
基本实现方案如下：
var cache =http://www.likecs.com/ localStorage.getItem('cache') , expires =http://www.likecs.com/ 5 * 60 * 1000 ; // 判断是否过期 function isOverdue(pastTime, expires) { return Date.now() - pasttime >=http://www.likecs.com/ expires; } if (cache && !isOverdue(cache.time, expires)) { // 说明缓存存在，并且没有过期 // 就正常取cache.data做相应的渲染 } else { // 说明缓存不存在或者已经过期了 // 重新请求接口 $.get('a.cn', funciton (res) { // do something // 把对应的渲染操作处理完成之后，将数据缓存，并记录当前的时间 localStorage.setItem('cache', { data: res, time: Date.now() }) }) }