请求排队
3.3.2. 分步渲染这里的方案相信大家也能很好理解,主要是优先处理首屏需要的数据并通过 setData 更新视图,然后在处理其余的数据。但根据官方文档的说明:
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
而小程序代码执行顺序也遵循JS的事件循环机制,仅仅是在处理后的数据调用 setData ,然后继续或者通过 Promise 处理下一步的话,并不能达到分步渲染的目的,而直接通过回调的方式在 setTimeout 中使用嵌套渲染,代码的可读性会变差,同时也不是很优雅。我们的解决方式是利用 setTimeout 封装了一个符合 Promise 标准的方法,从而可以像使用 Promise 那样继续分步渲染:
经过这一系列的优化,效果还是比较明显的:
4.1. 包大小在包大小方面:
- 总包从 9132.94KB 减小到 6736.42KB ,减少了 27% ;
- 主包从 1949.71KB 减小到 985.96KB ,减少了 49.5% ;
从启动耗时的数据看,下载耗时和JS注入耗时都有明显的下降:
启动耗时
再看打开耗时分布,可以看到3s内打开的用户比例有明显增加,从 56.26%增加到64.25%;
打开分布
4.2. 请求耗时数据预拉取,提前拉取,数据缓存在冷启动和页面切换时都起到了很不错的效果:
首页请求速度从 平均400ms下降到50ms,优化了87.5% ;
课详页的请求速度从 平均800ms下降到90ms,优化了88.75% ;
而数据缓存让二次访问时页面可以秒开: