小程序优化

2022-10-01 14:58:30

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

优化方案

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

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

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

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

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

合并setData的请求，减少通讯的次数；

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