标签：性能优化

构建与 CI 的加速只有三条路——「少做（缓存命中就不干活）、做快（换更快的工具、把类型检查拿出来）、并行（拆 job、分片、并行任务图）」；而这三条的前提都是「先量出来慢在哪」——不测量的优化基本等于乱猜。

赞(0)陌上寒2026-10-1710-工程化与生态 阅读()去评论

动画流畅的本质是「让浏览器只在『合成（Composite）』阶段工作，而不是『布局（Layout）』或『绘制（Paint）』阶段」——即「只改 transform 与 opacity」，并用 will-change/合成层把动画从主线程搬到合成线程，代价是「留给显存与合成开销」（层太多会翻车）。

赞(0)陌上寒2026-10-1505-性能优化 阅读()去评论

useTransition / useDeferredValue 不减少工作量——它们改变的是「优先级」，让「昂贵但不紧急的更新」不阻塞「紧急交互（如输入回显）」，从而改善可交互性（INP）。

赞(0)陌上寒2026-10-1405-性能优化 阅读()去评论

优化前必须先测量——用 React DevTools Profiler 找到「哪些组件渲染次数多、耗时长、为什么渲染」，再用浏览器 Performance 面板看非 React 的部分（布局、绘制、长任务）。

赞(0)陌上寒2026-10-1405-性能优化 阅读()去评论

Context 的 value 一旦变化，所有消费者都会重渲染（React.memo 拦不住）——解法优先级是「拆分 Context → useMemo 稳定 value → 值与操作分离 → children 透传 → 改用带选择器的状态库」。

赞(0)陌上寒2026-10-1303-组件通信与状态管理 阅读()去评论

Hook 的开销分三类——「调用开销（链表节点访问，常量级）」「依赖比较（逐项 Object.is，与依赖数量成正比）」「闭包与对象创建（内存分配）」；单次调用通常是纳秒级，真正的成本来自「渲染次数 × 每次渲染里的分配」——所以优化顺序永远是「先减少渲染次数」，而不是「先减少 Hook 数量」。

赞(0)陌上寒2026-10-1302-Hooks体系 阅读()去评论