前端性能优化终极指南

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

一：页面渲染相关

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 大小。加载这样的文