性能优化在实际案例中的使用

案例：电商网站购物车功能优化

问题描述：
电商网站的购物车功能存在性能瓶颈，当用户添加大量商品时，页面响应变慢，甚至出现卡顿现象。需要通过优化代码和数据结构提升性能。

原始代码（未优化）

// 购物车数据以数组存储，每次操作都遍历整个数组  
let cart = [];  

function addToCart(product) {  
    let found = false;  
    for (let i = 0; i < cart.length; i++) {  
        if (cart[i].id === product.id) {  
            cart[i].quantity += 1;  
            found = true;  
            break;  
        }  
    }  
    if (!found) {  
        cart.push({ ...product, quantity: 1 });  
    }  
    renderCart(); // 每次操作后重新渲染整个购物车  
}  

function renderCart() {  
    const cartElement = document.getElementById('cart');  
    cartElement.innerHTML = '';  
    cart.forEach(item => {  
        const itemElement = document.createElement('div');  
        itemElement.textContent = `${item.name} x ${item.quantity}`;  
        cartElement.appendChild(itemElement);  
    });  
}  

问题分析

1. 数据结构效率低：使用数组存储购物车商品，查找和更新需要遍历，时间复杂度为 O(n)。
2. 渲染性能差：每次操作后都重新渲染整个购物车，导致 DOM 操作频繁。

优化方案

1. 改用哈希表（对象）存储购物车数据
使用对象的键值对结构，查找和更新操作的时间复杂度降低到 O(1)。

let cart = {};  

function addToCart(product) {  
    if (cart[product.id]) {  
        cart[product.id].quantity += 1;  
    } else {  
        cart[product.id] = { ...product, quantity: 1 };  
    }  
    renderCart();  
}  

2. 优化渲染逻辑
采用增量更新方式，避免每次重新渲染整个购物车。

function renderCart() {  
    const cartElement = document.getElementById('cart');  
    // 仅更新变化的部分  
    Object.values(cart).forEach(item => {  
        let itemElement = document.getElementById(`cart-item-${item.id}`);  
        if (!itemElement) {  
            itemElement = document.createElement('div');  
            itemElement.id = `cart-item-${item.id}`;  
            cartElement.appendChild(itemElement);  
        }  
        itemElement.textContent = `${item.name} x ${item.quantity}`;  
    });  
}  

3. 引入虚拟滚动（适用于超长列表）
如果购物车商品数量极大（如 1000+），可采用虚拟滚动技术，仅渲染可视区域内的商品。

function renderCartWithVirtualScroll() {  
    const visibleItems = getVisibleItems(cart); // 根据滚动位置计算可见项  
    visibleItems.forEach(item => {  
        // 仅渲染可见项  
    });  
}  

最终效果

• 数据结构优化后，增删改查操作效率大幅提升。
• 渲染优化减少不必要的 DOM 操作，页面响应更流畅。
• 虚拟滚动技术进一步解决超长列表的性能问题。

通过以上改进，电商购物车的性能问题得到显著优化，用户体验提升。