【Uniapp】代码规范七：性能规范

1. 页面加载优化

首屏加载优化

• 合理拆分页面：将页面按模块拆分，按需加载，降低首屏加载时间。

• 异步加载组件：使用异步加载组件的方式，避免一次性加载所有资源。

const AsyncComponent = () => import('@/components/SomeComponent.vue');

图片懒加载：使用v-lazy指令对图片进行懒加载，减轻初次加载时的压力。

<image v-lazy="imageSrc" />

• 使用gzip压缩：在服务器端开启gzip压缩，减少文件大小，提高传输效率。

优化资源文件

• 压缩图片：上传前压缩图片，减少大尺寸图片对加载速度的影响。
• 移除无用资源：定期清理冗余图片、组件和代码，保持项目精简。

使用CDN

• 外部资源加载：通过CDN加载通用的静态资源文件，加快获取速度，减轻服务器压力。

2. 内存管理和数据处理优化

防止内存泄漏

• 及时销毁监听器：确保在组件销毁时清理监听器，避免内存泄漏。

beforeDestroy() {
  this.$watch('someData', null);
}

定时器清理：在组件销毁时清理定时器，避免占用内存。

beforeDestroy() {
  clearInterval(this.timer);
}

减少不必要的计算

• 避免深度监听：尽量监听简单数据变化，避免深度监听复杂对象。

• 缓存计算结果：通过computed和memoization缓存计算结果。

computed: {
  computedValue() {
    return this.complexCalculation(this.someData);
  }
}

3. 数据请求优化

减少数据请求次数

• 合并请求：对于频繁请求，建议合并处理，减少请求次数。

• Debounce & Throttle：使用debounce或throttle优化频繁触发的操作。

methods: {
  handleInput: _.debounce(function() {
    // 请求逻辑
  }, 300)
}

请求数据缓存

• 缓存请求数据：本地缓存不经常变动的数据，降低网络压力。

uni.setStorage({
  key: 'cachedData',
  data: data
});

请求延时处理

• 异步请求优化：对于不紧急的请求，可以延时加载。

setTimeout(() => {
  // 延迟请求
}, 3000);

4. UI渲染优化

减少DOM操作

• 减少频繁的DOM更新，合并多次操作为一次更新。

uni.createSelectorQuery()
  .select('#element')
  .boundingClientRect()
  .exec();

虚拟列表

• 长列表渲染：使用虚拟列表技术，仅渲染可视区域的数据。

组件懒加载

• 按需加载组件，避免初始加载时加载所有复杂组件。

<modal v-if="showModal" />

5. 样式优化

使用CSS3硬件加速

• 硬件加速：通过transform等CSS3属性利用GPU提升渲染效率。

.element {
  transform: translate3d(0, 0, 0);
}

CSS选择器优化

• 尽量避免复杂的层级选择器，使用ID或类选择器代替。

/* 优化为 */
.active-menu {}

使用样式隔离

• 通过scoped属性隔离组件样式，减少全局样式冲突。

<style scoped>
  .button {
    background-color: blue;
  }
</style>

6. 脚本和插件优化

减少引入多余的第三方插件

• 按需引入插件，避免引入整个库，减小包体积。

import debounce from 'lodash/debounce';

尽量使用原生API

• 原生API优先：使用UniApp的原生API，避免引入外部库。

7. 异步加载和懒加载

按需加载页面

• 使用懒加载功能，推迟不需要立即加载的页面或组件。

const AboutPage = () => import('@/pages/About.vue');

使用懒加载技术

• 对图片、视频等资源使用懒加载技术，减轻不必要的资源消耗。

<image v-lazy="imageSrc" />

8. 缓存机制优化

本地缓存

• 数据缓存：使用uni.setStorageSync()存储常用数据，减少请求频率。

uni.setStorageSync('key', value);

图片和静态资源缓存

• 静态资源缓存：设置较长的缓存过期时间，减少请求量。

9. 性能监控和调优

性能监控工具

• 使用UniApp调试工具或其他性能监控工具进行性能分析，检查加载时间和响应时间。

定期性能调优

• 定期分析性能瓶颈，优化网络请求和渲染过程。