前端性能优化终极指南

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

一：页面渲染相关

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配置将原始导入路径映射到新的导入路径，具有两个目的：

创建别名
减少查找时间。

例如：

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

Copy

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

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

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

Copy

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

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

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

Copy

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

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

例如：

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

Copy

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
     },
   }
})

Copy

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

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

Copy

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';

Copy

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

}

Copy

三：整体优化

01：服务端渲染(SSR)

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

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

02：启用GZIP压缩

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

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

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

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

Copy

修改构建命令以使用Gzip压缩。不过需要注意，这可能会遇到错误“ValidationError: Compression Plugin Invalid Options”。为了解决这个问题，根据官方文档将设置从“asset”更改为“filename”。
再次运行构建命令 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"

Copy

04：缓存问题

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

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

05：Ajax 缓存

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

06：组件导入

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

import { Button } from ‘vant’

Copy

07：动态加载

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

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

Copy

08：异步组件加载

使用 import 或 require 方法异步加载组件：

() => import(‘@/pages/xxx.vue’)

resolve => require(['@/pages/xxx.vue'], resolve)

Copy

09：懒加载路由

懒加载路由是在路由配置中应用异步组件加载的一种方式：

{
 path: '/index','/index',
 name: 'index',
 component: () => import('@view/xxx.vue'),
 meta: { title: 'Homepage' }
}

Copy

10：CDN（内容分发）

内容传送网络（CDN）将静态文件、音频、视频、JavaScript 资源、图片等分发到全球各地的服务器。通过从附近的 CDN 服务器提供资源，可以减少延迟并提高加载速度。

11：域名分片(Domain sharding)

由于浏览器限制了每个域（domain）的活动连接数。为了可以同时下载超过该限制数的资源，域名分片（domain sharding）会将内容拆分到多个子域中。当使用多个域来处理多个资源时，浏览器能够同时下载更多资源，从而缩短了页面加载时间并改善了用户体验。

12：DNA预取

DNS-prefetch 尝试在请求资源之前解析域名

当浏览器从（第三方）服务器请求资源时，必须先将该跨源域名解析为 IP 地址，然后浏览器才能发出请求。此过程称为 DNS 解析。虽然 DNS 缓存可以帮助减少此延迟，但 DNS 解析可能会给请求增加明显的延迟。对于打开了与许多第三方的连接的网站，此延迟可能会大大降低加载性能。

dns-prefetch 可帮助开发人员掩盖 DNS 解析延迟。

HTML 元素通过设置 rel 属性值为 dns-prefetch 提供此功能

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <!-- dns-prefetch -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
    <!-- 其他 head 元素 -->
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

Copy

13：Web Workers

Web Workers 为 JavaScript 创建了一个多线程环境，允许任务在后台运行而不阻塞主线程。对于计算密集型任务，使用 Web Workers 可以优化性能。