前端面试每日三题 - Day 26

这是我为准备前端/全栈开发工程师面试整理的第26天每日三题练习，涵盖了：

• CSS Grid 布局与 Flexbox 布局的核心区别
• Vue 的 Transition 组件
• 项目实战 - 设计一个高性能的 SSR（服务端渲染）方案。

---

✅ 题目1：CSS Grid 布局与 Flexbox 布局的核心区别是什么？分别适用于哪些场景？

1. 核心区别

   	Grid	FlexBox
   维度	二维布局（行+列），可同时控制横向和纵向布局	一维布局（主轴+交叉轴），只能处理单行或单列布局
   控制粒度	支持显式定义轨道（行/列）和区域命名	通过弹性项动态分配空间
   对齐方式	提供更强大的对齐控制（如place-items同时控制行列对齐）	*

2. 适用场景

   Grid	Flexbox
   复杂网格布局（如仪表盘）	单行/单列布局（导航栏）
   需要严格对齐的表格型结构	内容动态分布的容器
   响应式布局（结合minmax()和auto-fill）	元素尺寸未知时的弹性布局

---

✅ 题目2：Vue 的 组件如何实现动画效果？底层原理是什么？

1. 实现机制：

   • CSS 类名切换：在元素进入/离开时自动添加特定类名：

     • v-enter-from → v-enter-to（进入动画）
     • v-leave-from → v-leave-to（离开动画）

   • 钩子函数：支持通过JavaScript控制动画（如@before-enter）

   • 过渡模式：mode="out-in"控制进入/离开顺序

2. 底层原理：
   • DOM 监听：通过MutationObserver监测元素插入/移除
   • RAF 优化：使用requestAnimationFrame保证动画流畅性
   • 自动 CSS 检测：优先使用CSS动画（检测animationend/transitionend事件）
   • 示例代码：

     	<Transition name="fade">
     	  <div v-if="show">内容</div>
     	</Transition>
     	
     	<style>
     	.fade-enter-active, .fade-leave-active {
     	  transition: opacity 0.5s;
     	}
     	.fade-enter-from, .fade-leave-to {
     	  opacity: 0;
     	}
     	</style>
     

---

✅ 题目3：如何设计一个高性能的 SSR（服务端渲染）方案？需要解决哪些核心问题？

核心问题清单：

• 同构渲染：客户端与服务端代码复用（避免重复逻辑）
• 数据预取：服务端获取数据并注入HTML
• 性能优化：减少TTFB时间，避免服务端过载
• SEO 兼容：动态内容在服务端完整渲染
• 状态同步：服务端与客户端的状态一致性

解决方案：

1. 架构设计

   • Next.js/Nuxt.js：使用成熟框架处理路由、数据获取等
   • 流式渲染：通过renderToNodeStream分块输出HTML
   • CDN 缓存：对静态页面进行缓存

2. 关键技术点

   • 数据预取

     // Next.js示例
     export async function getServerSideProps(context) {
       const data = await fetchAPI();
       return { props: { data } }
     }
     

   • 客户端注水（Hydration）

     • 将服务端状态序列化到window.INITIAL_STATE
     • 客户端初始化时复用数据

3. 性能优化

   • 组件级缓存：对高消耗组件进行LRU缓存
   • 代码分割：动态加载非关键组件
   • 服务端负载均衡：通过Kubernetes实现自动扩缩容

---

📅 明日预告：

• HTML/CSS/JS - CSS选择器的优先级与权重计算机制
• Angular - Angular中的依赖注入（Dependency Injection）机制
• 项目实战 - 设计一个支持实时协作编辑（如Google Docs）的前端系统

---

💪 坚持每日三题，未来更进一步！如果你也在准备面试，欢迎一起刷题打卡！