[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"i-ri:search-line":3,"i-ri:moon-line":8,"i-ri:sun-line":10,"i-ri:menu-3-line":12,"i-ri:close-line":14,"notes-module-items-react":16,"notes-page-react-14-performance\u002F01-performance-playbook-and-metrics":494,"i-ri:arrow-left-s-line":1690,"i-ri:menu-2-line":1692,"i-ri:arrow-right-s-line":1694},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.98 6.98 0 0 0 10 7m-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A8 8 0 0 0 4 12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm6 7h12v2H9zm-6 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"currentColor\" d=\"m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z\"\u002F>",[17,22,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,462,466,470,474,478,482,486,490],{"path":18,"title":19,"meta":20},"\u002Fnotes\u002Freact\u002F01-basics\u002F01-how-to-read-this-repo","如何阅读本仓库（学习路径与章节依赖）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},"2026-11-05T09:47:15.000Z",{"path":23,"title":24,"meta":25},"\u002Fnotes\u002Freact\u002F01-basics\u002F02-render-vs-commit","React 渲染两阶段：Render vs Commit（总览）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":27,"title":28,"meta":29},"\u002Fnotes\u002Freact\u002F01-basics\u002F03-update-pipeline-birdview","从“更新”到“页面变更”：一次 setState 的全链路鸟瞰",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":31,"title":32,"meta":33},"\u002Fnotes\u002Freact\u002F01-basics","基础入门（建议先读）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":35,"title":36,"meta":37},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F01-browser-multi-process","浏览器多进程架构",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":39,"title":40,"meta":41},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F02-event-loop-overview","事件循环概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":43,"title":44,"meta":45},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F03-call-stack","函数调用栈",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":47,"title":48,"meta":49},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F04-threads","线程介绍",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":51,"title":52,"meta":53},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F05-refresh-rate-and-queues","刷新率与执行队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":55,"title":56,"meta":57},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F06-settimeout","setTimeout 原理详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":59,"title":60,"meta":61},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F07-promise","Promise 原理详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":63,"title":64,"meta":65},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F08-event-loop-in-practice","事件循环机制（综合）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":67,"title":68,"meta":69},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F09-priority-queues","优先级队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":71,"title":72,"meta":73},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F01-concept","并发模式：概念",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":75,"title":76,"meta":77},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F02-demo","案例演示并发模式",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":79,"title":80,"meta":81},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F03-high-priority-preemption","高优先级插队",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":83,"title":84,"meta":85},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F04-preemption-vs-interruption","插队的影响、与中断的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":87,"title":88,"meta":89},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F05-shouldYield","中断条件：shouldYield",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":91,"title":92,"meta":93},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F06-react-tasks-and-queues","React 中的任务与队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":95,"title":96,"meta":97},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F07-ensureRootIsScheduled","ensureRootIsScheduled",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":99,"title":100,"meta":101},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F08-batch-updates-merge","合并多个更新触发",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":103,"title":104,"meta":105},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F09-taskQueue-lifecycle","taskQueue 队列循环的启动与结束",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":107,"title":108,"meta":109},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F10-time-slicing","时间切片是如何实现的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":111,"title":112,"meta":113},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F11-workLoop-full","workLoop 循环完整逻辑",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":115,"title":116,"meta":117},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F12-priority-design","React 中的优先级设计",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":119,"title":120,"meta":121},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F13-lane-model","lane 模型",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":123,"title":124,"meta":125},"\u002Fnotes\u002Freact\u002F04-fiber\u002F01-three-node-types","三种节点对象",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":127,"title":128,"meta":129},"\u002Fnotes\u002Freact\u002F04-fiber\u002F02-fiberRootNode","FiberRootNode",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":131,"title":132,"meta":133},"\u002Fnotes\u002Freact\u002F04-fiber\u002F03-fiber-tree","Fiber 树",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":135,"title":136,"meta":137},"\u002Fnotes\u002Freact\u002F04-fiber\u002F04-initial-mount-build","Fiber 树初始构建过程",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":139,"title":140,"meta":141},"\u002Fnotes\u002Freact\u002F04-fiber\u002F05-workLoopConcurrent","workLoopConcurrent",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":143,"title":144,"meta":145},"\u002Fnotes\u002Freact\u002F04-fiber\u002F06-stack-and-workInProgress","栈结构 与 workInProgress",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":147,"title":148,"meta":149},"\u002Fnotes\u002Freact\u002F04-fiber\u002F07-executionContext","执行上下文 executionContext",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":151,"title":152,"meta":153},"\u002Fnotes\u002Freact\u002F04-fiber\u002F08-update-lanes","update lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":155,"title":156,"meta":157},"\u002Fnotes\u002Freact\u002F04-fiber\u002F09-render-lanes","render lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":159,"title":160,"meta":161},"\u002Fnotes\u002Freact\u002F04-fiber\u002F10-fiber-lanes","fiber lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":163,"title":164,"meta":165},"\u002Fnotes\u002Freact\u002F04-fiber\u002F11-flags-appendix","附录：flags",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":167,"title":168,"meta":169},"\u002Fnotes\u002Freact\u002F05-hooks\u002F01-background","hook 背景",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":171,"title":172,"meta":173},"\u002Fnotes\u002Freact\u002F05-hooks\u002F02-categories","hook 分类",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":175,"title":176,"meta":177},"\u002Fnotes\u002Freact\u002F05-hooks\u002F03-closures","hook 与闭包",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":179,"title":180,"meta":181},"\u002Fnotes\u002Freact\u002F05-hooks\u002F04-hooks-and-fiber","hook 与 fiber",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":183,"title":184,"meta":185},"\u002Fnotes\u002Freact\u002F05-hooks\u002F05-renderWithHooks","renderWithHooks",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":187,"title":188,"meta":189},"\u002Fnotes\u002Freact\u002F05-hooks\u002F06-init-state-hook","初始化 State Hook",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":191,"title":192,"meta":193},"\u002Fnotes\u002Freact\u002F05-hooks\u002F07-init-effect-hook","初始化 effect Hook",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":195,"title":196,"meta":197},"\u002Fnotes\u002Freact\u002F05-hooks\u002F08-circular-linked-list","环形链表详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":199,"title":200,"meta":201},"\u002Fnotes\u002Freact\u002F05-hooks\u002F09-useReducer-vs-useState","useReducer 与 useState 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":203,"title":204,"meta":205},"\u002Fnotes\u002Freact\u002F05-hooks\u002F10-update-linked-list","update 链表",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":207,"title":208,"meta":209},"\u002Fnotes\u002Freact\u002F05-hooks\u002F11-mount-state-updates","初始阶段的状态更新",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":211,"title":212,"meta":213},"\u002Fnotes\u002Freact\u002F05-hooks\u002F12-baseQueue-vs-pending","baseQueue 与 queue.pending",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":215,"title":216,"meta":217},"\u002Fnotes\u002Freact\u002F05-hooks\u002F13-dispatch-in-update","更新阶段的 dispatch",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":219,"title":220,"meta":221},"\u002Fnotes\u002Freact\u002F05-hooks\u002F14-commitRoot","commitRoot",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":223,"title":224,"meta":225},"\u002Fnotes\u002Freact\u002F06-diff\u002F01-update-overview","React 更新机制概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":227,"title":228,"meta":229},"\u002Fnotes\u002Freact\u002F06-diff\u002F02-diff-strategy","diff 策略",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":231,"title":232,"meta":233},"\u002Fnotes\u002Freact\u002F06-diff\u002F03-node-compare","节点比较方式",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":235,"title":236,"meta":237},"\u002Fnotes\u002Freact\u002F06-diff\u002F04-reconcileChildFibers","reconcileChildFibers",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":239,"title":240,"meta":241},"\u002Fnotes\u002Freact\u002F06-diff\u002F05-reconcileSingleElement","reconcileSingleElement",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":243,"title":244,"meta":245},"\u002Fnotes\u002Freact\u002F06-diff\u002F06-reconcileChildrenArray","reconcileChildrenArray",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":247,"title":248,"meta":249},"\u002Fnotes\u002Freact\u002F06-diff\u002F07-why-not-number-key","为什么不建议使用数字作为 key",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":251,"title":252,"meta":253},"\u002Fnotes\u002Freact\u002F07-event-system\u002F01-overview","事件系统概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":255,"title":256,"meta":257},"\u002Fnotes\u002Freact\u002F07-event-system\u002F02-event-plugin","事件插件",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":259,"title":260,"meta":261},"\u002Fnotes\u002Freact\u002F07-event-system\u002F03-event-pooling","事件池",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":263,"title":264,"meta":265},"\u002Fnotes\u002Freact\u002F07-event-system\u002F04-root-listeners","根节点事件绑定",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":267,"title":268,"meta":269},"\u002Fnotes\u002Freact\u002F07-event-system\u002F05-event-dispatch","事件触发",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":271,"title":272,"meta":273},"\u002Fnotes\u002Freact\u002F08-interview\u002F01-useEffect-vs-useLayoutEffect","useEffect 与 useLayoutEffect 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":275,"title":276,"meta":277},"\u002Fnotes\u002Freact\u002F08-interview\u002F02-why-no-conditional-hooks","为什么 hook 不能写在条件判断里",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":279,"title":280,"meta":281},"\u002Fnotes\u002Freact\u002F08-interview\u002F03-understanding-concurrency","聊聊在 React 中，你对并发模式的理解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":283,"title":284,"meta":285},"\u002Fnotes\u002Freact\u002F08-interview\u002F04-update-mechanism","聊聊 React 的更新机制原理",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":287,"title":288,"meta":289},"\u002Fnotes\u002Freact\u002F08-interview\u002F05-setState-sync-or-async","setState 是同步还是异步的？",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":291,"title":292,"meta":293},"\u002Fnotes\u002Freact\u002F08-interview\u002F06-useState-vs-useReducer","聊聊 useState 与 useReducer 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":295,"title":296,"meta":297},"\u002Fnotes\u002Freact\u002F08-interview\u002F07-closure-trap","聊聊闭包陷阱问题，以及如何解决",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":299,"title":300,"meta":301},"\u002Fnotes\u002Freact\u002F08-interview\u002F08-time-slicing-details","时间分片是如何实现的（任务拆分\u002F中断\u002F恢复）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":303,"title":304,"meta":305},"\u002Fnotes\u002Freact\u002F08-interview\u002F09-batched-updates-useState","聊聊 useState 的批处理更新机制",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":307,"title":308,"meta":309},"\u002Fnotes\u002Freact\u002F08-interview\u002F10-jsx-to-dom","JSX 是如何转变成为真实 DOM 的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":311,"title":312,"meta":313},"\u002Fnotes\u002Freact\u002F08-interview\u002F11-useCallback-impl","useCallback 的实现原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":315,"title":316,"meta":317},"\u002Fnotes\u002Freact\u002F08-interview\u002F12-scheduling-mechanism","详细聊聊 React 的调度机制",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":319,"title":320,"meta":321},"\u002Fnotes\u002Freact\u002F08-interview\u002F13-priority-and-lanes","聊聊 React 的优先级机制（Lane 模型）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":323,"title":324,"meta":325},"\u002Fnotes\u002Freact\u002F08-interview\u002F14-diff-algorithm","React 的 Diff 算法是什么样的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":327,"title":328,"meta":329},"\u002Fnotes\u002Freact\u002F08-interview\u002F15-event-system","详细聊聊 React 的事件系统是如何实现的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":331,"title":332,"meta":333},"\u002Fnotes\u002Freact\u002F08-interview\u002F16-portals-bubbling","React Portals 上的事件是否会冒泡到父组件，原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":335,"title":336,"meta":337},"\u002Fnotes\u002Freact\u002F08-interview\u002F17-useEffect-impl","useEffect 的实现原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":339,"title":340,"meta":341},"\u002Fnotes\u002Freact\u002F08-interview\u002F18-useContext-impl","请聊聊 useContext 的实现原理",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":343,"title":344,"meta":345},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F01-automatic-batching-and-flushsync","React 18 自动批处理（Automatic Batching）与 flushSync",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":347,"title":348,"meta":349},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F02-strictmode-and-idempotent-effects","React StrictMode：为什么会“双调用”？（源码\u002F机制视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":351,"title":352,"meta":353},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F03-transition-useTransition-useDeferredValue","Transition：startTransition \u002F useTransition \u002F useDeferredValue（机制视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":355,"title":356,"meta":357},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F04-suspense-loading-boundary-design","Suspense：加载态边界如何设计（机制\u002F架构视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":359,"title":360,"meta":361},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F05-error-boundary-reporting-and-recovery","Error Boundary：兜底、重试与上报（自研 vs Sentry）（机制\u002F架构视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":363,"title":364,"meta":365},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice","React 18 实战（并发特性与默认行为）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":367,"title":368,"meta":369},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F01-routing-and-url-state-mental-model","路由与 URL State：统一心智模型（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":371,"title":372,"meta":373},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F02-tanstack-router-route-tree-search-loader-prefetch","TanStack Router（Vite \u002F SPA）：Route Tree \u002F Search \u002F Loader \u002F Prefetch（落地篇）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":375,"title":376,"meta":377},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F03-next-app-router-segments-layout-loading-error-not-found-prefetch","Next.js App Router：Segments \u002F Layouts \u002F Loading-Error-NotFound \u002F Prefetch（落地篇）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":379,"title":380,"meta":381},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation","路由与导航（TanStack Router \u002F Next App Router）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":383,"title":384,"meta":385},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F01-state-layering-ui-server-url-global","状态分层：UI \u002F Server \u002F URL \u002F Global（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":387,"title":388,"meta":389},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F02-tanstack-query-caching-and-invalidation","TanStack Query：缓存模型与失效策略（Caching & Invalidation）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":391,"title":392,"meta":393},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F03-optimistic-updates-and-consistency","TanStack Query：乐观更新与一致性（Optimistic Updates & Consistency）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":395,"title":396,"meta":397},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F04-form-architecture-react-hook-form-validation-performance-testability","表单架构：React Hook Form 的受控\u002F非受控、校验、性能与可测试性（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":399,"title":400,"meta":401},"\u002Fnotes\u002Freact\u002F11-data-layer","数据层（Server State \u002F 表单 \u002F 状态分层）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":403,"title":404,"meta":405},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F01-hydration-mismatch","Hydration mismatch（React \u002F Next.js）：成因、检测、排查清单与工程化规避",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":407,"title":408,"meta":409},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F01-nextjs-cache-revalidate-consistency-online-not-updating","Next.js 缓存\u002F重验证与一致性：避免「线上怎么不更新」事故（App Router）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":411,"title":412,"meta":413},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F02-csr-ssr-ssg-isr-how-to-choose","CSR vs SSR vs SSG vs ISR：怎么选？边界是什么？（体验 + 成本 + 一致性）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":415,"title":416,"meta":417},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F04-streaming-ssr-with-suspense","Streaming SSR + Suspense：提升前端感知性能的利器",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":419,"title":420,"meta":421},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery","渲染与交付（CSR\u002FSSR\u002FStreaming\u002FHydration\u002F缓存）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":423,"title":424,"meta":425},"\u002Fnotes\u002Freact\u002F13-production-readiness\u002F01-observability-logging-metrics-tracing","前端可观测性体系：日志、指标与链路追踪",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":427,"title":428,"meta":429},"\u002Fnotes\u002Freact\u002F13-production-readiness\u002F02-auth-and-web-security","鉴权与 Web 安全：OAuth, JWT, XSS, CSRF, CSP",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":431,"title":432,"meta":433},"\u002Fnotes\u002Freact\u002F13-production-readiness","生产可用性（错误\u002F可观测\u002F鉴权\u002F安全）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":435,"title":436,"meta":437},"\u002Fnotes\u002Freact\u002F14-performance\u002F01-performance-playbook-and-metrics","前端性能定位 Playbook：从指标到归因",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":439,"title":440,"meta":441},"\u002Fnotes\u002Freact\u002F14-performance\u002F02-rendering-optimization-memo-context-virtualization","React 渲染性能优化：Memo, Context, 与虚拟化",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":443,"title":444,"meta":445},"\u002Fnotes\u002Freact\u002F14-performance\u002F03-asset-and-bundle-optimization","资源与 Bundle 优化：代码分割、图片与 CDN",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":447,"title":448,"meta":449},"\u002Fnotes\u002Freact\u002F14-performance","性能体系（定位 → 优化 → 度量）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":451,"title":452,"meta":453},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F01-component-system-and-design-system","组件体系与设计系统：构建规模化前端的基石",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":455,"title":456,"meta":457},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F02-testing-strategy-rtl-e2e-testability","前端测试体系：RTL, E2E 与可测性设计",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":459,"title":460,"meta":461},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F03-monorepo-and-dependency-management","Monorepo 与依赖治理：pnpm 和 Turborepo",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":463,"title":464,"meta":465},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F04-cicd-and-quality-gates","CI\u002FCD 与质量门禁：构建可靠的自动化流程",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":467,"title":468,"meta":469},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F05-bff-and-api-design","BFF 与 API 设计：前端架构师的视角",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":471,"title":472,"meta":473},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture","工程与架构治理（规模化）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":475,"title":476,"meta":477},"\u002Fnotes\u002Freact\u002F16-advanced\u002F01-rsc-and-server-actions-deep-dive","RSC\u002FServer Actions 深水区：边界、约束与缓存一致性",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":479,"title":480,"meta":481},"\u002Fnotes\u002Freact\u002F16-advanced\u002F02-micro-frontend-governance","微前端治理：样式、路由与通信",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":483,"title":484,"meta":485},"\u002Fnotes\u002Freact\u002F16-advanced\u002F03-realtime-and-offline","实时与离线：WebSocket, PWA 与 Service Worker",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":487,"title":488,"meta":489},"\u002Fnotes\u002Freact\u002F16-advanced\u002F04-a11y-i18n-compliance","a11y, i18n 与合规：构建负责任的全球化应用",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":491,"title":492,"meta":493},"\u002Fnotes\u002Freact\u002F16-advanced","进阶专题（按业务需要选做）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"id":495,"type":496,"sourcePath":497,"routePath":435,"path":435,"title":436,"updatedAt":21,"meta":498,"body":500,"toc":1677},"bm90ZTpub3Rlcy9yZWFjdC8xNC1wZXJmb3JtYW5jZS8wMS1wZXJmb3JtYW5jZS1wbGF5Ym9vay1hbmQtbWV0cmljcy5tZA","note","notes\u002Freact\u002F14-performance\u002F01-performance-playbook-and-metrics.md",{"id":495,"type":496,"sourcePath":497,"slug":499,"title":436,"updatedAt":21,"lastUpdated":21},"react\u002F14-performance\u002F01-performance-playbook-and-metrics",{"type":501,"children":502},"root",[503,511,527,531,538,554,836,873,876,882,887,1149,1152,1158,1163,1170,1339,1345,1572,1575,1581,1614,1617,1623],{"type":504,"tag":505,"props":506,"children":508},"element","h1",{"id":507},"前端性能定位-playbook从指标到归因",[509],{"type":510,"value":436},"text",{"type":504,"tag":512,"props":513,"children":514},"blockquote",{},[515],{"type":504,"tag":516,"props":517,"children":518},"p",{},[519,525],{"type":504,"tag":520,"props":521,"children":522},"strong",{},[523],{"type":510,"value":524},"一句话结论",{"type":510,"value":526},"：建立一套从核心指标（LCP\u002FINP\u002FCLS）异常发现，到使用 Profiling 工具（React Profiler\u002FPerformance\u002FNetwork）层层钻取，最终定位到具体代码或资源问题的标准化流程，是保障前端性能的系统性方法。",{"type":504,"tag":528,"props":529,"children":530},"hr",{},[],{"type":504,"tag":532,"props":533,"children":535},"h2",{"id":534},"_1-核心性能指标-the-metrics",[536],{"type":510,"value":537},"1. 核心性能指标 (The Metrics)",{"type":504,"tag":516,"props":539,"children":540},{},[541,543,552],{"type":510,"value":542},"不要陷入指标的汪洋大海。对于现代 Web 应用，关注 Google 的 ",{"type":504,"tag":544,"props":545,"children":549},"a",{"href":546,"rel":547},"https:\u002F\u002Fweb.dev\u002Fvitals\u002F",[548],"nofollow",[550],{"type":510,"value":551},"Core Web Vitals",{"type":510,"value":553}," 和其他关键指标就足够了。",{"type":504,"tag":555,"props":556,"children":557},"table",{},[558,588],{"type":504,"tag":559,"props":560,"children":561},"thead",{},[562],{"type":504,"tag":563,"props":564,"children":565},"tr",{},[566,573,578,583],{"type":504,"tag":567,"props":568,"children":570},"th",{"align":569},"left",[571],{"type":510,"value":572},"指标",{"type":504,"tag":567,"props":574,"children":575},{"align":569},[576],{"type":510,"value":577},"描述",{"type":504,"tag":567,"props":579,"children":580},{"align":569},[581],{"type":510,"value":582},"优秀标准",{"type":504,"tag":567,"props":584,"children":585},{"align":569},[586],{"type":510,"value":587},"常见归因",{"type":504,"tag":589,"props":590,"children":591},"tbody",{},[592,650,710,762,799],{"type":504,"tag":563,"props":593,"children":594},{},[595,606,616,626],{"type":504,"tag":596,"props":597,"children":598},"td",{"align":569},[599,604],{"type":504,"tag":520,"props":600,"children":601},{},[602],{"type":510,"value":603},"LCP",{"type":510,"value":605}," (Largest Contentful Paint)",{"type":504,"tag":596,"props":607,"children":608},{"align":569},[609,614],{"type":504,"tag":520,"props":610,"children":611},{},[612],{"type":510,"value":613},"加载性能",{"type":510,"value":615},"：视口内最大可见元素（图片或文本块）的渲染时间。",{"type":504,"tag":596,"props":617,"children":618},{"align":569},[619],{"type":504,"tag":620,"props":621,"children":623},"code",{"className":622},[],[624],{"type":510,"value":625},"\u003C 2.5s",{"type":504,"tag":596,"props":627,"children":628},{"align":569},[629,634,636,641,643,648],{"type":504,"tag":520,"props":630,"children":631},{},[632],{"type":510,"value":633},"慢资源",{"type":510,"value":635}," (未压缩图片、大字体)、",{"type":504,"tag":520,"props":637,"children":638},{},[639],{"type":510,"value":640},"慢服务器",{"type":510,"value":642}," (高 TTFB)、",{"type":504,"tag":520,"props":644,"children":645},{},[646],{"type":510,"value":647},"渲染阻塞",{"type":510,"value":649}," (过多 CSS\u002FJS)",{"type":504,"tag":563,"props":651,"children":652},{},[653,663,673,682],{"type":504,"tag":596,"props":654,"children":655},{"align":569},[656,661],{"type":504,"tag":520,"props":657,"children":658},{},[659],{"type":510,"value":660},"INP",{"type":510,"value":662}," (Interaction to Next Paint)",{"type":504,"tag":596,"props":664,"children":665},{"align":569},[666,671],{"type":504,"tag":520,"props":667,"children":668},{},[669],{"type":510,"value":670},"交互性能",{"type":510,"value":672},"：用户交互（点击\u002F按键）到下一次屏幕绘制的延迟。",{"type":504,"tag":596,"props":674,"children":675},{"align":569},[676],{"type":504,"tag":620,"props":677,"children":679},{"className":678},[],[680],{"type":510,"value":681},"\u003C 200ms",{"type":504,"tag":596,"props":683,"children":684},{"align":569},[685,690,692,697,699,704,705],{"type":504,"tag":520,"props":686,"children":687},{},[688],{"type":510,"value":689},"长任务",{"type":510,"value":691}," (Long Tasks)、",{"type":504,"tag":520,"props":693,"children":694},{},[695],{"type":510,"value":696},"JS 执行过多",{"type":510,"value":698},"、",{"type":504,"tag":520,"props":700,"children":701},{},[702],{"type":510,"value":703},"组件重复渲染",{"type":510,"value":698},{"type":504,"tag":520,"props":706,"children":707},{},[708],{"type":510,"value":709},"事件处理函数复杂",{"type":504,"tag":563,"props":711,"children":712},{},[713,723,733,742],{"type":504,"tag":596,"props":714,"children":715},{"align":569},[716,721],{"type":504,"tag":520,"props":717,"children":718},{},[719],{"type":510,"value":720},"CLS",{"type":510,"value":722}," (Cumulative Layout Shift)",{"type":504,"tag":596,"props":724,"children":725},{"align":569},[726,731],{"type":504,"tag":520,"props":727,"children":728},{},[729],{"type":510,"value":730},"视觉稳定性",{"type":510,"value":732},"：页面加载期间的意外布局偏移累积得分。",{"type":504,"tag":596,"props":734,"children":735},{"align":569},[736],{"type":504,"tag":620,"props":737,"children":739},{"className":738},[],[740],{"type":510,"value":741},"\u003C 0.1",{"type":504,"tag":596,"props":743,"children":744},{"align":569},[745,750,751,756,757],{"type":504,"tag":520,"props":746,"children":747},{},[748],{"type":510,"value":749},"无尺寸图片\u002F广告",{"type":510,"value":698},{"type":504,"tag":520,"props":752,"children":753},{},[754],{"type":510,"value":755},"动态注入内容",{"type":510,"value":698},{"type":504,"tag":520,"props":758,"children":759},{},[760],{"type":510,"value":761},"字体加载引发FOUT\u002FFOIT",{"type":504,"tag":563,"props":763,"children":764},{},[765,775,785,794],{"type":504,"tag":596,"props":766,"children":767},{"align":569},[768,773],{"type":504,"tag":520,"props":769,"children":770},{},[771],{"type":510,"value":772},"TTFB",{"type":510,"value":774}," (Time to First Byte)",{"type":504,"tag":596,"props":776,"children":777},{"align":569},[778,783],{"type":504,"tag":520,"props":779,"children":780},{},[781],{"type":510,"value":782},"服务器响应",{"type":510,"value":784},"：浏览器发出请求到接收到第一个字节的时间。",{"type":504,"tag":596,"props":786,"children":787},{"align":569},[788],{"type":504,"tag":620,"props":789,"children":791},{"className":790},[],[792],{"type":510,"value":793},"\u003C 800ms",{"type":504,"tag":596,"props":795,"children":796},{"align":569},[797],{"type":510,"value":798},"服务器端逻辑慢、数据库查询慢、网络延迟、CDN 未命中",{"type":504,"tag":563,"props":800,"children":801},{},[802,812,822,831],{"type":504,"tag":596,"props":803,"children":804},{"align":569},[805,810],{"type":504,"tag":520,"props":806,"children":807},{},[808],{"type":510,"value":809},"FCP",{"type":510,"value":811}," (First Contentful Paint)",{"type":504,"tag":596,"props":813,"children":814},{"align":569},[815,820],{"type":504,"tag":520,"props":816,"children":817},{},[818],{"type":510,"value":819},"首次绘制",{"type":510,"value":821},"：浏览器渲染出第一个 DOM 内容（文本、图片等）的时间点。",{"type":504,"tag":596,"props":823,"children":824},{"align":569},[825],{"type":504,"tag":620,"props":826,"children":828},{"className":827},[],[829],{"type":510,"value":830},"\u003C 1.8s",{"type":504,"tag":596,"props":832,"children":833},{"align":569},[834],{"type":510,"value":835},"渲染阻塞资源、TTFB 慢",{"type":504,"tag":516,"props":837,"children":838},{},[839,844,846,851,853,858,859,864,866,871],{"type":504,"tag":520,"props":840,"children":841},{},[842],{"type":510,"value":843},"指标关系",{"type":510,"value":845},"：",{"type":504,"tag":620,"props":847,"children":849},{"className":848},[],[850],{"type":510,"value":772},{"type":510,"value":852}," → ",{"type":504,"tag":620,"props":854,"children":856},{"className":855},[],[857],{"type":510,"value":809},{"type":510,"value":852},{"type":504,"tag":620,"props":860,"children":862},{"className":861},[],[863],{"type":510,"value":603},{"type":510,"value":865},"。TTFB 是所有加载指标的起点。",{"type":504,"tag":620,"props":867,"children":869},{"className":868},[],[870],{"type":510,"value":660},{"type":510,"value":872}," 则独立衡量交互后的响应能力。",{"type":504,"tag":528,"props":874,"children":875},{},[],{"type":504,"tag":532,"props":877,"children":879},{"id":878},"_2-定位工具箱-the-profiling-tools",[880],{"type":510,"value":881},"2. 定位工具箱 (The Profiling Tools)",{"type":504,"tag":516,"props":883,"children":884},{},[885],{"type":510,"value":886},"有了指标，下一步就是用正确的工具来定位问题。",{"type":504,"tag":888,"props":889,"children":890},"ol",{},[891,974,1066],{"type":504,"tag":892,"props":893,"children":894},"li",{},[895,900],{"type":504,"tag":520,"props":896,"children":897},{},[898],{"type":510,"value":899},"React Profiler (DevTools)",{"type":504,"tag":901,"props":902,"children":903},"ul",{},[904,914,931],{"type":504,"tag":892,"props":905,"children":906},{},[907,912],{"type":504,"tag":520,"props":908,"children":909},{},[910],{"type":510,"value":911},"用途",{"type":510,"value":913},"：专门分析 React 组件的渲染性能。找出哪个组件渲染耗时过长，以及哪些组件发生了不必要的重渲染。",{"type":504,"tag":892,"props":915,"children":916},{},[917,922,924,929],{"type":504,"tag":520,"props":918,"children":919},{},[920],{"type":510,"value":921},"何时使用",{"type":510,"value":923},"：当怀疑 ",{"type":504,"tag":620,"props":925,"children":927},{"className":926},[],[928],{"type":510,"value":660},{"type":510,"value":930}," 问题、UI 卡顿或交互响应慢时。",{"type":504,"tag":892,"props":932,"children":933},{},[934,939,941],{"type":504,"tag":520,"props":935,"children":936},{},[937],{"type":510,"value":938},"关键视图",{"type":510,"value":940},"：\n",{"type":504,"tag":901,"props":942,"children":943},{},[944,954,964],{"type":504,"tag":892,"props":945,"children":946},{},[947,952],{"type":504,"tag":520,"props":948,"children":949},{},[950],{"type":510,"value":951},"火焰图 (Flamegraph)",{"type":510,"value":953},"：可视化渲染耗时，宽的条形代表耗时长的组件。",{"type":504,"tag":892,"props":955,"children":956},{},[957,962],{"type":504,"tag":520,"props":958,"children":959},{},[960],{"type":510,"value":961},"排行榜 (Ranked Chart)",{"type":510,"value":963},"：按渲染耗时对组件进行排序，快速找到瓶颈。",{"type":504,"tag":892,"props":965,"children":966},{},[967,972],{"type":504,"tag":520,"props":968,"children":969},{},[970],{"type":510,"value":971},"\"Why did this render?\"",{"type":510,"value":973},"：勾选此项，可以看到每次 commit 中组件重渲染的原因（props\u002Fstate\u002Fhooks 变化）。",{"type":504,"tag":892,"props":975,"children":976},{},[977,982],{"type":504,"tag":520,"props":978,"children":979},{},[980],{"type":510,"value":981},"Chrome Performance Panel (DevTools)",{"type":504,"tag":901,"props":983,"children":984},{},[985,994,1010],{"type":504,"tag":892,"props":986,"children":987},{},[988,992],{"type":504,"tag":520,"props":989,"children":990},{},[991],{"type":510,"value":911},{"type":510,"value":993},"：最强大的性能分析工具，提供对浏览器主线程活动的全面洞察。",{"type":504,"tag":892,"props":995,"children":996},{},[997,1001,1003,1008],{"type":504,"tag":520,"props":998,"children":999},{},[1000],{"type":510,"value":921},{"type":510,"value":1002},"：分析 ",{"type":504,"tag":620,"props":1004,"children":1006},{"className":1005},[],[1007],{"type":510,"value":660},{"type":510,"value":1009},"、长任务、动画掉帧和页面加载全过程。",{"type":504,"tag":892,"props":1011,"children":1012},{},[1013,1018,1019],{"type":504,"tag":520,"props":1014,"children":1015},{},[1016],{"type":510,"value":1017},"关键部分",{"type":510,"value":940},{"type":504,"tag":901,"props":1020,"children":1021},{},[1022,1046,1056],{"type":504,"tag":892,"props":1023,"children":1024},{},[1025,1030,1032,1037,1039,1044],{"type":504,"tag":520,"props":1026,"children":1027},{},[1028],{"type":510,"value":1029},"Main Thread 轨道",{"type":510,"value":1031},"：核心区域。寻找红色的长条，即",{"type":504,"tag":520,"props":1033,"children":1034},{},[1035],{"type":510,"value":1036},"长任务 (Long Tasks)",{"type":510,"value":1038},"。点击长任务，可以在下方的 ",{"type":504,"tag":520,"props":1040,"children":1041},{},[1042],{"type":510,"value":1043},"Bottom-Up",{"type":510,"value":1045}," 标签页中看到任务耗时的具体归因（哪个函数调用、脚本执行等）。",{"type":504,"tag":892,"props":1047,"children":1048},{},[1049,1054],{"type":504,"tag":520,"props":1050,"children":1051},{},[1052],{"type":510,"value":1053},"Timings 轨道",{"type":510,"value":1055},"：显示 LCP, FCP, DCL 等关键指标的时间点。",{"type":504,"tag":892,"props":1057,"children":1058},{},[1059,1064],{"type":504,"tag":520,"props":1060,"children":1061},{},[1062],{"type":510,"value":1063},"Network 轨道",{"type":510,"value":1065},"：查看资源加载瀑布流。",{"type":504,"tag":892,"props":1067,"children":1068},{},[1069,1074],{"type":504,"tag":520,"props":1070,"children":1071},{},[1072],{"type":510,"value":1073},"Chrome Network Panel (DevTools)",{"type":504,"tag":901,"props":1075,"children":1076},{},[1077,1086,1107],{"type":504,"tag":892,"props":1078,"children":1079},{},[1080,1084],{"type":504,"tag":520,"props":1081,"children":1082},{},[1083],{"type":510,"value":911},{"type":510,"value":1085},"：分析所有网络请求，包括资源加载速度、大小、优先级和时序。",{"type":504,"tag":892,"props":1087,"children":1088},{},[1089,1093,1094,1099,1100,1105],{"type":504,"tag":520,"props":1090,"children":1091},{},[1092],{"type":510,"value":921},{"type":510,"value":1002},{"type":504,"tag":620,"props":1095,"children":1097},{"className":1096},[],[1098],{"type":510,"value":603},{"type":510,"value":698},{"type":504,"tag":620,"props":1101,"children":1103},{"className":1102},[],[1104],{"type":510,"value":772},{"type":510,"value":1106}," 慢，或页面整体加载慢的问题。",{"type":504,"tag":892,"props":1108,"children":1109},{},[1110,1115,1116],{"type":504,"tag":520,"props":1111,"children":1112},{},[1113],{"type":510,"value":1114},"关键检查点",{"type":510,"value":940},{"type":504,"tag":901,"props":1117,"children":1118},{},[1119,1129,1139],{"type":504,"tag":892,"props":1120,"children":1121},{},[1122,1127],{"type":504,"tag":520,"props":1123,"children":1124},{},[1125],{"type":510,"value":1126},"瀑布图 (Waterfall)",{"type":510,"value":1128},"：是否存在请求链过长？是否有并行度不足的问题？",{"type":504,"tag":892,"props":1130,"children":1131},{},[1132,1137],{"type":504,"tag":520,"props":1133,"children":1134},{},[1135],{"type":510,"value":1136},"Size 列",{"type":510,"value":1138},"：资源是否过大？是否启用了 Gzip\u002FBrotli 压缩？",{"type":504,"tag":892,"props":1140,"children":1141},{},[1142,1147],{"type":504,"tag":520,"props":1143,"children":1144},{},[1145],{"type":510,"value":1146},"Time 列",{"type":510,"value":1148},"：TTFB 是否过高？（服务器问题）Content Download 时间是否过长？（资源大或网络差）",{"type":504,"tag":528,"props":1150,"children":1151},{},[],{"type":504,"tag":532,"props":1153,"children":1155},{"id":1154},"_3-性能定位-playbook-the-workflow",[1156],{"type":510,"value":1157},"3. 性能定位 Playbook (The Workflow)",{"type":504,"tag":516,"props":1159,"children":1160},{},[1161],{"type":510,"value":1162},"这套流程旨在将“感觉慢”变成可量化、可归因的问题。",{"type":504,"tag":1164,"props":1165,"children":1167},"h3",{"id":1166},"playbook-1-分析慢-lcp",[1168],{"type":510,"value":1169},"Playbook 1: 分析慢 LCP",{"type":504,"tag":888,"props":1171,"children":1172},{},[1173,1195,1284,1322],{"type":504,"tag":892,"props":1174,"children":1175},{},[1176,1181,1182],{"type":504,"tag":520,"props":1177,"children":1178},{},[1179],{"type":510,"value":1180},"识别最大内容元素",{"type":510,"value":845},{"type":504,"tag":901,"props":1183,"children":1184},{},[1185,1190],{"type":504,"tag":892,"props":1186,"children":1187},{},[1188],{"type":510,"value":1189},"在 Performance 面板中，找到 Timings 轨道的 LCP 标记。",{"type":504,"tag":892,"props":1191,"children":1192},{},[1193],{"type":510,"value":1194},"将鼠标悬停在上面，浏览器会高亮显示对应的元素。",{"type":504,"tag":892,"props":1196,"children":1197},{},[1198,1203,1204],{"type":504,"tag":520,"props":1199,"children":1200},{},[1201],{"type":510,"value":1202},"分析 LCP 资源加载",{"type":510,"value":845},{"type":504,"tag":901,"props":1205,"children":1206},{},[1207,1258],{"type":504,"tag":892,"props":1208,"children":1209},{},[1210,1215,1217],{"type":504,"tag":520,"props":1211,"children":1212},{},[1213],{"type":510,"value":1214},"如果是图片",{"type":510,"value":1216},"：去 Network 面板找到该图片的请求。\n",{"type":504,"tag":901,"props":1218,"children":1219},{},[1220,1230,1248],{"type":504,"tag":892,"props":1221,"children":1222},{},[1223,1228],{"type":504,"tag":520,"props":1224,"children":1225},{},[1226],{"type":510,"value":1227},"检查大小",{"type":510,"value":1229},"：是否过大？是否可以压缩或使用 WebP 格式？",{"type":504,"tag":892,"props":1231,"children":1232},{},[1233,1238,1240,1246],{"type":504,"tag":520,"props":1234,"children":1235},{},[1236],{"type":510,"value":1237},"检查优先级",{"type":510,"value":1239},"：是否因为其他资源阻塞导致加载延迟？是否需要使用 ",{"type":504,"tag":620,"props":1241,"children":1243},{"className":1242},[],[1244],{"type":510,"value":1245},"fetchpriority=\"high\"",{"type":510,"value":1247}," 提升优先级？",{"type":504,"tag":892,"props":1249,"children":1250},{},[1251,1256],{"type":504,"tag":520,"props":1252,"children":1253},{},[1254],{"type":510,"value":1255},"检查时序",{"type":510,"value":1257},"：请求是否过晚发起？（例如，由某个 JS 逻辑触发）",{"type":504,"tag":892,"props":1259,"children":1260},{},[1261,1266,1268],{"type":504,"tag":520,"props":1262,"children":1263},{},[1264],{"type":510,"value":1265},"如果是文本",{"type":510,"value":1267},"：通常与字体文件加载（Web Font）有关。\n",{"type":504,"tag":901,"props":1269,"children":1270},{},[1271],{"type":504,"tag":892,"props":1272,"children":1273},{},[1274,1276,1282],{"type":510,"value":1275},"检查字体文件是否过大，是否阻塞了文本渲染（FOIT）。考虑使用 ",{"type":504,"tag":620,"props":1277,"children":1279},{"className":1278},[],[1280],{"type":510,"value":1281},"font-display: swap",{"type":510,"value":1283},"。",{"type":504,"tag":892,"props":1285,"children":1286},{},[1287,1292,1293],{"type":504,"tag":520,"props":1288,"children":1289},{},[1290],{"type":510,"value":1291},"分析渲染路径",{"type":510,"value":845},{"type":504,"tag":901,"props":1294,"children":1295},{},[1296,1317],{"type":504,"tag":892,"props":1297,"children":1298},{},[1299,1301,1307,1309,1315],{"type":510,"value":1300},"查看 LCP 资源请求前的瀑布流。是否存在阻塞渲染的 CSS 或 JS？（",{"type":504,"tag":620,"props":1302,"children":1304},{"className":1303},[],[1305],{"type":510,"value":1306},"\u003Clink rel=\"stylesheet\">",{"type":510,"value":1308}," 和 ",{"type":504,"tag":620,"props":1310,"children":1312},{"className":1311},[],[1313],{"type":510,"value":1314},"\u003Cscript>",{"type":510,"value":1316}," 默认阻塞）",{"type":504,"tag":892,"props":1318,"children":1319},{},[1320],{"type":510,"value":1321},"考虑异步加载非关键 CSS\u002FJS。",{"type":504,"tag":892,"props":1323,"children":1324},{},[1325,1330,1331],{"type":504,"tag":520,"props":1326,"children":1327},{},[1328],{"type":510,"value":1329},"检查 TTFB",{"type":510,"value":845},{"type":504,"tag":901,"props":1332,"children":1333},{},[1334],{"type":504,"tag":892,"props":1335,"children":1336},{},[1337],{"type":510,"value":1338},"在 Network 面板查看主文档的 TTFB。如果过高，说明是服务器端瓶颈，需要后端或运维介入。",{"type":504,"tag":1164,"props":1340,"children":1342},{"id":1341},"playbook-2-分析高-inp",[1343],{"type":510,"value":1344},"Playbook 2: 分析高 INP",{"type":504,"tag":888,"props":1346,"children":1347},{},[1348,1375,1399,1483,1539],{"type":504,"tag":892,"props":1349,"children":1350},{},[1351,1356,1357],{"type":504,"tag":520,"props":1352,"children":1353},{},[1354],{"type":510,"value":1355},"复现慢交互",{"type":510,"value":845},{"type":504,"tag":901,"props":1358,"children":1359},{},[1360,1365,1370],{"type":504,"tag":892,"props":1361,"children":1362},{},[1363],{"type":510,"value":1364},"打开 Performance 面板，点击录制。",{"type":504,"tag":892,"props":1366,"children":1367},{},[1368],{"type":510,"value":1369},"执行导致卡顿的用户操作（例如，在输入框中打字、点击一个复杂的按钮）。",{"type":504,"tag":892,"props":1371,"children":1372},{},[1373],{"type":510,"value":1374},"停止录制。",{"type":504,"tag":892,"props":1376,"children":1377},{},[1378,1383,1384],{"type":504,"tag":520,"props":1379,"children":1380},{},[1381],{"type":510,"value":1382},"寻找长任务",{"type":510,"value":845},{"type":504,"tag":901,"props":1385,"children":1386},{},[1387],{"type":504,"tag":892,"props":1388,"children":1389},{},[1390,1392,1397],{"type":510,"value":1391},"在 Main Thread 轨道中，寻找与你交互时间点对应的",{"type":504,"tag":520,"props":1393,"children":1394},{},[1395],{"type":510,"value":1396},"红色长任务",{"type":510,"value":1398},"。所有超过 50ms 的任务都是长任务。",{"type":504,"tag":892,"props":1400,"children":1401},{},[1402,1407,1408],{"type":504,"tag":520,"props":1403,"children":1404},{},[1405],{"type":510,"value":1406},"归因长任务",{"type":510,"value":845},{"type":504,"tag":901,"props":1409,"children":1410},{},[1411,1416,1434],{"type":504,"tag":892,"props":1412,"children":1413},{},[1414],{"type":510,"value":1415},"点击该长任务。",{"type":504,"tag":892,"props":1417,"children":1418},{},[1419,1421,1425,1427,1432],{"type":510,"value":1420},"查看下方的 ",{"type":504,"tag":520,"props":1422,"children":1423},{},[1424],{"type":510,"value":1043},{"type":510,"value":1426}," 或 ",{"type":504,"tag":520,"props":1428,"children":1429},{},[1430],{"type":510,"value":1431},"Call Tree",{"type":510,"value":1433}," 标签页。这里会列出该任务中所有函数的耗时排行。",{"type":504,"tag":892,"props":1435,"children":1436},{},[1437,1439,1444,1446,1452,1454,1459,1461,1467,1469,1474,1475,1481],{"type":510,"value":1438},"通常你会发现是某个",{"type":504,"tag":520,"props":1440,"children":1441},{},[1442],{"type":510,"value":1443},"事件处理函数",{"type":510,"value":1445},"（",{"type":504,"tag":620,"props":1447,"children":1449},{"className":1448},[],[1450],{"type":510,"value":1451},"Event: click",{"type":510,"value":1453},"）、",{"type":504,"tag":520,"props":1455,"children":1456},{},[1457],{"type":510,"value":1458},"定时器",{"type":510,"value":1460}," (",{"type":504,"tag":620,"props":1462,"children":1464},{"className":1463},[],[1465],{"type":510,"value":1466},"Timer Fired",{"type":510,"value":1468},") 或 ",{"type":504,"tag":520,"props":1470,"children":1471},{},[1472],{"type":510,"value":1473},"React 渲染周期",{"type":510,"value":1460},{"type":504,"tag":620,"props":1476,"children":1478},{"className":1477},[],[1479],{"type":510,"value":1480},"Perform work on root",{"type":510,"value":1482},") 占用了大量时间。",{"type":504,"tag":892,"props":1484,"children":1485},{},[1486,1491,1492],{"type":504,"tag":520,"props":1487,"children":1488},{},[1489],{"type":510,"value":1490},"深入 React Profiler",{"type":510,"value":845},{"type":504,"tag":901,"props":1493,"children":1494},{},[1495,1500,1505,1510],{"type":504,"tag":892,"props":1496,"children":1497},{},[1498],{"type":510,"value":1499},"如果 Performance 面板指向 React 的渲染过程，下一步就是使用 React Profiler。",{"type":504,"tag":892,"props":1501,"children":1502},{},[1503],{"type":510,"value":1504},"重复上述操作，但在 React Profiler 中录制。",{"type":504,"tag":892,"props":1506,"children":1507},{},[1508],{"type":510,"value":1509},"查看火焰图\u002F排行榜，找到渲染最慢的组件。",{"type":504,"tag":892,"props":1511,"children":1512},{},[1513,1515,1519,1521],{"type":510,"value":1514},"分析 ",{"type":504,"tag":520,"props":1516,"children":1517},{},[1518],{"type":510,"value":971},{"type":510,"value":1520},"，检查是否存在不必要的重渲染。常见的元凶是：\n",{"type":504,"tag":901,"props":1522,"children":1523},{},[1524,1529,1534],{"type":504,"tag":892,"props":1525,"children":1526},{},[1527],{"type":510,"value":1528},"传递了新的对象\u002F函数字面量作为 props。",{"type":504,"tag":892,"props":1530,"children":1531},{},[1532],{"type":510,"value":1533},"Context 的值发生变化，导致所有消费者重渲染。",{"type":504,"tag":892,"props":1535,"children":1536},{},[1537],{"type":510,"value":1538},"状态设计不佳，一个微小的变化导致整个组件树刷新。",{"type":504,"tag":892,"props":1540,"children":1541},{},[1542,1547,1548],{"type":504,"tag":520,"props":1543,"children":1544},{},[1545],{"type":510,"value":1546},"优化",{"type":510,"value":845},{"type":504,"tag":901,"props":1549,"children":1550},{},[1551],{"type":504,"tag":892,"props":1552,"children":1553},{},[1554,1556,1562,1564,1570],{"type":510,"value":1555},"根据原因进行优化：使用 ",{"type":504,"tag":620,"props":1557,"children":1559},{"className":1558},[],[1560],{"type":510,"value":1561},"useMemo",{"type":510,"value":1563},"\u002F",{"type":504,"tag":620,"props":1565,"children":1567},{"className":1566},[],[1568],{"type":510,"value":1569},"useCallback",{"type":510,"value":1571},"、拆分组件、优化 Context、对长列表进行虚拟化等。",{"type":504,"tag":528,"props":1573,"children":1574},{},[],{"type":504,"tag":532,"props":1576,"children":1578},{"id":1577},"_4-观测与验证-observability",[1579],{"type":510,"value":1580},"4. 观测与验证 (Observability)",{"type":504,"tag":901,"props":1582,"children":1583},{},[1584,1594,1604],{"type":504,"tag":892,"props":1585,"children":1586},{},[1587,1592],{"type":504,"tag":520,"props":1588,"children":1589},{},[1590],{"type":510,"value":1591},"本地开发",{"type":510,"value":1593},"：使用 DevTools 进行即时分析和验证。",{"type":504,"tag":892,"props":1595,"children":1596},{},[1597,1602],{"type":504,"tag":520,"props":1598,"children":1599},{},[1600],{"type":510,"value":1601},"线上监控",{"type":510,"value":1603},"：集成真实用户监控 (RUM) 工具，如 Sentry, Datadog, Vercel Analytics 等。这些工具会收集真实用户的 Core Web Vitals 数据，并与版本、地域、设备等维度关联，让你能发现开发环境中未曾预料到的性能问题。",{"type":504,"tag":892,"props":1605,"children":1606},{},[1607,1612],{"type":504,"tag":520,"props":1608,"children":1609},{},[1610],{"type":510,"value":1611},"性能预算",{"type":510,"value":1613},"：在 CI\u002FCD 流程中集成 Lighthouse 或其他工具，设置性能预算（例如，LCP \u003C 2.5s, JS bundle \u003C 200KB）。如果 MR 超出预算，则阻塞合并，强制开发者在上线前解决性能问题。",{"type":504,"tag":528,"props":1615,"children":1616},{},[],{"type":504,"tag":532,"props":1618,"children":1620},{"id":1619},"_5-关联阅读",[1621],{"type":510,"value":1622},"5. 关联阅读",{"type":504,"tag":901,"props":1624,"children":1625},{},[1626,1643,1659],{"type":504,"tag":892,"props":1627,"children":1628},{},[1629,1634,1636],{"type":504,"tag":520,"props":1630,"children":1631},{},[1632],{"type":510,"value":1633},"React Profiler 官方文档",{"type":510,"value":1635},": ",{"type":504,"tag":544,"props":1637,"children":1640},{"href":1638,"rel":1639},"https:\u002F\u002Freact.dev\u002Freference\u002Freact-dom\u002Fprofiler",[548],[1641],{"type":510,"value":1642},"Profiling React Apps",{"type":504,"tag":892,"props":1644,"children":1645},{},[1646,1651,1652],{"type":504,"tag":520,"props":1647,"children":1648},{},[1649],{"type":510,"value":1650},"Google Web Vitals",{"type":510,"value":1635},{"type":504,"tag":544,"props":1653,"children":1656},{"href":1654,"rel":1655},"https:\u002F\u002Fweb.dev\u002Fvitals",[548],[1657],{"type":510,"value":1658},"web.dev\u002Fvitals",{"type":504,"tag":892,"props":1660,"children":1661},{},[1662,1667,1669,1675],{"type":504,"tag":520,"props":1663,"children":1664},{},[1665],{"type":510,"value":1666},"渲染优化",{"type":510,"value":1668},": (指向 ",{"type":504,"tag":620,"props":1670,"children":1672},{"className":1671},[],[1673],{"type":510,"value":1674},"notes\u002F14\u002F02-rendering-optimization.md",{"type":510,"value":1676}," 的链接)",{"title":1678,"searchDepth":1679,"depth":1679,"links":1680},"",2,[1681,1682,1683,1688,1689],{"id":534,"depth":1679,"text":537},{"id":878,"depth":1679,"text":881},{"id":1154,"depth":1679,"text":1157,"children":1684},[1685,1687],{"id":1166,"depth":1686,"text":1169},3,{"id":1341,"depth":1686,"text":1344},{"id":1577,"depth":1679,"text":1580},{"id":1619,"depth":1679,"text":1622},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1691},"\u003Cpath fill=\"currentColor\" d=\"m10.828 12l4.95 4.95l-1.414 1.415L8 12l6.364-6.364l1.414 1.414z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1693},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1695},"\u003Cpath fill=\"currentColor\" d=\"m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z\"\u002F>"]