界面

• 图片：避免使用大图;
• 图片：避免滥用 image 组件的 widthFix/heightFix 模式；
• 组件：骨架屏、占位组件、虚拟组件
• 节点：减少组件数量、减少节点嵌套层级，总页面节点数少于1000个，节点树深度层级少于30层，子节点数不大于60个
• 滚动组件：开启惯性滚动 -webkit-overflow-scrolling: touch;
• 交互通信：使用hover-class实现按钮的单击态、使用recycle-view & recycle-item 虚拟DOM组件
• 交互通信：防止用户的左滑或者按键返回误操作，导致整个页面回退的问题
• 交互通信：scroll-view尤其注意视图层和逻辑层频繁进行通讯;
• 交互通信：长列表使用ulist，具有自动回收机制;
• 提取组件：微博长列表页面，点击一个点赞图标，赞数要立即+1，此时这个点赞按钮一定要做成组件。否则这个+1会引发页面级所有数据的从js层向视图层的同步；
• 宽屏适配：leftWindow
• 宽屏适配：topWindow
• 宽屏适配：rightWindow

加载

• 新页面渲染和窗体进入动画抢资源，造成页面切换卡顿、掉帧。建议延时100ms~300ms渲染图片或复杂原生组件，分批进行数据通讯，以减少一次性渲染的节点数量;
• 生命周期：提前发起数据请求；
• 生命周期：首屏渲染优化；

逻辑

• 列表：动态列表渲染里优化wx:key的使用
• data数据：避免data对象无用数据、合理使用优化数据、减少一次性节点数量，延迟setdata
• 垃圾数据：清理定时器、有一个监听，必须有一个反监听，并及时移除销毁
• 高性能操作：适当监听页面或组件的 scroll 事件；
• 高性能操作：选择高性能的动画实现方式；
• 高性能操作：使用 IntersectionObserver 监听元素曝光；
• 生命周期：避免在 onHide/onUnload 执行耗时操作；
• 启用多线程worker：一些异步处理的任务

系统

• 打包：开启摇树优化;
• 打包：页面初始渲染缓存配置 initialRenderingCache；
• 分包：分包预下载；
• 分包：分包异步化(允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制)；
• 代码注入优化(按需注入和用时注入)：避免启动页面所在的主包或者分包文件全部加载；
• 代码注入优化(按需注入和用时注入)：{"lazyCodeLoading": "requiredComponents"}；
• 初始渲染缓存：使视图层不需要等待逻辑层初始化完毕，而直接提前将页面初始 data 的渲染结果展示给用户
• 系统分析：内存分析
• 系统分析：处理内存告警
• 周期性更新：能够在用户未打开小程序的情况下，也能从服务器提前拉取数据
• 数据预拉取：在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据

实用工具

• 高性能渲染优先选用 wxs
• 高性能渲染优先选用 renderjs

网络层面

• 减少图片的请求次数 & 压缩图片大小
• 尽可能使用CDN图片或图片链接 & 尽可能使用webp格式图片
• 减少不必要的网络请求，使用本地缓存数据
• 优化网络请求参数，提高网络请求效率
• 优化网络请求的并发数，分优先级

主包优化

• 尽可能除tabbar页面外，所有页面都将其放入分包中
• 公共样式提取到主包中，避免重复打包
• 公共样式会被打入每个文件的样式中
• 分包
  • 避免多个分包共用一个分包的文件，小程序会默认将公共引用的文件打成主包文件
  • 分包引用UI组件，该UI组件将被打入主包