跳到主要内容

CSS 优化​

1. 重排（Reflow）与重绘（Repaint）​

  • 减少批量操作 DOM 元素，如用 DocumentFragment 一次性插入
  • 避免频繁读取布局属性，如 offsetWidth 会强制刷新渲染列队
  • 将频繁变化的元素设为 absolute/fixed ，使其脱离文档流，减少回流范围
  • 使用 will-change: transform 提示浏览器优化渲染

2. 选择器优化​

  • 浏览器匹配原则是 “从右到左”
  • 避免嵌套过深，避免通配符 * 或属性选择器（性能差）

3. 其他优化​

  • 合并 CSS 文件（减少请求次数）
  • 懒加载 CSS （如通过媒体查询延迟非首屏样式加载）
  • 关键 CSS （Critical CSS）内联，提升首屏渲染速度
  • 使用 contain: layout paint size 隔离元素渲染，限制回流/重绘范围

二、 CSS 预处理器与后处理器​

  • 了解 SASS/SCSS、LESS 的基本特征（变量、嵌套、混合等）
  • 了解 PostCss 及其插件（如 Autoprefixer）

三、 CSS 架构​

  • 了解 BEM 、OOCSS、SMACSS 等命名规范和模块化方法
  • CSS-in-JS 的基本概念