前端性能优化实战经验分享从缓存到代码分割一步步提升网站速度

项目初期的技术选型

最近刚做完一个电商网站的前端重构项目，主要目标是提升整体性能，减少加载时间。这个项目背景其实挺简单的，就是客户反馈说页面加载慢，尤其是移动设备上体验更差。于是我们就决定从性能优化入手，看看能不能把这个问题搞定。

最大的坑：性能问题

开始的时候，我们首先用了一些常规的性能分析工具，比如Chrome DevTools和Lighthouse。发现了一些明显的问题，比如图片太大、第三方脚本加载时间长、CSS和JS文件没有压缩等。这些问题都还好解决，网上有很多现成的教程和工具可以参考。但是真正让我头疼的是首屏渲染时间过长。

一开始我以为只是资源加载的问题，但后来发现即使把所有资源都优化了，首屏渲染还是慢。这让我开始怀疑是不是代码本身有问题。于是我就开始着手排查代码层面的问题。

核心代码就这几行

在排查过程中，我发现了一个很关键的问题：我们的页面中有一个复杂的React组件，里面包含了大量的DOM操作和数据处理。这个组件在初始化时会触发大量的计算，导致浏览器卡顿。下面是这个组件的一部分代码：

import React, { useEffect, useState } from 'react';

const ProductList = ({ products }) => {
  const [filteredProducts, setFilteredProducts] = useState([]);

  useEffect(() => {
    // 这里是对产品列表进行过滤和排序
    const filtered = products.filter(product => product.category === 'Electronics');
    setFilteredProducts(filtered);
  }, [products]);

  return (
    

      {filteredProducts.map(product => (
        

          
{product.name}
          
{product.description}
          
${product.price}
        
      ))}
    
  );
};

export default ProductList;

这个组件看起来很简单，但在实际运行中却非常耗性能。特别是当产品列表很大时，过滤和排序的操作会非常耗时。我尝试了几种方法来优化这个组件，比如使用虚拟列表（Virtual List）和懒加载（Lazy Loading），但效果都不太理想。

折腾了半天发现

后来我决定换一种思路，直接在后端进行数据处理。这样可以减轻前端的负担，让页面更快地渲染出来。我在后端加了一个API，专门用来返回已经过滤和排序好的产品列表。以下是后端API的部分代码：

app.get('/api/products', (req, res) => {
  const category = req.query.category;
  const products = getProductsFromDatabase();

  const filteredProducts = products.filter(product => product.category === category);

  res.json(filteredProducts);
});

然后在前端直接调用这个API，获取到的数据已经是处理好的了。这样不仅减少了前端的计算量，还减少了网络请求的次数。

import React, { useEffect, useState } from 'react';

const ProductList = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('https://jztheme.com/api/products?category=Electronics')
      .then(response => response.json())
      .then(data => setProducts(data));
  }, []);

  return (
    

      {products.map(product => (
        

          
{product.name}
          
{product.description}
          
${product.price}
        
      ))}
    
  );
};

export default ProductList;

通过这种方式，页面的首屏渲染时间显著缩短了。虽然这个方案不是最优的，但确实解决了当前的问题。

最终的效果评估

经过这次优化，整个项目的性能有了明显的提升。特别是在移动设备上，用户反馈说页面加载速度变快了很多。当然，还有一些小问题没有完全解决，比如一些动态内容的加载速度还有待优化。但总体来说，这次优化达到了预期的效果。

回顾这次优化过程，我觉得有几个关键点需要注意：

• 使用性能分析工具：这是发现问题的第一步，也是最关键的一步。
• 尽量减少前端计算量：特别是在首屏渲染时，尽量避免复杂的计算。
• 前后端协同优化：有时候单纯优化前端并不够，还需要后端的支持。

以上是我的项目经验，希望对你有帮助

这次优化过程中踩了不少坑，但也学到了很多东西。希望我的经验对你有所帮助，如果有什么更好的建议或者优化方案，欢迎在评论区交流讨论。