2024年末前端性能优化总结

前端性能优化一直是很多前端工程师非常关注的问题，在日常的面试中也是经常会被问到的点，2024年末花一点时间来一起学习一下前端性能优化方案。

尽量减少使用 CSS 属性的快捷方式：例如，使用 border-width、border-style 和 border-color 而不是 border。CSS 属性的快捷方式会将所有值初始化为"初始值"，因此避免使用它们可以最小化重绘和回流（在实际工作中，CSS 快捷方式的性能影响微乎其微，并且使用快捷方式可以简化样式并解决一些样式覆盖问题）。
将复杂的动画元素定位为 fixed 或 absolute 以防止回流。
避免使用表格布局：因为在表格元素上触发回流会导致其中所有其他元素的回流。
使用 translate 而不是修改 top 属性来上下移动 DOM 元素。
必要时为元素定义高度或最小高度：没有显式高度，动态内容加载可能会导致页面元素移动或跳动，从而导致回流（例如，为图像定义宽度和高度以防止布局变化并减少回流）。
尽量减少深度嵌套或复杂选择器的使用，以提高 CSS 渲染效率。
对元素进行重大样式更改时，暂时使用 display:none 隐藏它们，进行更改，然后将它们设置回 display:block。这样可以最小化回流，只需两次即可。

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

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

可以使用Font-spider从字体文件中提取出只有必要的字符。

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

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

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

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

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

bash 复制代码

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

修改构建命令以使用Gzip压缩。不过需要注意，这可能会遇到错误"ValidationError: Compression Plugin Invalid Options"。为了解决这个问题，根据官方文档将设置从"asset"更改为"filename"。

再次运行构建命令 npm run build，你将生成 .gz 文件，表示成功压缩。

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

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

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

这个方法只是听说过，具体没有使用过～

方法有很多，具体的实现需要根据当前业务以及团队的技术方案来确定！

2024年末 前端性能优化总结