小程序性能优化

基于浏览器生态的优化

1. 图片优化：懒加载、图片压缩/裁剪、精灵图、icon、svg
2. 代码压缩
3. 列表优化：虚拟列表
4. ...

基于小程序架构的优化：

​ 受限于小程序架构，做重交互会比较吃力，因为一次交互 渲染层 -> js 层 需要 4 次通信。

解决方案是：

1. 避免做重交互
2. 使用微信提供的原生组件
3. 使用 wxs 模块以及wxs 响应事件
4. 不要渲染过多原生组件（就是 Input）：聚焦/失焦 时切换input/view 组件

举例：使用 wxs 模块实现滚动交互，自定义滚动条

<wxs module="scroll">
  module.exports = { scroll: function (event, ownerInstance) { var scollInstance =
  ownerInstance.selectComponent('.scroll') // scoll-view var inkbarInstance =
  ownerInstance.selectComponent('.scroll-inkbar') // scoll-view inkbar var width = 343 //
  高版本依赖兼容 if(scollInstance.getBoundingClientRect) { width =
  scollInstance.getBoundingClientRect().width } var scrollLeft = event.detail.scrollLeft var
  scrollWidth = event.detail.scrollWidth - width var rate = scrollLeft / scrollWidth * 50
  inkbarInstance.setStyle({ '--left': rate + '%' }) } }
</wxs>
<-- wrapClass className 来自组件props -->
<View class="{{wrapClass}}">
  <scroll-view scroll-x bindscroll="{{scroll.scroll}}" class="scroll {{className}}">
    <slot></slot>
  </scroll-view>
  <view class="scroll-inkbar" />
</View>

基于 Taro 3 架构的优化：

基于以下几点

1. React

2. React -> virtue dom -> Taro virtue dom (wx appData) -> 基于 Template 渲染

3. Taro3 渲染数据全部存放在页面对象

所以：

1. 组件抽取粒度：组件抽离

2. 保持页面结构：尽量在一开始就借助骨架屏将页面大体结构固定下来

3. 部分组件使用CustomWrapper包裹

引用/参考:

1. CustomWrapper
2. Taro/Remax 实现原理
3. wxs 模块
4. wxs 响应事件
5. 小程序架构设计（一）
6. 小程序架构设计（二）