前端经典面试题合集, 有哪些 CSS 性能优化的操作或技巧?

Step 1

Q:: 有哪些 CSS 性能优化的操作或技巧？

A:: CSS 性能优化的技巧有很多，其中包括以下几种： 1. 减少重绘和重排：尽量避免频繁修改 DOM 树的样式和结构，使用 class 操作代替逐个修改样式。 2. 使用 CSS 合并（CSS Sprites）：将多个小图标合并到一张图片中，通过背景定位来显示不同图标，减少 HTTP 请求数。 3. **使用压缩和最小化的 CSS 文件**：删除不必要的空格和注释，使用工具（如 CSSNano、clean-css）进行压缩。 4. 尽量使用 CSS 动画而非 JavaScript 动画：CSS 动画通常性能更好，因为它们可以由浏览器优化和硬件加速。 5. 减少使用昂贵的选择器：如子选择器、伪类选择器等，尽量使用简单、具体的选择器。 6. 合并重复的样式规则：减少 CSS 规则的冗余，合并具有相同属性的样式规则。 7. **避免使用 @import**：使用 @import 会导致多个 HTTP 请求，尽量直接在 HTML 中引用 CSS 文件。 8. 利用浏览器缓存：为 CSS 文件设置合理的缓存策略，减少重复加载。

Step 2

Q:: 为什么减少重绘和重排对性能有帮助？

A:: 重绘（Repaint）和重排（Reflow）是浏览器在渲染页面时的两个步骤。重排会导致浏览器重新计算元素的位置和尺寸，然后重新绘制整个页面或部分页面，这是一个非常耗费资源的操作。因此，减少不必要的重绘和重排，可以显著提升页面的渲染性能，减少页面的卡顿感。

Step 3

Q:: 什么是 CSS Sprites，它们如何提升性能？

A:: CSS Sprites 是一种将多个小图标或图像合并到一张大图中的技术。通过设置背景图像的位置属性（background-position），可以显示不同的小图标。这种方法减少了多个 HTTP 请求，降低了服务器的负载，提高了页面加载速度。

Step 4

Q:: 如何利用浏览器缓存优化 CSS 性能？

A:: 利用浏览器缓存可以让 CSS 文件在首次加载后被存储在本地，当用户再次访问页面时，浏览器可以直接从缓存中读取 CSS 文件，而无需再次向服务器请求。通过设置合理的缓存控制头（Cache-Control），可以指定 CSS 文件的缓存时间，避免频繁的网络请求，从而提升页面加载速度。