小程序优化

小程序加载过程

1 公共库注入;
2 资源准备(基础UI创建,代码包下载);
3 业务代码注入和渲染;
4 渲染首屏;
5 异步请求;

优化方案

控制代码包大小

1 将图片等资源文件放到CND中;
2 提取公共样式,共组件提取,代码复用;
3 压缩代码,清理无用的代码;

分包加载提高渲染效率

异步请求优化

1 onLoad 阶段就可以发起请求,不用等ready;
2 请求结果放在缓存中, 下次接着用;
3 请求中可以先展示骨架图;
4 先反馈,再请求。比如说,点赞的按钮,可以先改变按钮的样式,再发起异步请求;

减少setData的数据量

每调用一次setData, 都是逻辑层向渲染层的一次通讯,这个通信还不是直接传给webView, 而是通过native层,通讯的开销很大。

渲染层收到通讯后,还需要重新渲染出来,所以一次setData带来两次开销:通信的开销 + webview更新的开销。

如果一个数据不能会影响渲染层,则不用放在setData里面;

合并setData的请求,减少通讯的次数;

页面的js

小程序中可能有n个页面,所有的这些页面,虽然都拥有自己的webview(渲染层), 但是却共享同一个js运行环境。也就是说,当你跳到了另外一个页面(假设是B页面),本页面(假设是A页面)的定时器等js操作仍在进行,并且不会被销毁,并且会抢占B页面的资源。



原文:https://www.jianshu.com/p/d4fb22509eb9

猜你喜欢

转载自www.cnblogs.com/xjy20170907/p/12935831.html