前端性能优化终极指南

古城微笑少年丶 2024-04-29 19:20 13阅读 0赞

前端性能优化一直是很多同学非常关注的问题，在日常的面试中也是经常会被用到的点。今天就来了解一下**前端性能优化方案。**

### 一：页面渲染相关 ###

#### 01：减少页面重绘和回流 ####

> 回流（reflow）：是指由于DOM结构或样式发生改变，浏览器需要重新计算元素的几何属性，然后重新布局页面的过程  
> 重绘（repaint）：是指当元素样式发生改变，但不影响布局时，浏览器只需要重新绘制受影响的部分，而不需要重新计算布局

*  尽量减少使用 CSS 属性的快捷方式：例如，使用 border-width、border-style 和 border-color 而不是 border。CSS 属性的快捷方式会将所有值初始化为“初始值”，因此避免使用它们可以最小化重绘和回流（在实际工作中，CSS 快捷方式的性能影响微乎其微，并且使用快捷方式可以简化样式并解决一些样式覆盖问题）。
 *  在 GPU 上渲染动画：浏览器已经优化了 CSS 动画，使其适用于触发动画属性的重绘（因此也包括回流）。为了提高性能，将具有动画效果的元素移动到 GPU 上。可以触发 GPU 硬件加速的 CSS 属性包括 transform、filter、will-change 和 position:fixed。动画将在 GPU 上处理，提高性能，特别是在移动设备上（但避免过度使用，因为可能会导致性能问题）。
 *  使用 will-change CSS 属性来提高性能：它通知浏览器元素需要修改的属性，使浏览器能够在实际更改之前进行优化（但避免过度使用 will-change；在动画中遇到性能问题时考虑使用它）。
 *  通过更改 className 批量修改元素样式。
 *  将复杂的动画元素定位为 fixed 或 absolute 以防止回流。
 *  避免使用表格布局：因为在表格元素上触发回流会导致其中所有其他元素的回流。
 *  使用 translate 而不是修改 top 属性来上下移动 DOM 元素。
 *  创建多个 DOM 节点时，使用 DocumentFragment 进行一次性创建。
 *  必要时为元素定义高度或最小高度：没有显式高度，动态内容加载可能会导致页面元素移动或跳动，从而导致回流（例如，为图像定义宽度和高度以防止布局变化并减少回流）。
 *  尽量减少深度嵌套或复杂选择器的使用，以提高 CSS 渲染效率。
 *  对元素进行重大样式更改时，暂时使用 display:none 隐藏它们，进行更改，然后将它们设置回 display:block。这样可以最小化回流，只需两次即可。
 *  使用 contain CSS 属性将元素及其内容与文档流隔离，防止其边界框外意外副作用的发生。

#### 02：图像压缩、切片和精灵 ####

*  **图像压缩：** 图像压缩至关重要。许多图像托管工具提供内置的压缩功能。如果需要手动压缩图像，可以使用像TinyPNG这样的工具来帮助。
 *  **图像切片：** 当显示大型图像，例如实时渲染，并且UI设计师不允许压缩时，考虑将图像切片并使用CSS布局将其拼合在一起。
 *  **精灵图：** 与图像切片不同，精灵图涉及将许多小图像合并成一个大图像。这样，在加载页面时，只需要获取一个图像来显示多个页面元素。这可以显著提高页面加载速度。然而，当调整页面布局时，精灵图可能难以维护。

#### 03：字体文件压缩 ####

在开发诸如特定活动的移动网页等项目时，通常会使用@font-face接口来导入字体文件以实现更丰富的排版效果。然而，完整的字体文件往往有 几M 大小。加载这样的文件可能会阻塞页面渲染，导致文字显示延迟。

**解决方案：** 可以使用Font-spider从字体文件中提取出只有必要的字符。

#### 04：延迟加载/预加载资源 ####

*  **懒加载：** 懒加载是指仅在图像进入浏览器视口时加载图像。图像最初设置为占位符（通常是 1x1px 图像）。加载图像的决定基于图像的 offsetTop 减去页面的 scrollTop 是否小于或等于浏览器视口的 innerHeight。
 *  **预加载：** 资源提示，包括预连接、预加载、预获取等，允许您指定要提前加载的资源。这可以基于当前页面或应用程序状态、用户行为或会话数据。这些资源提示方法可以通过预加载必要的资源来增强性能。实现选项包括使用链接标签进行 DNS 预取、子资源、预加载、预获取、预连接、预渲染，以及使用本地存储进行本地存储。

### 二：捆绑优化 ###

#### 01：Webpack 用于 resolve.alias 的优化（同样适用于 Vite） ####

resolve.alias配置将原始导入路径映射到新的导入路径，具有两个目的：

1.  创建别名
2.  减少查找时间。

例如：

resolve: {
     alias: {alias: {
       ‘vue$’: ‘vue/dist/vue.esm.js’,
       ‘@’: resolve(‘src’),
     }
    }

#### 02：Webpack对解决方案的优化(也适用于 Vite) ####

resolve.extensions 表示要尝试的文件扩展名列表。它还会影响构建性能，并默认为：

extensions: ['.js', '.json']'.js', '.json']

例如，当遇到像 require('./data') 这样的导入语句时，Webpack 首先会查找 ./data.js。如果未找到，它将搜索 ./data.json，如果仍未找到，它将抛出错误。

因此，建议尽量保持扩展名列表尽可能简洁，省略不太可能出现的情况。将最常用的文件扩展名放在最前面，以加快搜索过程。

resolve: {
     extensions: ['.js', '.vue', '.json'],'.js', '.vue', '.json'],
    }

#### 03：webpack 限定 loader 的加载范围（不适用于 Vite） ####

加载器（loader）可能会消耗大量性能，因此在配置加载器时，可以使用 include 和 exclude 来限制范围，从而优化性能。

例如：

{
     test: /\.svg$/,test: /\.svg$/,
     loader: ‘svg-sprite-loader’,
     include: [resolve(‘src/icons’)],
    }

#### 04：使用 webpack || Vite 拆分代码 ####

在没有任何配置的情况下，Webpack 4会自动处理代码拆分。入口文件的依赖项被捆绑到main.js中，而大于30kb的第三方包（例如echarts、xlsx、dropzone）被单独捆绑到独立的包中。其他异步加载的页面或组件成为单独的块。

Webpack内置的代码拆分策略：

*  新块是否来自共享或node\_modules。
 *  新块在压缩前的大小是否大于30kb。
 *  异步加载块的并发请求计数是否小于或等于5。
 *  初始页面加载的并发请求计数是否小于或等于3。

我们可以根据项目的需要调整配置。以下是Webpack代码拆分的示例配置：

splitChunks({
       cacheGroups: {
         vendors: {
           name: `chunk-vendors`,
           test: /[\\/]node_modules[\\/]/,
           priority: -10,
           chunks: ‘initial’,
         },
         dll: {
           name: `chunk-dll`,
           test: /[\\/]bizcharts|[\\/]\@antv[\\/]data-set/,
           priority: 15,
           chunks: ‘all’,
           reuseExistingChunk: true
         },
         common: {
           name: `chunk-common`,
           minChunks: 2,
           priority: -20,
           chunks: ‘all’,
           reuseExistingChunk: true
         },
       }
    })

对于 Vite 同样可以执行对应拆分操作：

build: {
       rollupOptions: {
         output: {
           chunkFileNames: ‘js/[name]-[hash].js’,
           entryFileNames: ‘js/[name]-[hash].js’,
           assetFileNames: ‘[ext]/[name]-[hash].[ext]’
         }
       }
    }

#### 05:Tree Shaking（摇树优化） ####

Tree shaking 是一种从项目中删除未使用代码的技术。它依赖于 ES 模块语法。例如，当使用 lodash 时：

// Bad: This imports the entire lodash library
    import _ from 'lodash';
    // Good: This imports only the 'isEmpty' function from lodash
    import _isEmpty from 'lodash/isEmpty';

Tree Shaking 在很大程度上减少了捆绑包的大小，是性能优化的重要部分。 Vite 和 Webpack 4.x 默认情况下都启用了 Tree Shaking。

#### 06：在 Vite 中禁用不必要的构建配置 ####

Vite 还提供了优化构建配置的选项。以下是禁用某些构建功能的示例：

build: { 
     terserOptions: {
       compress: {
         // Remove console in production// Remove console in production
         drop_console: true,
         drop_debugger: true,
       },
     },
    
     // Disable file size reporting
     reportCompressedSize: false,
     // Disable source map generation to reduce bundle size (important for production)
     sourcemap: false, // Disable this for production to minimize bundle size
    
    }

### 三：整体优化 ###

#### 01：服务端渲染(SSR) ####

服务器端渲染（SSR）是指在服务器上完成的渲染过程。最终渲染的HTML页面通过HTTP协议发送到客户端。在SEO和首次加载速度方面，SSR提供了显著的好处。

*  Vue：可以通过 Nuxt.js 实现
 *  React：可以通过 Next.js 实现

#### 02：启用GZIP压缩 ####

Gzip压缩通过压缩文件显着提高了首次加载速度。使用Gzip可以将文本文件压缩至原始大小的至少40%。不过，需要注意的是图像文件不应该使用Gzip压缩。

在构建过程中设置Gzip压缩的步骤如下：

1.  在Vue项目中安装Gzip压缩所需的依赖，并将productionGzip设置为true以启用Gzip压缩。

npm install --save-dev compression-webpack-plugin--save-dev compression-webpack-plugin

1.  修改构建命令以使用Gzip压缩。不过需要注意，这可能会遇到错误“ValidationError: Compression Plugin Invalid Options”。为了解决这个问题，根据官方文档将设置从“asset”更改为“filename”。
2.  再次运行构建命令 npm run build，你将生成 .gz 文件，表示成功压缩。

#### 03：Brotli 压缩 ####

> Brotli是开源的一种新型压缩算法（2015 年 Google 推出，Github 地址：https://github.com/google/brotli ），Brotli压缩比Gzip压缩性能更好。开启Brotli压缩功能后，CDN节点会对资源进行智能压缩后返回，缩小传输文件大小，提升文件传输效率，减少带宽消耗。

启用Brotli压缩可以将CDN流量额外减少20%，相较于Gzip。在各种情况下，Brotli的性能比Gzip高出17-25%，特别是当设置为级别1时，超过了Gzip级别9的压缩效果。（数据来自 Google 数据报告：`https://quixdb.github.io/squash-benchmark/unstable/` ）

大多数主流浏览器都支持Brotli压缩，除了Internet Explorer和Opera Mini。

要在Vite项目中启用Brotli压缩，可以使用vite-plugin-compression插件。修改您的.env.production文件，相应地设置VITE\_COMPRESSION全局变量。

# 默认情况下禁用压缩：#默认情况下禁用压缩:
       VITE_COMPRESSION = "none"
    
      # 以下配置支持在不删除原始文件的情况下进行压缩:
       Enable Gzip compression:
       VITE_COMPRESSION = "gzip"
    
       # 启用Brotli压缩:
       VITE_COMPRESSION = "brotli"
    
       # 同时启用GZIP和Brotli压缩:
       VITE_COMPRESSION = "both"
    
       # 以下配置启用压缩和删除原始文件:
       Enable Gzip compression:
       VITE_COMPRESSION = "gzip-clear"
    
       # 启用Brotli压缩:
       VITE_COMPRESSION = "brotli-clear"
    
       # 同时启用GZIP和Brotli压缩:
       VITE_COMPRESSION = "both-clear"

#### 04：缓存问题 ####

缓存是一种基本的优化技术，通过减少IO操作和CPU计算来提高性能。性能优化的第一条规则是优先考虑缓存。

缓存选项包括浏览器缓存、CDN缓存、反向代理、本地缓存、分布式缓存和数据库缓存。

#### 05：Ajax 缓存 ####

Ajax 缓存请求的 URL 和响应结果，以提高页面响应速度和用户体验。在进行 Ajax 请求时，尽量使用 GET 方法，以利用客户端缓存并增强请求速度。

#### 06：组件导入 ####

使用第三方组件库时，只导入必要的组件，例如

import { Button } from ‘vant’

#### 07：动态加载 ####

使用import()在需要时动态导入第三方库和组件。例如，在测试环境中，只有当主机域名不是生产域名时才启用VConsole调试。

if (location.host !== ‘production-domain’) {
     import(‘@/utils/vconsole’);import(‘@/utils/vconsole’);
    }

#### 08：异步组件加载 ####