2024最新版:前端性能优化方案汇总
前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~
Hello，大家好，我是 Sunday。
前端性能优化一直是很多同学非常关注的问题，在日常的面试中也是经常会被问到的点。所以今天咱们就花一点时间来了解一下2024最新的前端性能优化方案，以此来助大家高效工作，面试顺利！
一：页面渲染相关
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’),
}
}
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压缩的步骤如下：
- 在Vue项目中安装Gzip压缩所需的依赖，并将productionGzip设置为true以启用Gzip压缩。
npm install --save-dev compression-webpack-plugin--save-dev compression-webpack-plugin
- 修改构建命令以使用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"
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：异步组件加载
使用 import 或 require 方法异步加载组件：
() => import(‘@/pages/xxx.vue’)
resolve => require(['@/pages/xxx.vue'], resolve)
09：懒加载路由
懒加载路由是在路由配置中应用异步组件加载的一种方式：
{
path: '/index','/index',
name: 'index',
component: () => import('@view/xxx.vue'),
meta: { title: 'Homepage' }
}
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>
13：Web Workers
Web Workers 为 JavaScript 创建了一个多线程环境，允许任务在后台运行而不阻塞主线程。对于计算密集型任务，使用 Web Workers 可以优化性能。
参考链接：
- https://developer.mozilla.org/zh-CN/docs/Web/Performance/dns-prefetch
- https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers
- https://developer.mozilla.org/zh-CN/docs/Glossary/Domain_sharding
- https://github.com/google/brotli
- https://quixdb.github.io/squash-benchmark/unstable/
- https://help.aliyun.com/zh/cdn/user-guide/configure-brotli-compression
- https://medium.com/javascript-in-plain-english/frontend-performance-optimization-checklist-for-2023-c49257237084
- https://juejin.cn/post/7071975873129218062
- https://cloud.tencent.com/developer/article/2164335