前端性能优化终极指南（前端性能优化原理与实践）

优化前端性能一直是很多同学关心的一大问题，也是日常面试中经常用到的点。立即了解前端性能优化解决方案。

一：页面渲染相关

01：减少页面重绘和回流

重排（Reflow）：指DOM 结构或样式发生变化，需要浏览器重新计算元素的几何属性并重新排列页面的过程。

重绘：如果元素的样式发生变化但布局不受影响，这意味着浏览器应该只重绘受影响的部分而不重新计算布局。

尽量减少CSS 属性快捷方式的使用。例如，使用边框宽度、边框样式和边框颜色来代替边框。 CSS 属性快捷方式将所有值初始化为“初始值”，因此避免它们可以最大限度地减少重绘和回流（事实上，CSS 快捷方式对性能的影响最小）（并且使用快捷方式可以简化样式并解决一些样式覆盖问题）。在GPU 上渲染动画：浏览器优化CSS 动画以触发动画属性的重绘（从而回流）。要提高性能，请将动画元素移至GPU。可以触发GPU硬件加速的CSS属性包括transform、filter、will-change和position:fixed。动画在GPU 上处理，这可以提高性能，尤其是在移动设备上（但不要过度处理，因为这可能会导致性能问题）。使用will-change CSS 属性提高性能。这告诉浏览器元素的哪些属性需要更改，允许浏览器在实际更改之前进行优化（但避免过度使用will-change。如果有动画性能问题，请考虑使用此属性）。通过改变className来批量改变元素样式。将复杂的动画元素放置为固定或绝对以防止回流。避免使用表格布局。在表元素上触发回流将回流其中的所有其他元素。要向上或向下移动DOM 元素，请使用translate 而不是更改top 属性。如果要创建多个DOM 节点，请使用DocumentFragment 一次性创建它们。根据需要定义元素高度或最小高度。如果没有明确指定高度，动态内容加载可能会导致页面元素移动或跳跃，从而导致回流（例如图像宽度和宽度以防止布局更改并减少回流）。尽量减少使用深度嵌套或复杂的选择器，以提高CSS 渲染效率。如果要对元素进行主要样式更改，请使用display:none 暂时隐藏该元素，进行更改，然后将其更改回display:block。这最大限度地减少了回流，并且只需要两次通过。使用contains CSS 属性将元素及其内容与文档流分开，并防止在边界框之外产生意外的副作用。

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

图像压缩：图像压缩非常重要。许多图像托管工具都具有内置的压缩功能。如果您需要手动压缩图像，TinyPNG 等工具可能会有所帮助。图像切片：如果您显示大图像（例如实时渲染），并且您的UI 设计器不允许压缩，请考虑对图像进行切片并使用CSS 布局组合它们。精灵：与图像切片不同，精灵涉及将许多较小的图像组合成一张较大的图像。这样，当页面加载时，您只需要检索一张图像即可显示多个页面元素。这将显着提高页面加载速度。然而，在调整页面布局时，精灵可能很难维护。

03：字体文件压缩

在开发用于特定活动的移动网页等项目时，您常常希望使用@font-face接口导入字体文件，以实现更丰富的排版效果。然而，完整的字体文件大小往往有几兆字节。加载此类文件可能会阻止页面渲染并延迟文本的显示。

解决方案：您可以使用Font-spider从字体文件中仅提取您想要的字符。

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

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

二：捆绑优化

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

solve.alias 配置将原始导入路径映射到新的导入路径，有两个用途：

创建别名以减少搜索时间。

例如：

已解决： {

别名： { 别名： {

‘vue$’: ‘vue/dist/vue.esm.js’,

‘@’:solve(‘src’),

}

}

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

solve.extensions 表示要尝试的文件扩展名列表。这也会影响构建性能，默认为：

扩展名： [\’.js\’, \’.json\’]\’.js\’, \’.json\’]

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

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

已解决： {

扩展名： [\’.js\’, \’.vue\’, \’.json\’], \’.js\’, \’.vue\’, \’.json\’],

}

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

加载器会消耗大量性能，因此在配置加载器时，您可以使用包含和排除来限制范围并优化性能。

例如：

{

test: /\\.svg$/,test: /\\.svg$/,

loader: \”svg-sprite 加载程序\”,

include: [解析(‘src/icons’)],

}

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

Webpack 4 无需任何配置即可自动处理代码分割。入口文件依赖被捆绑到main.js中，但是大于30kb的第三方包（echarts、xlsx、dropzone等）被单独捆绑在单独的包中。异步加载的其他页面或组件将位于单独的块中。

Webpack内置的代码分割策略：

新块是来自共享还是来自node_modules。压缩前的新块大小是否大于30kb。异步加载chunk 的并发请求数是否为5 个或更少。初始页面加载的并发请求数是否为3或更少。

您可以根据您的项目需要调整配置。以下是Webpack 代码分割的示例配置。

分割块({

缓存组： {

供应商： {

name: `块供应商`,

test: /[\\\\/]node_modules[\\\\/]/,

优先级： -10，

chunks:“初始”，

},

dll: {

name: `chunk-dll`,

test: /[\\\\/]bizcharts|[\\\\/]\\@antv[\\\\/]data-set/,

优先级： 15,

chunks:“全部”，

ReuseExistingChunk: true

},

常见： {

name:`常见块`,

minChunks: 2,

优先级： -20，

chunks:“全部”，

ReuseExistingChunk: true

},

}

})

对于Vite，也可以进行相应的拆分操作。

构建： {

rollupOptions: {

输出： {

chunkFileNames: \’js/[名称]-[哈希].js\’,

入口文件名： ‘js/[name]-[hash].js’,

assetFileNames: ‘[扩展名]/[名称]-[哈希].[扩展名]’

}

}

}

05:Tree Shaking（摇树优化）

Tree Shaking 是一种从项目中删除未使用的代码的技术。取决于ES 模块语法。例如，使用lodash：

//Bad: 这将导入整个lodash 库

从“lodash”导入_。

//Good: 这仅从lodash 导入\’isEmpty\’ 函数

从“lodash/isEmpty”导入_isEmpty。

Tree Shaking 显着减少了包大小，是性能优化的重要组成部分。 Vite 和Webpack 4.x 都默认启用Tree Shaking。

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

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

构建： {

terserOptions: {

压缩： {

//删除生产环境中的控制台//删除生产环境中的控制台

drop_console: 真，

drop_debugger: 真，

},

},

//禁用文件大小报告

报告压缩大小：假，

//禁用源映射生成以减少包大小（对于生产环境很重要）

sourcemap: false, //在生产中禁用此功能以最小化包大小

}

三：整体优化

01：服务端渲染(SSR)

服务器端渲染（SSR）是指在服务器上运行的渲染过程。最终呈现的HTML 页面通过HTTP 协议发送到客户端。 SSR 在SEO 和初始加载速度方面具有显着的优势。

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

02：启用GZIP压缩

Gzip 压缩通过压缩文件显着提高初始加载速度。使用Gzip 将文本文件压缩到原始大小的至少40%。但是，不应使用Gzip 压缩图像文件。

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

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

npm install –save-dev compress-webpack-plugin –save-dev compress-webpack-plugin

修改构建命令以使用Gzip 压缩。但是，请注意，您可能会遇到错误“ValidationError: 压缩插件无效选项”。要解决此问题，请根据官方文档将设置从“asset”更改为“filename”。再次运行构建命令npm run build 将生成.gz 文件，表明压缩成功。

03：Brotli 压缩

Brotli是一种新的开源压缩算法（由Google于2015年推出。GitHub地址：https://github.com/google/brotli）。 Brotli 压缩比Gzip 具有更好的压缩性能。当开启Brotli压缩功能时，CDN节点会智能压缩并返还资源，以减少传输文件的大小，提高文件传输效率，减少带宽消耗。

与Gzip 相比，启用Brotli 压缩可以额外减少20% 的CDN 流量。 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.product 文件以相应地设置VITE_COMPRESSION 全局变量。

# 默认情况下禁用压缩： # 默认情况下禁用压缩：

VITE_COMPRESSION=\’无\’

# 以下配置支持压缩而不删除原文件：

启用Gzip 压缩：

VITE_COMPRESSION=\’gzip\’

# 启用Brotli 压缩：

VITE_COMPRESSION=\’兄弟\’

# 同时启用GZIP 和Brotli 压缩：

VITE_COMPRESSION=\’两者\’

# 以下配置启用原始文件：的压缩和删除

启用Gzip 压缩：

VITE_COMPRESSION=\’gzip-清除\’

# 启用Brotli 压缩：

VITE_COMPRESSION=\’印迹清除\’

# 同时启用GZIP 和Brotli 压缩：

VITE_COMPRESSION=\’清除两者\’

04：缓存问题

缓存是一项基础优化技术，通过减少IO操作和CPU计算来提高性能。性能优化的第一条规则是确定缓存的优先级。

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

05：Ajax 缓存

Ajax 缓存请求的URL 和响应结果，以提高页面响应能力和用户体验。发出Ajax 请求时，尝试使用GET 方法来利用客户端缓存来加快请求速度。

06：组件导入

如果您使用第三方组件库，则仅导入您需要的组件。

从\’vant\’ 导入{ Button }

07：动态加载

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

if (location.host !==‘生产域’) {

导入(\’@/utils/vconsole\’);

}

08：异步组件加载

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

()=import(\’@/pages/xxx.vue\’)

已解决=require([\’@/pages/xxx.vue\’], 已解决)

09：懒加载路由

延迟加载路由是一种在路由配置中强制异步组件加载的方法。

{

path: \’/index\’,\’/index\’,

name: \’索引\’,

:()=import(\’@view/xxx.vue\’),

meta: { title: \’主页\’ }

}

10：CDN（内容分发）

内容分发网络(CDN) 将静态文件、音频、视频、JavaScript 资源、图像等分发到世界各地的服务器。通过从附近的CDN 服务器提供资源，您可以减少延迟并提高加载速度。

11：域名分片(Domain sharding)

这是因为浏览器限制每个域的活动连接数。要同时下载超过此限制的资源，域分片会将您的内容拆分为多个子域。使用多个域提供多个资源允许浏览器同时下载更多资源，从而加快页面加载时间并提供更好的用户体验。

12：DNA预取

DNS 预取尝试在请求资源之前解析域名。

当浏览器向（第三方）服务器请求资源时，在浏览器发出请求之前，必须将跨域域名解析为IP地址。这个过程称为DNS 解析。 DNS 缓存可以帮助减少这种延迟，但DNS 解析可能会显着增加请求的延迟。对于与许多第三方有开放连接的网站，这种延迟会显着降低加载性能。

dns-prefetch 帮助开发人员屏蔽DNS 解析延迟。

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

html lang=\’en\’

头

元字符集=\’utf-8\’/

元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1\’/

!– DNS 预取–

链接rel=\’dns-prefetch\’ href=\’https://fonts.googleapis.com/\’/

!– 其他头部元素–

/头

身体

!– 页面内容–

/身体

/html

13：Web Workers

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

以上#前端性能优化终极指南相关内容来源仅供参考。相关信息请参见官方公告。