前端性能优化实战总结与关键技巧解析

国曼发布于 2026-03-28 02:27:03 框架阅读 1,595

原创

本文链接：https://www.jztheme.com/blog/framework/40348.html

国曼

赞 7 收藏反馈

性能优化又翻车了，这次是列表渲染太慢

最近在做一个商城项目，首页的商品列表数据量有点大，大概三四百条的样子。一开始觉得这数据量不大啊，结果真机测试的时候发现页面卡得不行，尤其是低端安卓机上，滚动起来跟幻灯片似的。

这里我踩了个坑，一开始以为是接口请求的问题，折腾了半天去优化后端接口，甚至还加了缓存。后来用Chrome DevTools的Performance面板一测，发现问题出在前端渲染上。

三种方案对比，我选了最简单的

刚开始我试了几个方法，比如直接用CSS的will-change属性来优化滚动：

.list-item {
  will-change: transform;
}

这个方法亲测有效，但效果不够明显。尤其在低端机上，还是会有明显的卡顿。

接着我又试了虚拟列表，就是只渲染可视区域的内容。这个方案确实能解决问题，但实现起来比较复杂，需要计算每个item的高度，还要监听滚动事件动态更新。对于一个赶工期的项目来说，实在没那么多时间折腾。

最后我选择了Intersection Observer API来做懒加载，简单粗暴又好用。虽然不是最优解，但对于当前项目来说够用了。

核心代码就这几行

下面直接上代码，这是我最终的实现方案：

// 商品列表组件
export default {
  data() {
    return {
      items: [], // 所有商品数据
      visibleItems: [] // 当前可见的商品数据
    }
  },
  mounted() {
    this.loadItems()
    this.initObserver()
  },
  methods: {
    async loadItems() {
      const res = await fetch('https://jztheme.com/api/products')
      this.items = await res.json()
      this.visibleItems = this.items.slice(0, 20) // 先加载前20条
    },
    initObserver() {
      const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const index = parseInt(entry.target.dataset.index)
            this.loadMore(index)
            observer.unobserve(entry.target)
          }
        })
      }, { threshold: 0.5 })

      this.$refs.sentinel && observer.observe(this.$refs.sentinel)
    },
    loadMore(index) {
      const newItems = this.items.slice(0, index + 30) // 每次多加载30条
      this.visibleItems = newItems
    }
  }
}

<template>
  <div>
    <div v-for="(item, index) in visibleItems" :key="item.id">
      <ProductItem :data="item" />
    </div>
    <div ref="sentinel" style="height: 1px;"></div>
  </div>
</template>

这里有几个点需要注意：