前端性能优化——代码优化

最新推荐文章于 2025-03-28 18:29:58 发布

夜月还山岚

最新推荐文章于 2025-03-28 18:29:58 发布

阅读量1.1k

点赞数 21

文章标签：前端性能优化

本文链接：https://blog.csdn.net/jxnd123456/article/details/143292865

版权

前端性能优化可以从多个方面下手，例如加载性能优化、渲染性能优化、代码优化、缓存优化、性能监测和优化等方面下手，下面针对代码优化分享一下优化思路

一、HTML优化

1.减少不必要的标签和嵌套

确保HTML结构简洁明了，一些意义不大的标签尽量去除，避免太多无意义的标签嵌套。例如，代码中常会使用<div>作为容器，在不注意的情况下可能或包裹多层，代码示例：

     <!-- 不推荐 -->
     <div>
       <div>
         <p>这是一段文本</p>
       </div>
     </div>
     <!-- 推荐 -->
     <p>这是一段文本</p>

2.压缩HTML

去除 HTML 中的注释、多余的空格和换行符等。可以在项目构建过程中使用工具如 HTMLMinifier 来自动压缩 HTML 文件。

代码示例（使用 HTMLMinifier 前和后对比）：

     <!-- 未压缩前 -->
     <html>
       <head>
         <title>My Page</title>
       </head>
       <body>
         <p>这是一个示例页面。</p>
       </body>
     </html>
     <!-- 压缩后 -->
     <html><head><title>My Page</title></head><body><p>这是一个示例页面。</p></body></html>

二、CSS优化

1.合并和压缩 CSS 文件

将多个 CSS 文件合并为一个文件，并使用工具如 CSSNano 进行压缩，减少文件大小和 HTTP 请求次数。

示例命令（使用 Webpack 结合 CSSNano）：

     module.exports = {
       //...
       module: {
         rules: [
           {
             test: /\.css$/,
             use: [
               'style-loader',
               {
                 loader: 'css-loader',
                 options: {
                   importLoaders: 1,
                 },
               },
               'postcss-loader',
             ],
           },
         ],
       },
       plugins: [
         new MiniCssExtractPlugin({
           filename: '[name].[contenthash].css',
         }),
         new CssNanoPlugin(),
       ],
     };

2.避免使用复杂的选择器

复杂的 CSS 选择器会增加浏览器解析 CSS 的时间。尽量使用简单、直接的选择器。例如，使用类名选择器代替复杂的后代选择器或属性选择器。

代码示例：

     /* 不推荐：复杂选择器 */
     div ul li a:hover {
       color: red;
     }
     /* 推荐：简单选择器 */
    .link:hover {
       color: red;
     }

3.利用 CSS 变量

使用 CSS 变量可以减少重复代码，提高代码的可维护性，并且可以在需要时轻松更改全局样式。

代码示例：

     :root {
       --primary-color: blue;
     }
    .button {
       background-color: var(--primary-color);
     }

三、JavaScript 优化

1.压缩JavaScript 代码

使用工具如 UglifyJS 或 Terser 对 JavaScript 代码进行压缩，去除不必要的空格、注释和变量名，减小文件大小。

示例命令（使用 Webpack 结合 TerserPlugin）：

     const TerserPlugin = require('terser-webpack-plugin');

     module.exports = {
       //...
       optimization: {
         minimizer: [
           new TerserPlugin({
             terserOptions: {
               compress: {
                 drop_console: true,
               },
             },
           }),
         ],
       },
     };

2.减少使用全局变量

过多的全局变量会增加命名冲突的风险，并且可能导致性能问题。尽量使用局部变量和函数参数来传递数据。

代码示例：

     // 不推荐：使用全局变量
     let globalVar = 0;
     function increment() {
       globalVar++;
     }
     // 推荐：使用局部变量
     function incrementLocal() {
       let localVar = 0;
       return localVar + 1;
     }

3.延迟加载非关键脚本

对于一些非关键的 JavaScript 脚本，可以使用异步加载的方式，在页面加载完成后再进行加载，以减少初始加载时间。

代码示例（使用 defer 或 async 属性）：

     <script src="main.js" defer></script>
     <!-- 或者 -->
     <script src="non-critical.js" async></script>

4.优化循环

在循环中尽量减少不必要的操作，避免重复计算和频繁的属性访问。可以考虑使用缓存变量和优化循环条件。

代码示例：

     // 不推荐
     for (let i = 0; i < array.length; i++) {
       console.log(array[i]);
     }
     // 推荐
     const length = array.length;
     for (let i = 0; i < length; i++) {
       console.log(array[i]);
     }