面试题：复杂场景下CSS渐进增强与优雅降级的权衡与优化

1. 渐进增强与优雅降级概念

渐进增强：从基本的功能开始构建，先确保在所有浏览器和设备上都能实现核心功能，然后逐步为支持高级特性的浏览器和设备添加增强功能，如动画、复杂交互等。
优雅降级：先构建完整的、针对高端浏览器和设备优化的体验，然后为不支持某些特性的浏览器提供替代方案。

2. 不同浏览器兼容性分析

现代浏览器：支持大部分CSS3和HTML5特性，可充分利用高级动画、交互和多媒体特性来提供丰富体验。
旧版浏览器：可能不支持某些CSS3属性，如transform、transition、animation等，需要提供替代方案。

3. 设备性能差异分析

高性能设备：可流畅处理复杂动画和图形，能使用高级CSS特性实现平滑效果。
低性能设备：可能在处理复杂动画时出现卡顿，需简化动画或避免使用过于复杂的效果。

4. 策略

渐进增强策略

核心功能优先：确保基本布局和交互在所有浏览器都能正常工作。例如，先使用简单的块状布局，不依赖复杂的CSS3特性。

/* 基本布局 */
div {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid black;
}

检测特性支持：使用@supports查询检测浏览器是否支持特定CSS特性，然后添加增强功能。

@supports (transform: rotate(45deg)) {
  div {
    transform: rotate(45deg);
    transition: transform 0.5s ease;
  }
}

优雅降级策略

高级特性优先：为现代浏览器编写完整的样式，使用最新CSS特性实现动画和交互。

div {
  transform: rotate(45deg);
  animation: spin 5s infinite linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

提供替代方案：使用CSS滤镜或JavaScript来为不支持高级特性的浏览器提供类似效果。例如，使用filter模拟transform的一些效果（虽然效果有限）。

/* 模拟transform旋转效果 */
div {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE */
}

5. 性能优化

简化动画：对于低性能设备，减少动画的复杂度，如降低帧率、减少关键帧数量。

/* 简单动画 */
div {
  animation: simpleMove 2s linear;
}
@keyframes simpleMove {
  from {
    left: 0;
  }
  to {
    left: 100px;
  }
}

硬件加速：对于高性能设备，利用transform和opacity触发硬件加速，提高动画性能。

div {
  transform: translateZ(0);
  opacity: 1;
  animation: complexMove 5s ease;
}
@keyframes complexMove {
  /* 复杂动画关键帧 */
}

避免重排重绘：减少频繁改变元素样式，尽量一次性修改多个样式属性。例如，使用CSS类切换来改变样式。

<button onclick="document.body.classList.toggle('active')">切换样式</button>

body {
  /* 初始样式 */
}
body.active {
  /* 切换后的样式 */
}

星途面试题库

面试题：复杂场景下CSS渐进增强与优雅降级的权衡与优化

知识考点

面试题答案

1. 渐进增强与优雅降级概念

2. 不同浏览器兼容性分析

3. 设备性能差异分析

4. 策略

渐进增强策略

优雅降级策略

5. 性能优化