性能优化实践

渲染性能优化

1. 减少渲染节点：控制页面 DOM 节点数量在 1000 以内

2. 列表优化：

   • 使用 v-for 时添加 :key
   • 长列表使用分页或虚拟列表：

   <scroll-view 
     scroll-y 
     @scroll="onScroll"
     style="height: 100vh;"
   >
     <view 
       v-for="item in visibleItems" 
       :key="item.id"
     >
       {{ item.content }}
     </view>
   </scroll-view>

3. 避免频繁数据更新：

   • 使用 this.$set 触发视图更新
   • 批量更新数据时使用 this.$nextTick

包体积优化

1. 资源压缩：
   • 图片压缩（使用 WebP 格式）
   • 代码混淆与压缩
2. 按需引入：
   • 组件按需加载
   • 第三方库按需导入（如 lodash 只导入需要的方法）
3. 分包加载（小程序端）：

// pages.json
{
  "subPackages": [
    {
      "root": "pages/sub",
      "pages": [
        {
          "path": "list/list"
        }
      ]
    }
  ]
}

启动速度优化

1. 减少启动时同步操作：将非必要初始化放入异步
2. 预加载关键资源：使用 preload 配置
3. 启动页优化：设计简洁的启动页，减少启动时间感知