05-性能优化

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

赞(0)陌上寒2026-10-15阅读()去评论

网络优化的三件事是「用对资源提示（preconnect/preload/prefetch，别滥用）+ 配好 HTTP 缓存（hash 资源一年 immutable、HTML 用 no-cache、stale-while-revalidate 兜住过期）+ 用 Service Worker 做分层缓存…

赞(0)陌上寒2026-10-15阅读()去评论

图片优化的核心是「格式选型（AVIF/WebP 降级链）+ srcset/sizes 选对尺寸 + LCP 图不懒加载 + 用尺寸占位防 CLS」，字体优化的核心是「WOFF2 + 子集化 + font-display 选值 + 用 size-adjust 把 fallback 的度量对齐以防 CL…

赞(0)陌上寒2026-10-15阅读()去评论

体积优化的顺序是「先量（parsed size，不是 gzip）、再砍（tree-shaking / 依赖替换 / 去重）、然后拆（代码分割）、最后压（terser + brotli）」，并用「体积预算 + CI 门禁」把结论固化下来，防止悄悄回涨。

赞(0)陌上寒2026-10-15阅读()去评论

前端内存泄漏的本质是「本该被回收的对象，仍然被某个『活着的引用』链到 GC 根」——排查方法不是「看内存涨没涨」，而是「操作并回退后 GC，看对象是否回落」，工具是「三快照对比 + Allocation timeline + queryObjects + Detached elements」。

赞(0)陌上寒2026-10-14阅读()去评论

Profiler 的价值是「把『这次交互渲染了哪些组件、各花了多久、为什么渲染』量出来」——它有三个视图（火焰图 / 排名 / 时间线）与两个编程式 API（），关键概念是「actualDuration vs baseDuration」，后者能直接告诉你「记忆化…

赞(0)陌上寒2026-10-14阅读()去评论

RUM（Real User Monitoring） 的核心不是「装个库」，而是「采集真实用户的 Core Web Vitals + 把每个指标归因到具体元素/交互 + 用分位数而不是平均值观察」——只有归因，指标才能变成可执行的优化项。

赞(0)陌上寒2026-10-14阅读()去评论

React Compiler 是「编译时自动记忆化」的工具——它在构建阶段分析组件并自动插入缓存（相当于替你写 useMemo/useCallback/memo），让日常代码可以写得更「朴素」，但它依赖「组件是纯函数」的假设，且不能替代对渲染机制的理解。

赞(0)陌上寒2026-10-14阅读()去评论

Context 的订阅粒度是整个 value——value 一变，所有消费者都重渲染（React.memo 拦不住）；优化方案按成本排序是「useMemo 稳定 value → 拆分 Context → 值与操作分离 → children 透传 → 状态库选择器」。

赞(0)陌上寒2026-10-14阅读()去评论

引用不稳定是 React 性能问题最常见的根源——「每次渲染都新建的对象/数组/函数」会让 memo 失效、让 useEffect 反复执行、让缓存失去意义；解法是「提到模块外 → useMemo/useCallback → 依赖原始值 → 用 ref → data- + 事件委托」。

赞(0)陌上寒2026-10-14阅读()去评论