Hello，大家好，我是 Sunday。
前端性能优化一直是很多同学非常关注的问题，在日常的面试中也是经常会被问到的点。所以今天咱们就花一点时间来了解一下2024最新的前端性能优化方案，以此来助大家高效工作，面试顺利！
一：页面渲染相关
01：减少页面重绘和回流
回流（reflow）：是指由于DOM结构或样式发生改变，浏览器需要重新计算元素的几何属性，然后重新布局页面的过程 重绘（repaint）：是指当元素样式发生改变，但不影响布局时，浏览器只需要重新绘制受影响的部分，而不需要重新计算布局
02：图像压缩、切片和精灵
03：字体文件压缩
在开发诸如特定活动的移动网页等项目时，通常会使用@font-face接口来导入字体文件以实现更丰富的排版效果。然而，完整的字体文件往往有 几M 大小。加载这样的文件可能会阻塞页面渲染，导致文字显示延迟。
解决方案： 可以使用Font-spider从字体文件中提取出只有必要的字符。
04：延迟加载/预加载资源
二：捆绑优化
01：Webpack 用于 resolve.alias 的优化（同样适用于 Vite）
resolve.alias配置将原始导入路径映射到新的导入路径，具有两个目的：
例如：
02：Webpack对解决方案的优化(也适用于 Vite)
resolve.extensions 表示要尝试的文件扩展名列表。它还会影响构建性能，并默认为：
例如，当遇到像 require('https://www.bilibili.com/read/cv32379796/data') 这样的导入语句时，Webpack 首先会查找 https://www.bilibili.com/read/cv32379796/data.js。如果未找到，它将搜索 https://www.bilibili.com/read/cv32379796/data.json，如果仍未找到，它将抛出错误。
因此，建议尽量保持扩展名列表尽可能简洁，省略不太可能出现的情况。将最常用的文件扩展名放在最前面，以加快搜索过程。
03：webpack 限定 loader 的加载范围（不适用于 Vite）
加载器（loader）可能会消耗大量性能，因此在配置加载器时，可以使用 include 和 exclude 来限制范围，从而优化性能。
例如：
04：使用 webpack || Vite 拆分代码
在没有任何配置的情况下，Webpack 4会自动处理代码拆分。入口文件的依赖项被捆绑到main.js中，而大于30kb的第三方包（例如echarts、xlsx、dropzone）被单独捆绑到独立的包中。其他异步加载的页面或组件成为单独的块。
Webpack内置的代码拆分策略：
我们可以根据项目的需要调整配置。以下是Webpack代码拆分的示例配置：
对于 Vite 同样可以执行对应拆分操作：
05:Tree Shaking（摇树优化）
Tree shaking 是一种从项目中删除未使用代码的技术。它依赖于 ES 模块语法。例如，当使用 lodash 时：
Tree Shaking 在很大程度上减少了捆绑包的大小，是性能优化的重要部分。 Vite 和 Webpack 4.x 默认情况下都启用了 Tree Shaking。
06：在 Vite 中禁用不必要的构建配置
Vite 还提供了优化构建配置的选项。以下是禁用某些构建功能的示例：
三：整体优化
01：服务端渲染(SSR)
服务器端渲染（SSR）是指在服务器上完成的渲染过程。最终渲染的HTML页面通过HTTP协议发送到客户端。在SEO和首次加载速度方面，SSR提供了显著的好处。
02：启用GZIP压缩
Gzip压缩通过压缩文件显着提高了首次加载速度。使用Gzip可以将文本文件压缩至原始大小的至少40%。不过，需要注意的是图像文件不应该使用Gzip压缩。
在构建过程中设置Gzip压缩的步骤如下：
03：Brotli 压缩
Brotli是开源的一种新型压缩算法（2015 年 Google 推出，Github 地址： ），Brotli压缩比Gzip压缩性能更好。开启Brotli压缩功能后，CDN节点会对资源进行智能压缩后返回，缩小传输文件大小，提升文件传输效率，减少带宽消耗。
启用Brotli压缩可以将CDN流量额外减少20%，相较于Gzip。在各种情况下，Brotli的性能比Gzip高出17-25%，特别是当设置为级别1时，超过了Gzip级别9的压缩效果。（数据来自 Google 数据报告： ）
大多数主流浏览器都支持Brotli压缩，除了Internet Explorer和Opera Mini。
要在Vite项目中启用Brotli压缩，可以使用vite-plugin-compression插件。修改您的.env.production文件，相应地设置VITE_COMPRESSION全局变量。
04：缓存问题
缓存是一种基本的优化技术，通过减少IO操作和CPU计算来提高性能。性能优化的第一条规则是优先考虑缓存。
缓存选项包括浏览器缓存、CDN缓存、反向代理、本地缓存、分布式缓存和数据库缓存。
05：Ajax 缓存
Ajax 缓存请求的 URL 和响应结果，以提高页面响应速度和用户体验。在进行 Ajax 请求时，尽量使用 GET 方法，以利用客户端缓存并增强请求速度。
06：组件导入
使用第三方组件库时，只导入必要的组件，例如
07：动态加载
使用import()在需要时动态导入第三方库和组件。例如，在测试环境中，只有当主机域名不是生产域名时才启用VConsole调试。
08：异步组件加载
使用 import 或 require 方法异步加载组件：
09：懒加载路由
懒加载路由是在路由配置中应用异步组件加载的一种方式：
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 提供此功能
13：Web Workers
Web Workers 为 Javascript 创建了一个多线程环境，允许任务在后台运行而不阻塞主线程。对于计算密集型任务，使用 Web Workers 可以优化性能。
前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 。欢迎来撩~~~~~~~~
参考链接：