前端性能玄学终结者：Chrome Lighthouse 评分从 30 到 90 的魔改日记

在前端开发领域，性能优化常常被开发者视为 “玄学”—— 明明做了优化，Chrome Lighthouse 评分却依然不尽人意。本文将以真实项目为案例，详细记录如何将 Lighthouse 评分从 30 分提升至 90 分以上，带你揭开前端性能优化的神秘面纱，掌握切实有效的优化方法。

一、问题初现：评分惨淡的原因分析

在项目开发初期，使用 Chrome Lighthouse 对页面进行性能检测，结果令人沮丧：整体评分仅为 30 分。仔细分析报告，发现主要存在以下几类问题：

1. 加载速度慢：页面资源（如图片、脚本、样式表）加载时间过长，导致首次内容绘制（FCP）和最大内容绘制（LCP）时间超标。
2. 资源未优化：图片体积过大，脚本和样式表未进行压缩和合并，存在大量冗余代码。
3. 交互体验差：输入延迟（FID）过高，用户操作页面时响应不及时，影响交互流畅性。
4. 可访问性不足：部分页面元素缺乏必要的语义化标签，不利于屏幕阅读器等辅助工具使用。

二、优化之路：逐步提升评分的实战操作

2.1 优化资源加载

1. 图片优化
2. 压缩图片：使用工具如 TinyPNG、ImageOptim 对项目中的所有图片进行离线压缩，将图片体积降低 50% 以上。
3. 使用 WebP 格式：WebP 是一种具有更好压缩比的图片格式，在浏览器兼容性允许的情况下，将图片转换为 WebP 格式。在 HTML 中，可以使用 <picture> 标签实现兼容处理：

   <picture>
       <source type="image/webp" srcset="image.webp">
       <source type="image/jpeg" srcset="image.jpg">
       <img src="image.jpg" alt="示例图片">
   </picture>
   

4. 懒加载：对于页面中不在可视区域内的图片，使用 loading="lazy" 属性实现懒加载，减少初始加载时的资源请求数量：

   <img src="image.jpg" alt="延迟加载图片" loading="lazy">
   

5. 脚本和样式表优化
   • 压缩与合并：使用构建工具（如 Webpack、Rollup）对 JavaScript 脚本和 CSS 样式表进行压缩和合并。以 Webpack 为例，配置如下：

• // webpack.config.js
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const TerserPlugin = require('terser-webpack-plugin');
  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  
  module.exports = {
      entry: './src/index.js',
      output: {
          path: __dirname + '/dist',
          filename: 'bundle.js'
      },
      module: {
          rules: [
              {
                  test: /\.css$/,
                  use: [MiniCssExtractPlugin.loader, 'css-loader']
              },
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: ['@babel/preset-env']
                      }
                  }
              }
          ]
      },
      optimization: {
          minimizer: [
              new TerserPlugin(),
              new OptimizeCSSAssetsPlugin({})
          ]
      },
      plugins: [
          new MiniCssExtractPlugin({
              filename: 'styles.css'
          })
      ]
  };

  2.异步加载脚本：对于非关键脚本，使用 async 或 defer 属性异步加载，避免阻塞页面渲染。例如：

<script src="script.js" async></script>
<script src="script.js" defer></script>

• 代码分割：将大型 JavaScript 文件分割成多个小块，按需加载。在 Webpack 中，可以使用 splitChunks 进行配置：

// webpack.config.js
module.exports = {
    //...其他配置
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

2.2 优化渲染性能

1. 减少重排与重绘：避免频繁修改会触发重排和重绘的样式属性，如 width、height 等。如果需要修改多个样式属性，尽量一次性修改，或者使用 class 切换来代替直接修改样式。

   // 不好的做法
   const element = document.getElementById('myElement');
   element.style.width = '200px';
   element.style.height = '200px';
   element.style.backgroundColor ='red';
   
   // 好的做法
   const element = document.getElementById('myElement');
   element.classList.add('new-style');
   

2. 使用 CSS 动画替代 JavaScript 动画：CSS 动画由浏览器的渲染引擎直接处理，性能更好。例如，使用 CSS 实现一个简单的旋转动画：

.rotate {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

<div class="rotate"></div>

2.3 提升交互体验

1. 减少 JavaScript 执行时间：优化 JavaScript 代码逻辑，避免出现长时间运行的函数。可以使用 requestIdleCallback 在浏览器空闲时执行非关键任务：

   ​
   function doSomething() {
       // 执行一些耗时操作
   }
   
   requestIdleCallback(doSomething);
   
   ​

2. 优化事件处理：避免在事件处理函数中进行过多的计算和 DOM 操作。可以使用事件委托来减少事件监听器的数量：

<ul id="parent">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

const parent = document.getElementById('parent');
parent.addEventListener('click', function (event) {
    if (event.target.tagName === 'LI') {
        // 处理点击事件
    }
});

2.4 增强可访问性

1. 使用语义化标签：合理使用 <header>、<nav>、<main>、<footer> 等语义化标签，使页面结构更加清晰，便于屏幕阅读器理解：

   <header>
       <h1>网站标题</h1>
   </header>
   <nav>
       <ul>
           <li><a href="#">首页</a></li>
           <li><a href="#">关于</a></li>
           <li><a href="#">联系我们</a></li>
       </ul>
   </nav>
   <main>
       <p>页面主要内容</p>
   </main>
   <footer>
       <p>版权信息</p>
   </footer>
   

2. 为图片添加 alt 属性：为所有图片添加描述性的 alt 属性，以便在图片无法加载时提供替代文本：

<img src="image.jpg" alt="这是一张示例图片">

三、优化成果：评分飙升至 90 分

经过一系列的优化操作后，再次使用 Chrome Lighthouse 对页面进行检测，惊喜地发现整体评分从 30 分提升至 90 分以上。各项指标均有显著改善：

• 加载速度：首次内容绘制（FCP）和最大内容绘制（LCP）时间大幅缩短，页面几乎瞬间呈现。
• 资源优化：图片体积减小，脚本和样式表得到有效压缩和合并，网络请求数量减少。
• 交互体验：输入延迟（FID）显著降低，用户操作更加流畅。
• 可访问性：页面元素语义化增强，辅助工具能够更好地理解和访问页面内容。

四、总结与反思

通过这次从 30 分到 90 分的性能优化实践，我们深刻认识到前端性能优化并非 “玄学”，而是有章可循、有法可依的系统工程。在优化过程中，需要从资源加载、渲染性能、交互体验、可访问性等多个方面入手，结合具体项目需求和浏览器特性，综合运用各种优化技术和工具。同时，性能优化是一个持续的过程，随着项目的迭代和用户需求的变化，我们需要不断监控和调整优化策略，以保持页面的高性能表现。

希望本文的优化经验和方法能够帮助你解决前端性能问题，告别性能 “玄学”，打造出更加高效、流畅的前端应用。