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