第14课: 性能优化

性能分析和优化技巧

课程内容

本课程将详细介绍UniApp中的性能优化方法，包括性能分析工具的使用和各种优化技巧。

核心概念

• 理解性能优化的基本原理
• 掌握性能分析工具的使用
• 学习各种优化技巧
• 通过实例加深理解

性能分析

1. 使用Chrome DevTools

// 使用Chrome DevTools分析性能
// 1. 在浏览器中打开H5页面
// 2. 按F12打开开发者工具
// 3. 切换到Performance面板
// 4. 点击Record按钮开始录制
// 5. 操作页面，执行需要分析的操作
// 6. 点击Stop按钮停止录制
// 7. 分析性能报告

2. 使用uni-app性能分析工具

// 在uni-app中启用性能监控
uni.enableDebug({
    enablePerformanceMonitor: true
});

// 查看性能数据
uni.getPerformance({
    success: function(res) {
        console.log('性能数据:', res);
    }
});

优化技巧

1. 页面优化

// 1. 使用v-if和v-show合理
// 频繁切换的元素使用v-show
// 不频繁切换的元素使用v-if

// 2. 避免在模板中直接计算
// 不好的做法
<view>{{ items.length }}</view>

// 好的做法
computed: {
    itemsCount() {
        return this.items.length;
    }
}

// 3. 使用虚拟列表处理长列表
import { virtualList } from '@/components/virtual-list';

2. 网络优化

// 1. 数据缓存
uni.setStorageSync('userInfo', userInfo);
const userInfo = uni.getStorageSync('userInfo');

// 2. 图片懒加载
<image src="{{ item.img }}" lazy-load />

// 3. 批量请求
async function fetchData() {
    const [userInfo, goodsList] = await Promise.all([
        uni.request({ url: '/api/user' }),
        uni.request({ url: '/api/goods' })
    ]);
    return { userInfo, goodsList };
}

3. 资源优化

// 1. 图片优化
// 使用适当尺寸的图片
// 压缩图片
// 使用WebP格式

// 2. 代码分割
// 按需加载组件
const LazyComponent = () => import('@/components/LazyComponent');

// 3. 减少第三方库体积
// 只引入需要的模块
import { debounce } from 'lodash-es';

4. 运行时优化

// 1. 使用防抖和节流
import { debounce, throttle } from 'lodash-es';

export default {
    methods: {
        // 防抖
        handleInput: debounce(function(e) {
            console.log('输入内容:', e.target.value);
        }, 300),
        
        // 节流
        handleScroll: throttle(function() {
            console.log('滚动事件');
        }, 100)
    }
}

// 2. 避免频繁修改DOM
// 不好的做法
for (let i = 0; i < 1000; i++) {
    this.items.push({ id: i, name: 'Item ' + i });
}

// 好的做法
const newItems = [];
for (let i = 0; i < 1000; i++) {
    newItems.push({ id: i, name: 'Item ' + i });
}
this.items = newItems;

实战案例

1. 长列表优化

<template>
    <view>
        <virtual-list
            :items="items"
            :height="500"
            :item-height="80"
        >
            <template v-slot:default="{ item }">
                <view class="list-item">
                    <text>{{ item.name }}</text>
                </view>
            </template>
        </virtual-list>
    </view>
</template>

<script>
export default {
    data() {
        return {
            items: []
        };
    },
    mounted() {
        // 生成大量数据
        for (let i = 0; i < 10000; i++) {
            this.items.push({ id: i, name: 'Item ' + i });
        }
    }
};
</script>

2. 图片优化

<template>
    <view>
        <image
            v-for="item in goods"
            :key="item.id"
            :src="item.img"
            lazy-load
            mode="aspectFill"
            :style="{ width: '100px', height: '100px' }"
        />
    </view>
</template>

<script>
export default {
    data() {
        return {
            goods: []
        };
    },
    methods: {
        // 图片预加载
        preloadImages() {
            this.goods.forEach(item => {
                uni.preloadImage({
                    urls: [item.img]
                });
            });
        }
    }
};
</script>

实践练习

总结

通过本课的学习，你应该掌握了性能分析工具的使用和各种优化技巧。在实际项目中，合理应用这些优化方法可以显著提升应用的用户体验。