dabai_web_f/docs/性能优化清单.md

# 性能优化清单

## 一、首屏加载优化

### 1.1 代码分割
```javascript
// 路由懒加载
const UserProfile = () => import('@/pages/user/profile')

// 组件懒加载
components: {
  HeavyComponent: () => import('@/components/HeavyComponent.vue')
}
```

### 1.2 小程序分包加载
```json
{
  "subPackages": [
    {
      "root": "subPackages/order",
      "pages": ["list/index", "detail/index"]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["subPackages/order"]
    }
  }
}
```

### 1.3 资源预加载
```javascript
// 预加载关键资源
onLoad() {
  // 预加载下一页数据
  this.preloadNextPage()
  
  // 预加载图片
  uni.preloadImage({
    src: '/static/images/banner.jpg'
  })
}
```

### 1.4 骨架屏
```vue
<template>
  <view v-if="loading" class="skeleton">
    <view class="skeleton-avatar" />
    <view class="skeleton-line" />
    <view class="skeleton-line" />
  </view>
  <view v-else class="content">
    <!-- 实际内容 -->
  </view>
</template>
```

## 二、渲染性能优化

### 2.1 虚拟列表
对于长列表使用虚拟滚动：

```vue
<template>
  <recycle-list 
    :list="dataList"
    :item-height="100"
  >
    <template v-slot="{ item }">
      <view class="list-item">
        {{ item.title }}
      </view>
    </template>
  </recycle-list>
</template>
```

### 2.2 图片懒加载
```vue
<template>
  <!-- 小程序端 -->
  <image 
    :src="imageSrc" 
    lazy-load 
    mode="aspectFill"
  />
  
  <!-- H5端使用 Intersection Observer -->
  <img 
    v-lazy="imageSrc" 
    @load="handleImageLoad"
  />
</template>
```

### 2.3 防抖与节流
```javascript
import { debounce, throttle } from '@/utils/performance'

export default {
  methods: {
    // 搜索输入防抖
    handleSearch: debounce(function(keyword) {
      this.search(keyword)
    }, 300),
    
    // 滚动事件节流
    handleScroll: throttle(function(e) {
      this.updateScrollPosition(e)
    }, 100)
  }
}
```

### 2.4 条件渲染优化
```vue
<template>
  <!-- 使用 v-show 代替 v-if（频繁切换） -->
  <view v-show="isVisible">内容</view>
  
  <!-- 使用 v-if 代替 v-show（不常切换） -->
  <view v-if="hasPermission">内容</view>
  
  <!-- 使用 v-once 渲染静态内容 -->
  <view v-once>{{ staticContent }}</view>
</template>
```

## 三、网络请求优化

### 3.1 请求合并
```javascript
// 合并多个接口请求
async loadPageData() {
  const [bannerData, menuData, contentData] = await Promise.all([
    api.getBanner(),
    api.getMenu(),
    api.getContent()
  ])
  
  this.bannerList = bannerData
  this.menuList = menuData
  this.contentList = contentData
}
```

### 3.2 请求缓存
```javascript
class RequestCache {
  constructor() {
    this.cache = new Map()
    this.cacheTime = 5 * 60 * 1000 // 5分钟
  }
  
  get(key) {
    const item = this.cache.get(key)
    if (!item) return null
    
    if (Date.now() - item.timestamp > this.cacheTime) {
      this.cache.delete(key)
      return null
    }
    
    return item.data
  }
  
  set(key, data) {
    this.cache.set(key, {
      data,
      timestamp: Date.now()
    })
  }
}

// 使用缓存
const cache = new RequestCache()

export const getUserInfo = async (userId) => {
  const cacheKey = `user_${userId}`
  const cached = cache.get(cacheKey)
  
  if (cached) return cached
  
  const data = await request.get(`/user/${userId}`)
  cache.set(cacheKey, data)
  
  return data
}
```

### 3.3 请求重试
```javascript
async function requestWithRetry(config, retryCount = 0) {
  try {
    return await request(config)
  } catch (error) {
    if (retryCount < 3) {
      await new Promise(resolve => setTimeout(resolve, 1000))
      return requestWithRetry(config, retryCount + 1)
    }
    throw error
  }
}
```

### 3.4 请求取消
```javascript
class RequestManager {
  constructor() {
    this.pendingRequests = new Map()
  }
  
  addRequest(key, requestTask) {
    // 取消之前的相同请求
    if (this.pendingRequests.has(key)) {
      this.pendingRequests.get(key).abort()
    }
    this.pendingRequests.set(key, requestTask)
  }
  
  removeRequest(key) {
    this.pendingRequests.delete(key)
  }
  
  cancelAll() {
    this.pendingRequests.forEach(task => task.abort())
    this.pendingRequests.clear()
  }
}
```

## 四、内存优化

### 4.1 及时清理
```javascript
export default {
  data() {
    return {
      timer: null,
      observer: null
    }
  },
  
  beforeUnmount() {
    // 清理定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
    
    // 清理观察器
    if (this.observer) {
      this.observer.disconnect()
      this.observer = null
    }
    
    // 清理事件监听
    uni.offNetworkStatusChange()
  }
}
```

### 4.2 大数据处理
```javascript
// 分批处理大数据
function processBigData(data, batchSize = 100) {
  const batches = []
  for (let i = 0; i < data.length; i += batchSize) {
    batches.push(data.slice(i, i + batchSize))
  }
  
  return batches.reduce((promise, batch) => {
    return promise.then(() => {
      return new Promise(resolve => {
        setTimeout(() => {
          processBatch(batch)
          resolve()
        }, 0)
      })
    })
  }, Promise.resolve())
}
```

### 4.3 WeakMap 使用
```javascript
// 使用 WeakMap 避免内存泄漏
const cache = new WeakMap()

function cacheData(obj, data) {
  cache.set(obj, data)
}

function getCachedData(obj) {
  return cache.get(obj)
}
```

## 五、图片优化

### 5.1 图片压缩
```javascript
// 上传前压缩图片
function compressImage(filePath) {
  return new Promise((resolve, reject) => {
    uni.compressImage({
      src: filePath,
      quality: 80,
      success: (res) => resolve(res.tempFilePath),
      fail: reject
    })
  })
}
```

### 5.2 图片格式选择
- **照片**：使用 JPEG 格式
- **图标**：使用 PNG 或 SVG 格式
- **动画**：使用 GIF 或 WebP 格式
- **透明背景**：使用 PNG 格式

### 5.3 响应式图片
```vue
<template>
  <image 
    :src="getImageUrl()" 
    mode="aspectFill"
  />
</template>

<script>
export default {
  methods: {
    getImageUrl() {
      const systemInfo = uni.getSystemInfoSync()
      const dpr = systemInfo.pixelRatio
      
      // 根据设备像素比选择图片
      if (dpr >= 3) {
        return this.image + '@3x.jpg'
      } else if (dpr >= 2) {
        return this.image + '@2x.jpg'
      }
      return this.image + '.jpg'
    }
  }
}
</script>
```

### 5.4 图片预加载
```javascript
function preloadImages(urls) {
  return Promise.all(
    urls.map(url => {
      return new Promise((resolve, reject) => {
        uni.getImageInfo({
          src: url,
          success: resolve,
          fail: reject
        })
      })
    })
  )
}
```

## 六、小程序特定优化

### 6.1 setData 优化
```javascript
// 避免频繁 setData
let updateTimer = null
let pendingData = {}

function batchUpdate(data) {
  Object.assign(pendingData, data)
  
  if (updateTimer) return
  
  updateTimer = setTimeout(() => {
    this.setData(pendingData)
    pendingData = {}
    updateTimer = null
  }, 16) // 约60fps
}

// 避免 setData 传递大数据
// 不好的做法
this.setData({
  list: this.data.list.concat(newList)
})

// 好的做法
this.setData({
  [`list[${this.data.list.length}]`]: newItem
})
```

### 6.2 自定义组件
```javascript
// 使用自定义组件代替模板
Component({
  options: {
    // 启用纯数据字段
    pureDataPattern: /^_/,
    // 启用多slot支持
    multipleSlots: true
  },
  
  properties: {
    title: String
  },
  
  data: {
    _privateData: 'private' // 纯数据字段，不参与渲染
  }
})
```

### 6.3 分包预下载
```json
{
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["subPackages/order"]
    }
  }
}
```

## 七、H5 特定优化

### 7.1 PWA 支持
```javascript
// 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
}

// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/static/css/main.css',
        '/static/js/main.js'
      ])
    })
  )
})
```

### 7.2 CDN 加速
```javascript
// 静态资源使用 CDN
const CDN_URL = 'https://cdn.example.com'

export const getStaticUrl = (path) => {
  return `${CDN_URL}${path}`
}
```

### 7.3 Gzip 压缩
```javascript
// vite.config.js
import viteCompression from 'vite-plugin-compression'

export default {
  plugins: [
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
}
```

## 八、性能监控

### 8.1 性能指标收集
```javascript
// 页面加载时间
const pageLoadTime = performance.timing.loadEventEnd - performance.timing.navigationStart

// 首屏渲染时间
const firstPaintTime = performance.getEntriesByType('paint')[0].startTime

// 接口请求时间
const apiTime = performance.getEntriesByType('resource')
  .filter(item => item.initiatorType === 'xmlhttprequest')
```

### 8.2 性能上报
```javascript
function reportPerformance(data) {
  // 上报到监控平台
  uni.request({
    url: 'https://monitor.example.com/report',
    method: 'POST',
    data: {
      type: 'performance',
      ...data
    }
  })
}
```

## 九、优化检查清单

- [ ] 启用代码分割和懒加载
- [ ] 实现图片懒加载
- [ ] 使用虚拟列表处理长列表
- [ ] 添加请求缓存机制
- [ ] 实现请求重试机制
- [ ] 合并并发请求
- [ ] 压缩图片资源
- [ ] 使用 CDN 加速静态资源
- [ ] 启用 Gzip 压缩
- [ ] 小程序分包加载
- [ ] 优化 setData 调用
- [ ] 及时清理定时器和监听器
- [ ] 使用防抖和节流
- [ ] 添加骨架屏
- [ ] 实现性能监控