性能优化
光影博客收录的性能优化高频题与参考解析，搜索时也会写成前端性能优化、Core Web Vitals。下面是站内已有题目，可继续在面试题里按这个词刷。
在面试题中打开共 14 道，本页展示 12 道
如何优化 CSS 动画性能？
优先使用 transform 和 opacity 触发合成层动画（GPU 加速），避免触发重排的属性（width/top）。使用 will-change 提前告知浏览器，requestAnimationFrame 同步帧率。
React 中 key 的作用是什么？
key 帮助 Diff 算法识别列表元素的增删移动。用 index 作 key 在排序/增删时导致状态错乱和性能问题。应使用数据唯一 ID。
虚拟 DOM 与 Diff 算法如何工作？
虚拟 DOM 是 JS 对象描述 UI，状态变化时新旧树 Diff 比较后最小化 DOM 更新。策略：同层比较、不同类型直接替换、key 标识移动。Fiber 支持可中断调度。
React.memo 与 useMemo 的区别和用法？
React.memo 浅比较 props 避免不必要的组件渲染；useMemo 缓存计算结果。memo 用于组件级优化，useMemo 用于值级优化。避免过度使用。
Context 有什么性能问题？如何优化？
Context 值变化会导致所有消费者重渲染。优化：拆分 Context（读写分离）、useMemo 包裹 value、用状态管理库替代（Zustand/Jotai）、React.memo 消费组件。
React Fiber 架构原理是什么？
Fiber 将渲染拆分为可中断的小任务（时间切片），通过优先级调度（Lane 模型）区分紧急和非紧急更新。支持并发特性：Suspense、useTransition、useDeferredValue。
Vue3 响应式原理和 Vue2 有什么不同？
Vue2 用 defineProperty 劫持 getter/setter（无法检测新增/删除）；Vue3 用 Proxy 代理整个对象，支持所有操作和 Map/Set，懒代理性能更好。
从 URL 输入到页面渲染经历了什么？
DNS 解析 → TCP 三次握手 → TLS 握手 → HTTP 请求 → 服务器响应 → DOM/CSSOM 构建 → 渲染树 → 布局 → 绘制 → 合成。关键优化：DNS 预解析、CDN、预加载、懒加载。
前端监控与错误上报如何实现？
错误：window.onerror + unhandledrejection + 框架错误边界；性能：Performance API + Web Vitals (LCP/FID/CLS)；上报用 navigator.sendBeacon，可用 Sentry 或自建。
Angular 变更检测策略有哪些？
默认策略检查整个组件树，OnPush 仅在 @Input 引用变化、事件触发或手动 markForCheck 时检查。OnPush 搭配 Observable 和 async 管道可大幅提升性能。
React Native 桥接机制与新架构？
旧架构通过 Bridge 序列化 JSON 在 JS 和 Native 间异步通信。新架构（Fabric/TurboModules）使用 JSI 直接调用 C++，同步且无序列化开销，性能大幅提升。
React Native 性能优化策略？
使用 FlatList 替代 ScrollView（虚拟化列表）、减少 re-render（memo/useCallback）、优化图片（FastImage）、避免 Bridge 频繁通信、使用 Hermes 引擎。