前端面试每日三题 - Day 26
这是我为准备前端/全栈开发工程师面试整理的第25天每日三题练习，涵盖了：
- CSS Grid 布局与 Flexbox 布局的核心区别
- Angular的变更检测（Change Detection）机制
- 项目实战 - 设计一个微前端架构的前端应用。
✅ 题目1：CSS Grid 布局与 Flexbox 布局的核心区别是什么？分别适用于哪些场景？
-
核心区别
Grid FlexBox 维度 二维布局（行+列），可同时控制横向和纵向布局 一维布局（主轴+交叉轴），只能处理单行或单列布局 控制粒度 支持显式定义轨道（行/列）和区域命名 通过弹性项动态分配空间 对齐方式 提供更强大的对齐控制（如place-items同时控制行列对齐） * -
适用场景
Grid Flexbox 复杂网格布局（如仪表盘） 单行/单列布局（导航栏） 需要严格对齐的表格型结构 内容动态分布的容器 响应式布局（结合minmax()和auto-fill） 元素尺寸未知时的弹性布局
✅ 题目2：Vue 的 组件如何实现动画效果？底层原理是什么？
- 实现机制：
-
CSS 类名切换：在元素进入/离开时自动添加特定类名：
- v-enter-from → v-enter-to（进入动画）
- v-leave-from → v-leave-to（离开动画）
-
钩子函数：支持通过JavaScript控制动画（如@before-enter）
-
过渡模式：mode="out-in"控制进入/离开顺序
-
- 底层原理：
- 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 兼容：动态内容在服务端完整渲染
- 状态同步：服务端与客户端的状态一致性
解决方案：
-
架构设计
- Next.js/Nuxt.js：使用成熟框架处理路由、数据获取等
- 流式渲染：通过renderToNodeStream分块输出HTML
- CDN 缓存：对静态页面进行缓存
-
关键技术点
-
数据预取
// Next.js示例 export async function getServerSideProps(context) {const data = await fetchAPI();return { props: { data } } } -
客户端注水（Hydration）
- 将服务端状态序列化到window.INITIAL_STATE
- 客户端初始化时复用数据
-
-
性能优化
- 组件级缓存：对高消耗组件进行LRU缓存
- 代码分割：动态加载非关键组件
- 服务端负载均衡：通过Kubernetes实现自动扩缩容
📅 明日预告：
- HTML/CSS/JS - CSS选择器的优先级与权重计算机制
- Angular - Angular中的依赖注入（Dependency Injection）机制
- 项目实战 - 设计一个支持实时协作编辑（如Google Docs）的前端系统
💪 坚持每日三题，未来更进一步！如果你也在准备面试，欢迎一起刷题打卡！