[{"data":1,"prerenderedAt":3236},["ShallowReactive",2],{"blog-reflow-repaint-transform":3},{"id":4,"title":5,"body":6,"category":3222,"date":3223,"description":3224,"draft":3225,"extension":3226,"meta":3227,"navigation":462,"path":3228,"seo":3229,"stem":3230,"tags":3231,"__hash__":3235},"blog\u002Fblog\u002Freflow-repaint-transform.md","reflow、repaint 与 transform 为何高效",{"type":7,"value":8,"toc":3213},"minimark",[9,13,36,41,46,53,57,64,70,74,93,99,187,191,196,217,224,232,287,291,308,310,330,344,360,3179,3182,3210],[10,11,5],"h1",{"id":12},"reflowrepaint-与-transform-为何高效",[14,15,16,17,22,23,27,28,31,32,35],"p",{},"上一篇 ",[18,19,21],"a",{"href":20},"\u002Fblog\u002Fbrowser-rendering-pipeline","浏览器渲染流水线"," 讲的是「从零画一页」。页面跑起来之后，改 DOM 或样式会触发 ",[24,25,26],"strong",{},"局部重算","。面试里常说的 ",[24,29,30],{},"回流（reflow）","、",[24,33,34],{},"重绘（repaint）","，指的就是流水线里哪些阶段要重跑。",[37,38,40],"h2",{"id":39},"什么是-reflow回流","什么是 reflow（回流）？",[14,42,43],{},[24,44,45],{},"Reflow 的本质是重新计算布局树（Layout）。",[14,47,48,49,52],{},"凡是会影响布局树的操作——改宽高、边距、显示方式、插入删除节点等——都需要重新做 ",[24,50,51],{},"Layout"," 及之后的阶段（分层、绘制、分块、光栅化、合成）。",[54,55,56],"h3",{"id":56},"浏览器会合并多次改动",[14,58,59,60,63],{},"连续多次改布局相关属性时，浏览器往往 ",[24,61,62],{},"先合并","，等当前 JS 执行块结束后再统一算布局，避免同一帧里反复 reflow。",[14,65,66,67],{},"因此：",[24,68,69],{},"改属性触发的 reflow 常常是异步批量的。",[54,71,73],{"id":72},"读布局属性会强制同步-reflow","读布局属性会强制同步 reflow",[14,75,76,77,80,81,31,85,88,89,92],{},"如果 JS 在改完布局后又 ",[24,78,79],{},"读取"," ",[82,83,84],"code",{},"offsetWidth",[82,86,87],{},"getBoundingClientRect()"," 等依赖最新几何信息的属性，浏览器必须 ",[24,90,91],{},"立刻算出最新布局","，否则会返回过期数据。",[14,94,95,96],{},"所以常见性能建议：",[24,97,98],{},"先读后写，或批量改样式，避免读写交错。",[100,101,104],"code-block",{"lang":102,"title":103},"javascript","读写交错可能触发强制同步布局",[105,106,110],"pre",{"className":107,"code":108,"language":102,"meta":109,"style":109},"language-javascript shiki shiki-themes github-light github-dark","const el = document.querySelector('.box')\nel.style.width = '200px'\n\u002F\u002F 读宽度会迫使浏览器立即 reflow\nconsole.log(el.offsetWidth)\nel.style.width = '300px'\n","",[82,111,112,146,158,165,177],{"__ignoreMap":109},[113,114,117,121,125,128,132,136,139,143],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"szBVR","const",[113,122,124],{"class":123},"sj4cs"," el",[113,126,127],{"class":119}," =",[113,129,131],{"class":130},"sVt8B"," document.",[113,133,135],{"class":134},"sScJk","querySelector",[113,137,138],{"class":130},"(",[113,140,142],{"class":141},"sZZnC","'.box'",[113,144,145],{"class":130},")\n",[113,147,149,152,155],{"class":115,"line":148},2,[113,150,151],{"class":130},"el.style.width ",[113,153,154],{"class":119},"=",[113,156,157],{"class":141}," '200px'\n",[113,159,161],{"class":115,"line":160},3,[113,162,164],{"class":163},"sJ8bj","\u002F\u002F 读宽度会迫使浏览器立即 reflow\n",[113,166,168,171,174],{"class":115,"line":167},4,[113,169,170],{"class":130},"console.",[113,172,173],{"class":134},"log",[113,175,176],{"class":130},"(el.offsetWidth)\n",[113,178,180,182,184],{"class":115,"line":179},5,[113,181,151],{"class":130},[113,183,154],{"class":119},[113,185,186],{"class":141}," '300px'\n",[37,188,190],{"id":189},"什么是-repaint重绘","什么是 repaint（重绘）？",[14,192,193],{},[24,194,195],{},"Repaint 的本质是重新生成绘制指令（Paint）及之后步骤。",[14,197,198,199,202,203,31,206,31,209,212,213,216],{},"改的是 ",[24,200,201],{},"可见样式但不改布局"," 时——例如 ",[82,204,205],{},"color",[82,207,208],{},"background",[82,210,211],{},"visibility","（在仍占位的情况下）——可能只需 ",[24,214,215],{},"Repaint","，不必完整 reflow。",[14,218,219,220,223],{},"但 ",[24,221,222],{},"布局信息本身也是可见结果的一部分","，所以：",[225,226,227],"blockquote",{},[14,228,229],{},[24,230,231],{},"Reflow 一定会引起 Repaint。",[233,234,235,251],"table",{},[236,237,238],"thead",{},[239,240,241,245,248],"tr",{},[242,243,244],"th",{},"操作类型",[242,246,247],{},"典型属性",[242,249,250],{},"至少触发的阶段",[252,253,254,274],"tbody",{},[239,255,256,260,271],{},[257,258,259],"td",{},"Reflow",[257,261,262,31,265,31,268],{},[82,263,264],{},"width",[82,266,267],{},"margin",[82,269,270],{},"display",[257,272,273],{},"Layout → … → Draw",[239,275,276,278,284],{},[257,277,215],{},[257,279,280,31,282],{},[82,281,205],{},[82,283,208],{},[257,285,286],{},"Paint → … → Draw",[37,288,290],{"id":289},"为什么-transform-效率高","为什么 transform 效率高？",[14,292,293,80,296,299,300,303,304,307],{},[82,294,295],{},"transform",[24,297,298],{},"不改变布局树","，也 ",[24,301,302],{},"不改变绘制指令的生成方式","（不触发典型意义上的 layout \u002F paint 重算）。它主要影响流水线最后的 ",[24,305,306],{},"Draw（合成）"," 阶段：在合成线程里对已有位图做位移、旋转、缩放。",[14,309,66],{},[311,312,313,323],"ul",{},[314,315,316,318,319,322],"li",{},[82,317,295],{}," 变化时，",[24,320,321],{},"渲染主线程"," 往往仍很空闲",[314,324,325,326,329],{},"主线程再忙，",[24,327,328],{},"也不应挡住"," 合成线程上的 transform 动画",[14,331,332,333,336,337,340,341,343],{},"对比：用 ",[82,334,335],{},"top"," \u002F ",[82,338,339],{},"left"," 做位移动画会改布局，通常走 ",[24,342,259],{}," 路径，代价大得多。",[14,345,346,349,350,353,354,356,357,359],{},[24,347,348],{},"注意："," 对比的前提是 ",[24,351,352],{},"画面一样、实现不同","。下面 demo 两个小球同步左右移动，左边用 ",[82,355,295],{},"，右边用 ",[82,358,339],{},"；视觉上应一致，差别在每一帧走合成还是 Layout。",[361,362,364],"code-playground",{"title":363},"transform vs left：同动画、不同实现",[105,365,369],{"className":366,"code":367,"language":368,"meta":109,"style":109},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv class=\"wrap\">\n    \u003Cp class=\"tip\">\n      点「开始动画」：两球同步往复移动。左边 \u003Ccode>transform: translateX\u003C\u002Fcode>，右边\n      \u003Ccode>left\u003C\u002Fcode>。画面应一致；右轨每帧触发布局，主线程更忙时可能更卡。\n    \u003C\u002Fp>\n\n    \u003Cdiv class=\"compare\">\n      \u003Cdiv class=\"col\">\n        \u003Cdiv class=\"col-head\">\n          \u003Cspan class=\"tag good\">transform\u003C\u002Fspan>\n          \u003Cspan class=\"metric\">本帧 ≈ {{ transformMs }}ms\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"track\">\n          \u003Cdiv class=\"ball\" :style=\"{ transform: `translateX(${x}px)` }\" \u002F>\n        \u003C\u002Fdiv>\n        \u003Cp class=\"note\">合成阶段位移，不改布局树\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"col\">\n        \u003Cdiv class=\"col-head\">\n          \u003Cspan class=\"tag warn\">left\u003C\u002Fspan>\n          \u003Cspan class=\"metric warn-m\">{{ layoutMs }}ms\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"track\">\n          \u003Cdiv ref=\"leftBall\" class=\"ball\" :style=\"{ left: `${x}px` }\" \u002F>\n        \u003C\u002Fdiv>\n        \u003Cp class=\"note\">每帧改几何位置 → Layout\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"actions\">\n      \u003Cbutton class=\"btn\" :class=\"{ active: running }\" @click=\"toggle\">\n        {{ running ? '停止动画' : '开始动画' }}\n      \u003C\u002Fbutton>\n      \u003Cbutton class=\"btn ghost\" @click=\"reset\">复位\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { nextTick, onUnmounted, ref } from 'vue'\n\nconst running = ref(false)\nconst x = ref(0)\nconst transformMs = ref(0)\nconst layoutMs = ref(0)\nconst leftBall = ref(null)\n\nlet rafId = 0\nlet start = 0\nlet tSamples = []\nlet lSamples = []\n\nfunction tick(now) {\n  if (!start) start = now\n  const phase = (now - start) \u002F 420\n  const value = Math.sin(phase) * 100 + 100\n\n  const t0 = performance.now()\n  x.value = value\n  const tCost = performance.now() - t0\n  tSamples.push(tCost)\n  if (tSamples.length > 20) tSamples.shift()\n  transformMs.value = Math.round((tSamples.reduce((a, b) => a + b, 0) \u002F tSamples.length) * 100) \u002F 100\n\n  nextTick(() => {\n    const l0 = performance.now()\n    const el = leftBall.value\n    if (el) {\n      void el.offsetLeft\n      void el.offsetWidth\n      void el.getBoundingClientRect()\n    }\n    const lCost = performance.now() - l0\n    lSamples.push(lCost)\n    if (lSamples.length > 20) lSamples.shift()\n    layoutMs.value = Math.round((lSamples.reduce((a, b) => a + b, 0) \u002F lSamples.length) * 10) \u002F 10\n\n    if (running.value) {\n      rafId = requestAnimationFrame(tick)\n    }\n  })\n}\n\nfunction resetAnim() {\n  start = 0\n  x.value = 0\n  tSamples = []\n  lSamples = []\n  transformMs.value = 0\n  layoutMs.value = 0\n}\n\nfunction toggle() {\n  running.value = !running.value\n  if (running.value) {\n    resetAnim()\n    rafId = requestAnimationFrame(tick)\n  } else {\n    cancelAnimationFrame(rafId)\n  }\n}\n\nfunction reset() {\n  running.value = false\n  cancelAnimationFrame(rafId)\n  resetAnim()\n}\n\nonUnmounted(() => cancelAnimationFrame(rafId))\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.wrap {\n  padding: 20px;\n  font-family: system-ui, sans-serif;\n}\n\n.tip {\n  margin: 0 0 14px;\n  color: #64748b;\n  font-size: 0.85rem;\n  line-height: 1.55;\n}\n\n.tip code {\n  font-size: 0.8em;\n  padding: 1px 4px;\n  border-radius: 4px;\n  background: #e2e8f0;\n}\n\n.compare {\n  display: grid;\n  gap: 12px;\n}\n\n@media (min-width: 520px) {\n  .compare {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n.col {\n  padding: 10px;\n  border-radius: 10px;\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n}\n\n.col-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 8px;\n  gap: 6px;\n}\n\n.tag {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 999px;\n}\n\n.tag.good {\n  background: #dcfce7;\n  color: #166534;\n}\n\n.tag.warn {\n  background: #fef3c7;\n  color: #92400e;\n}\n\n.metric {\n  font-size: 11px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: #166534;\n}\n\n.metric.warn-m {\n  color: #b45309;\n}\n\n.track {\n  position: relative;\n  height: 44px;\n  border-radius: 8px;\n  background: #e2e8f0;\n  overflow: hidden;\n}\n\n.ball {\n  position: absolute;\n  top: 10px;\n  left: 0;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #6366f1;\n  will-change: transform, left;\n}\n\n.note {\n  margin: 8px 0 0;\n  font-size: 11px;\n  color: #94a3b8;\n}\n\n.actions {\n  display: flex;\n  gap: 8px;\n  margin-top: 14px;\n}\n\n.btn {\n  padding: 8px 16px;\n  border: none;\n  border-radius: 8px;\n  background: #6366f1;\n  color: white;\n  font-weight: 600;\n  cursor: pointer;\n  font-size: 13px;\n}\n\n.btn.active {\n  background: #4f46e5;\n}\n\n.btn.ghost {\n  background: #e2e8f0;\n  color: #334155;\n}\n\u003C\u002Fstyle>\n","vue",[82,370,371,383,401,417,432,447,457,464,480,496,513,535,556,566,582,610,619,640,650,655,670,685,705,726,735,750,782,791,811,820,829,834,850,883,889,898,926,935,945,955,960,973,988,993,1012,1031,1049,1067,1086,1091,1105,1117,1130,1142,1147,1165,1185,1211,1242,1247,1265,1276,1298,1310,1335,1403,1408,1422,1439,1451,1460,1469,1477,1490,1496,1517,1528,1549,1609,1614,1622,1636,1641,1647,1653,1658,1669,1679,1688,1698,1708,1717,1727,1732,1737,1747,1761,1768,1776,1788,1799,1808,1814,1819,1824,1834,1844,1852,1860,1865,1870,1886,1895,1900,1913,1921,1939,1957,1962,1967,1975,1995,2008,2024,2037,2042,2047,2057,2072,2091,2106,2119,2124,2129,2137,2150,2165,2170,2175,2195,2203,2223,2228,2233,2238,2246,2260,2273,2285,2305,2310,2315,2323,2335,2348,2361,2376,2390,2395,2400,2408,2422,2435,2454,2468,2473,2478,2486,2498,2510,2515,2520,2528,2540,2552,2557,2562,2570,2583,2594,2607,2618,2623,2628,2636,2648,2653,2658,2666,2679,2694,2707,2718,2731,2736,2741,2749,2761,2775,2787,2802,2815,2830,2842,2855,2860,2865,2873,2890,2903,2915,2920,2925,2933,2944,2957,2972,2977,2982,2990,3008,3020,3033,3044,3056,3067,3080,3094,3099,3104,3112,3124,3129,3134,3142,3153,3165,3170],{"__ignoreMap":109},[113,372,373,376,380],{"class":115,"line":116},[113,374,375],{"class":130},"\u003C",[113,377,379],{"class":378},"s9eBZ","template",[113,381,382],{"class":130},">\n",[113,384,385,388,391,394,396,399],{"class":115,"line":148},[113,386,387],{"class":130},"  \u003C",[113,389,390],{"class":378},"div",[113,392,393],{"class":134}," class",[113,395,154],{"class":130},[113,397,398],{"class":141},"\"wrap\"",[113,400,382],{"class":130},[113,402,403,406,408,410,412,415],{"class":115,"line":160},[113,404,405],{"class":130},"    \u003C",[113,407,14],{"class":378},[113,409,393],{"class":134},[113,411,154],{"class":130},[113,413,414],{"class":141},"\"tip\"",[113,416,382],{"class":130},[113,418,419,422,424,427,429],{"class":115,"line":167},[113,420,421],{"class":130},"      点「开始动画」：两球同步往复移动。左边 \u003C",[113,423,82],{"class":378},[113,425,426],{"class":130},">transform: translateX\u003C\u002F",[113,428,82],{"class":378},[113,430,431],{"class":130},">，右边\n",[113,433,434,437,439,442,444],{"class":115,"line":179},[113,435,436],{"class":130},"      \u003C",[113,438,82],{"class":378},[113,440,441],{"class":130},">left\u003C\u002F",[113,443,82],{"class":378},[113,445,446],{"class":130},">。画面应一致；右轨每帧触发布局，主线程更忙时可能更卡。\n",[113,448,450,453,455],{"class":115,"line":449},6,[113,451,452],{"class":130},"    \u003C\u002F",[113,454,14],{"class":378},[113,456,382],{"class":130},[113,458,460],{"class":115,"line":459},7,[113,461,463],{"emptyLinePlaceholder":462},true,"\n",[113,465,467,469,471,473,475,478],{"class":115,"line":466},8,[113,468,405],{"class":130},[113,470,390],{"class":378},[113,472,393],{"class":134},[113,474,154],{"class":130},[113,476,477],{"class":141},"\"compare\"",[113,479,382],{"class":130},[113,481,483,485,487,489,491,494],{"class":115,"line":482},9,[113,484,436],{"class":130},[113,486,390],{"class":378},[113,488,393],{"class":134},[113,490,154],{"class":130},[113,492,493],{"class":141},"\"col\"",[113,495,382],{"class":130},[113,497,499,502,504,506,508,511],{"class":115,"line":498},10,[113,500,501],{"class":130},"        \u003C",[113,503,390],{"class":378},[113,505,393],{"class":134},[113,507,154],{"class":130},[113,509,510],{"class":141},"\"col-head\"",[113,512,382],{"class":130},[113,514,516,519,521,523,525,528,531,533],{"class":115,"line":515},11,[113,517,518],{"class":130},"          \u003C",[113,520,113],{"class":378},[113,522,393],{"class":134},[113,524,154],{"class":130},[113,526,527],{"class":141},"\"tag good\"",[113,529,530],{"class":130},">transform\u003C\u002F",[113,532,113],{"class":378},[113,534,382],{"class":130},[113,536,538,540,542,544,546,549,552,554],{"class":115,"line":537},12,[113,539,518],{"class":130},[113,541,113],{"class":378},[113,543,393],{"class":134},[113,545,154],{"class":130},[113,547,548],{"class":141},"\"metric\"",[113,550,551],{"class":130},">本帧 ≈ {{ transformMs }}ms\u003C\u002F",[113,553,113],{"class":378},[113,555,382],{"class":130},[113,557,559,562,564],{"class":115,"line":558},13,[113,560,561],{"class":130},"        \u003C\u002F",[113,563,390],{"class":378},[113,565,382],{"class":130},[113,567,569,571,573,575,577,580],{"class":115,"line":568},14,[113,570,501],{"class":130},[113,572,390],{"class":378},[113,574,393],{"class":134},[113,576,154],{"class":130},[113,578,579],{"class":141},"\"track\"",[113,581,382],{"class":130},[113,583,585,587,589,591,593,596,599,601,604,608],{"class":115,"line":584},15,[113,586,518],{"class":130},[113,588,390],{"class":378},[113,590,393],{"class":134},[113,592,154],{"class":130},[113,594,595],{"class":141},"\"ball\"",[113,597,598],{"class":134}," :style",[113,600,154],{"class":130},[113,602,603],{"class":141},"\"{ transform: `translateX(${x}px)` }\"",[113,605,607],{"class":606},"s7hpK"," \u002F",[113,609,382],{"class":130},[113,611,613,615,617],{"class":115,"line":612},16,[113,614,561],{"class":130},[113,616,390],{"class":378},[113,618,382],{"class":130},[113,620,622,624,626,628,630,633,636,638],{"class":115,"line":621},17,[113,623,501],{"class":130},[113,625,14],{"class":378},[113,627,393],{"class":134},[113,629,154],{"class":130},[113,631,632],{"class":141},"\"note\"",[113,634,635],{"class":130},">合成阶段位移，不改布局树\u003C\u002F",[113,637,14],{"class":378},[113,639,382],{"class":130},[113,641,643,646,648],{"class":115,"line":642},18,[113,644,645],{"class":130},"      \u003C\u002F",[113,647,390],{"class":378},[113,649,382],{"class":130},[113,651,653],{"class":115,"line":652},19,[113,654,463],{"emptyLinePlaceholder":462},[113,656,658,660,662,664,666,668],{"class":115,"line":657},20,[113,659,436],{"class":130},[113,661,390],{"class":378},[113,663,393],{"class":134},[113,665,154],{"class":130},[113,667,493],{"class":141},[113,669,382],{"class":130},[113,671,673,675,677,679,681,683],{"class":115,"line":672},21,[113,674,501],{"class":130},[113,676,390],{"class":378},[113,678,393],{"class":134},[113,680,154],{"class":130},[113,682,510],{"class":141},[113,684,382],{"class":130},[113,686,688,690,692,694,696,699,701,703],{"class":115,"line":687},22,[113,689,518],{"class":130},[113,691,113],{"class":378},[113,693,393],{"class":134},[113,695,154],{"class":130},[113,697,698],{"class":141},"\"tag warn\"",[113,700,441],{"class":130},[113,702,113],{"class":378},[113,704,382],{"class":130},[113,706,708,710,712,714,716,719,722,724],{"class":115,"line":707},23,[113,709,518],{"class":130},[113,711,113],{"class":378},[113,713,393],{"class":134},[113,715,154],{"class":130},[113,717,718],{"class":141},"\"metric warn-m\"",[113,720,721],{"class":130},">{{ layoutMs }}ms\u003C\u002F",[113,723,113],{"class":378},[113,725,382],{"class":130},[113,727,729,731,733],{"class":115,"line":728},24,[113,730,561],{"class":130},[113,732,390],{"class":378},[113,734,382],{"class":130},[113,736,738,740,742,744,746,748],{"class":115,"line":737},25,[113,739,501],{"class":130},[113,741,390],{"class":378},[113,743,393],{"class":134},[113,745,154],{"class":130},[113,747,579],{"class":141},[113,749,382],{"class":130},[113,751,753,755,757,760,762,765,767,769,771,773,775,778,780],{"class":115,"line":752},26,[113,754,518],{"class":130},[113,756,390],{"class":378},[113,758,759],{"class":134}," ref",[113,761,154],{"class":130},[113,763,764],{"class":141},"\"leftBall\"",[113,766,393],{"class":134},[113,768,154],{"class":130},[113,770,595],{"class":141},[113,772,598],{"class":134},[113,774,154],{"class":130},[113,776,777],{"class":141},"\"{ left: `${x}px` }\"",[113,779,607],{"class":606},[113,781,382],{"class":130},[113,783,785,787,789],{"class":115,"line":784},27,[113,786,561],{"class":130},[113,788,390],{"class":378},[113,790,382],{"class":130},[113,792,794,796,798,800,802,804,807,809],{"class":115,"line":793},28,[113,795,501],{"class":130},[113,797,14],{"class":378},[113,799,393],{"class":134},[113,801,154],{"class":130},[113,803,632],{"class":141},[113,805,806],{"class":130},">每帧改几何位置 → Layout\u003C\u002F",[113,808,14],{"class":378},[113,810,382],{"class":130},[113,812,814,816,818],{"class":115,"line":813},29,[113,815,645],{"class":130},[113,817,390],{"class":378},[113,819,382],{"class":130},[113,821,823,825,827],{"class":115,"line":822},30,[113,824,452],{"class":130},[113,826,390],{"class":378},[113,828,382],{"class":130},[113,830,832],{"class":115,"line":831},31,[113,833,463],{"emptyLinePlaceholder":462},[113,835,837,839,841,843,845,848],{"class":115,"line":836},32,[113,838,405],{"class":130},[113,840,390],{"class":378},[113,842,393],{"class":134},[113,844,154],{"class":130},[113,846,847],{"class":141},"\"actions\"",[113,849,382],{"class":130},[113,851,853,855,858,860,862,865,868,870,873,876,878,881],{"class":115,"line":852},33,[113,854,436],{"class":130},[113,856,857],{"class":378},"button",[113,859,393],{"class":134},[113,861,154],{"class":130},[113,863,864],{"class":141},"\"btn\"",[113,866,867],{"class":134}," :class",[113,869,154],{"class":130},[113,871,872],{"class":141},"\"{ active: running }\"",[113,874,875],{"class":134}," @click",[113,877,154],{"class":130},[113,879,880],{"class":141},"\"toggle\"",[113,882,382],{"class":130},[113,884,886],{"class":115,"line":885},34,[113,887,888],{"class":130},"        {{ running ? '停止动画' : '开始动画' }}\n",[113,890,892,894,896],{"class":115,"line":891},35,[113,893,645],{"class":130},[113,895,857],{"class":378},[113,897,382],{"class":130},[113,899,901,903,905,907,909,912,914,916,919,922,924],{"class":115,"line":900},36,[113,902,436],{"class":130},[113,904,857],{"class":378},[113,906,393],{"class":134},[113,908,154],{"class":130},[113,910,911],{"class":141},"\"btn ghost\"",[113,913,875],{"class":134},[113,915,154],{"class":130},[113,917,918],{"class":141},"\"reset\"",[113,920,921],{"class":130},">复位\u003C\u002F",[113,923,857],{"class":378},[113,925,382],{"class":130},[113,927,929,931,933],{"class":115,"line":928},37,[113,930,452],{"class":130},[113,932,390],{"class":378},[113,934,382],{"class":130},[113,936,938,941,943],{"class":115,"line":937},38,[113,939,940],{"class":130},"  \u003C\u002F",[113,942,390],{"class":378},[113,944,382],{"class":130},[113,946,948,951,953],{"class":115,"line":947},39,[113,949,950],{"class":130},"\u003C\u002F",[113,952,379],{"class":378},[113,954,382],{"class":130},[113,956,958],{"class":115,"line":957},40,[113,959,463],{"emptyLinePlaceholder":462},[113,961,963,965,968,971],{"class":115,"line":962},41,[113,964,375],{"class":130},[113,966,967],{"class":378},"script",[113,969,970],{"class":134}," setup",[113,972,382],{"class":130},[113,974,976,979,982,985],{"class":115,"line":975},42,[113,977,978],{"class":119},"import",[113,980,981],{"class":130}," { nextTick, onUnmounted, ref } ",[113,983,984],{"class":119},"from",[113,986,987],{"class":141}," 'vue'\n",[113,989,991],{"class":115,"line":990},43,[113,992,463],{"emptyLinePlaceholder":462},[113,994,996,998,1001,1003,1005,1007,1010],{"class":115,"line":995},44,[113,997,120],{"class":119},[113,999,1000],{"class":123}," running",[113,1002,127],{"class":119},[113,1004,759],{"class":134},[113,1006,138],{"class":130},[113,1008,1009],{"class":123},"false",[113,1011,145],{"class":130},[113,1013,1015,1017,1020,1022,1024,1026,1029],{"class":115,"line":1014},45,[113,1016,120],{"class":119},[113,1018,1019],{"class":123}," x",[113,1021,127],{"class":119},[113,1023,759],{"class":134},[113,1025,138],{"class":130},[113,1027,1028],{"class":123},"0",[113,1030,145],{"class":130},[113,1032,1034,1036,1039,1041,1043,1045,1047],{"class":115,"line":1033},46,[113,1035,120],{"class":119},[113,1037,1038],{"class":123}," transformMs",[113,1040,127],{"class":119},[113,1042,759],{"class":134},[113,1044,138],{"class":130},[113,1046,1028],{"class":123},[113,1048,145],{"class":130},[113,1050,1052,1054,1057,1059,1061,1063,1065],{"class":115,"line":1051},47,[113,1053,120],{"class":119},[113,1055,1056],{"class":123}," layoutMs",[113,1058,127],{"class":119},[113,1060,759],{"class":134},[113,1062,138],{"class":130},[113,1064,1028],{"class":123},[113,1066,145],{"class":130},[113,1068,1070,1072,1075,1077,1079,1081,1084],{"class":115,"line":1069},48,[113,1071,120],{"class":119},[113,1073,1074],{"class":123}," leftBall",[113,1076,127],{"class":119},[113,1078,759],{"class":134},[113,1080,138],{"class":130},[113,1082,1083],{"class":123},"null",[113,1085,145],{"class":130},[113,1087,1089],{"class":115,"line":1088},49,[113,1090,463],{"emptyLinePlaceholder":462},[113,1092,1094,1097,1100,1102],{"class":115,"line":1093},50,[113,1095,1096],{"class":119},"let",[113,1098,1099],{"class":130}," rafId ",[113,1101,154],{"class":119},[113,1103,1104],{"class":123}," 0\n",[113,1106,1108,1110,1113,1115],{"class":115,"line":1107},51,[113,1109,1096],{"class":119},[113,1111,1112],{"class":130}," start ",[113,1114,154],{"class":119},[113,1116,1104],{"class":123},[113,1118,1120,1122,1125,1127],{"class":115,"line":1119},52,[113,1121,1096],{"class":119},[113,1123,1124],{"class":130}," tSamples ",[113,1126,154],{"class":119},[113,1128,1129],{"class":130}," []\n",[113,1131,1133,1135,1138,1140],{"class":115,"line":1132},53,[113,1134,1096],{"class":119},[113,1136,1137],{"class":130}," lSamples ",[113,1139,154],{"class":119},[113,1141,1129],{"class":130},[113,1143,1145],{"class":115,"line":1144},54,[113,1146,463],{"emptyLinePlaceholder":462},[113,1148,1150,1153,1156,1158,1162],{"class":115,"line":1149},55,[113,1151,1152],{"class":119},"function",[113,1154,1155],{"class":134}," tick",[113,1157,138],{"class":130},[113,1159,1161],{"class":1160},"s4XuR","now",[113,1163,1164],{"class":130},") {\n",[113,1166,1168,1171,1174,1177,1180,1182],{"class":115,"line":1167},56,[113,1169,1170],{"class":119},"  if",[113,1172,1173],{"class":130}," (",[113,1175,1176],{"class":119},"!",[113,1178,1179],{"class":130},"start) start ",[113,1181,154],{"class":119},[113,1183,1184],{"class":130}," now\n",[113,1186,1188,1191,1194,1196,1199,1202,1205,1208],{"class":115,"line":1187},57,[113,1189,1190],{"class":119},"  const",[113,1192,1193],{"class":123}," phase",[113,1195,127],{"class":119},[113,1197,1198],{"class":130}," (now ",[113,1200,1201],{"class":119},"-",[113,1203,1204],{"class":130}," start) ",[113,1206,1207],{"class":119},"\u002F",[113,1209,1210],{"class":123}," 420\n",[113,1212,1214,1216,1219,1221,1224,1227,1230,1233,1236,1239],{"class":115,"line":1213},58,[113,1215,1190],{"class":119},[113,1217,1218],{"class":123}," value",[113,1220,127],{"class":119},[113,1222,1223],{"class":130}," Math.",[113,1225,1226],{"class":134},"sin",[113,1228,1229],{"class":130},"(phase) ",[113,1231,1232],{"class":119},"*",[113,1234,1235],{"class":123}," 100",[113,1237,1238],{"class":119}," +",[113,1240,1241],{"class":123}," 100\n",[113,1243,1245],{"class":115,"line":1244},59,[113,1246,463],{"emptyLinePlaceholder":462},[113,1248,1250,1252,1255,1257,1260,1262],{"class":115,"line":1249},60,[113,1251,1190],{"class":119},[113,1253,1254],{"class":123}," t0",[113,1256,127],{"class":119},[113,1258,1259],{"class":130}," performance.",[113,1261,1161],{"class":134},[113,1263,1264],{"class":130},"()\n",[113,1266,1268,1271,1273],{"class":115,"line":1267},61,[113,1269,1270],{"class":130},"  x.value ",[113,1272,154],{"class":119},[113,1274,1275],{"class":130}," value\n",[113,1277,1279,1281,1284,1286,1288,1290,1293,1295],{"class":115,"line":1278},62,[113,1280,1190],{"class":119},[113,1282,1283],{"class":123}," tCost",[113,1285,127],{"class":119},[113,1287,1259],{"class":130},[113,1289,1161],{"class":134},[113,1291,1292],{"class":130},"() ",[113,1294,1201],{"class":119},[113,1296,1297],{"class":130}," t0\n",[113,1299,1301,1304,1307],{"class":115,"line":1300},63,[113,1302,1303],{"class":130},"  tSamples.",[113,1305,1306],{"class":134},"push",[113,1308,1309],{"class":130},"(tCost)\n",[113,1311,1313,1315,1318,1321,1324,1327,1330,1333],{"class":115,"line":1312},64,[113,1314,1170],{"class":119},[113,1316,1317],{"class":130}," (tSamples.",[113,1319,1320],{"class":123},"length",[113,1322,1323],{"class":119}," >",[113,1325,1326],{"class":123}," 20",[113,1328,1329],{"class":130},") tSamples.",[113,1331,1332],{"class":134},"shift",[113,1334,1264],{"class":130},[113,1336,1338,1341,1343,1345,1348,1351,1354,1357,1359,1362,1365,1368,1371,1374,1377,1380,1382,1384,1386,1389,1391,1393,1395,1397,1399,1401],{"class":115,"line":1337},65,[113,1339,1340],{"class":130},"  transformMs.value ",[113,1342,154],{"class":119},[113,1344,1223],{"class":130},[113,1346,1347],{"class":134},"round",[113,1349,1350],{"class":130},"((tSamples.",[113,1352,1353],{"class":134},"reduce",[113,1355,1356],{"class":130},"((",[113,1358,18],{"class":1160},[113,1360,1361],{"class":130},", ",[113,1363,1364],{"class":1160},"b",[113,1366,1367],{"class":130},") ",[113,1369,1370],{"class":119},"=>",[113,1372,1373],{"class":130}," a ",[113,1375,1376],{"class":119},"+",[113,1378,1379],{"class":130}," b, ",[113,1381,1028],{"class":123},[113,1383,1367],{"class":130},[113,1385,1207],{"class":119},[113,1387,1388],{"class":130}," tSamples.",[113,1390,1320],{"class":123},[113,1392,1367],{"class":130},[113,1394,1232],{"class":119},[113,1396,1235],{"class":123},[113,1398,1367],{"class":130},[113,1400,1207],{"class":119},[113,1402,1241],{"class":123},[113,1404,1406],{"class":115,"line":1405},66,[113,1407,463],{"emptyLinePlaceholder":462},[113,1409,1411,1414,1417,1419],{"class":115,"line":1410},67,[113,1412,1413],{"class":134},"  nextTick",[113,1415,1416],{"class":130},"(() ",[113,1418,1370],{"class":119},[113,1420,1421],{"class":130}," {\n",[113,1423,1425,1428,1431,1433,1435,1437],{"class":115,"line":1424},68,[113,1426,1427],{"class":119},"    const",[113,1429,1430],{"class":123}," l0",[113,1432,127],{"class":119},[113,1434,1259],{"class":130},[113,1436,1161],{"class":134},[113,1438,1264],{"class":130},[113,1440,1442,1444,1446,1448],{"class":115,"line":1441},69,[113,1443,1427],{"class":119},[113,1445,124],{"class":123},[113,1447,127],{"class":119},[113,1449,1450],{"class":130}," leftBall.value\n",[113,1452,1454,1457],{"class":115,"line":1453},70,[113,1455,1456],{"class":119},"    if",[113,1458,1459],{"class":130}," (el) {\n",[113,1461,1463,1466],{"class":115,"line":1462},71,[113,1464,1465],{"class":119},"      void",[113,1467,1468],{"class":130}," el.offsetLeft\n",[113,1470,1472,1474],{"class":115,"line":1471},72,[113,1473,1465],{"class":119},[113,1475,1476],{"class":130}," el.offsetWidth\n",[113,1478,1480,1482,1485,1488],{"class":115,"line":1479},73,[113,1481,1465],{"class":119},[113,1483,1484],{"class":130}," el.",[113,1486,1487],{"class":134},"getBoundingClientRect",[113,1489,1264],{"class":130},[113,1491,1493],{"class":115,"line":1492},74,[113,1494,1495],{"class":130},"    }\n",[113,1497,1499,1501,1504,1506,1508,1510,1512,1514],{"class":115,"line":1498},75,[113,1500,1427],{"class":119},[113,1502,1503],{"class":123}," lCost",[113,1505,127],{"class":119},[113,1507,1259],{"class":130},[113,1509,1161],{"class":134},[113,1511,1292],{"class":130},[113,1513,1201],{"class":119},[113,1515,1516],{"class":130}," l0\n",[113,1518,1520,1523,1525],{"class":115,"line":1519},76,[113,1521,1522],{"class":130},"    lSamples.",[113,1524,1306],{"class":134},[113,1526,1527],{"class":130},"(lCost)\n",[113,1529,1531,1533,1536,1538,1540,1542,1545,1547],{"class":115,"line":1530},77,[113,1532,1456],{"class":119},[113,1534,1535],{"class":130}," (lSamples.",[113,1537,1320],{"class":123},[113,1539,1323],{"class":119},[113,1541,1326],{"class":123},[113,1543,1544],{"class":130},") lSamples.",[113,1546,1332],{"class":134},[113,1548,1264],{"class":130},[113,1550,1552,1555,1557,1559,1561,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586,1588,1590,1593,1595,1597,1599,1602,1604,1606],{"class":115,"line":1551},78,[113,1553,1554],{"class":130},"    layoutMs.value ",[113,1556,154],{"class":119},[113,1558,1223],{"class":130},[113,1560,1347],{"class":134},[113,1562,1563],{"class":130},"((lSamples.",[113,1565,1353],{"class":134},[113,1567,1356],{"class":130},[113,1569,18],{"class":1160},[113,1571,1361],{"class":130},[113,1573,1364],{"class":1160},[113,1575,1367],{"class":130},[113,1577,1370],{"class":119},[113,1579,1373],{"class":130},[113,1581,1376],{"class":119},[113,1583,1379],{"class":130},[113,1585,1028],{"class":123},[113,1587,1367],{"class":130},[113,1589,1207],{"class":119},[113,1591,1592],{"class":130}," lSamples.",[113,1594,1320],{"class":123},[113,1596,1367],{"class":130},[113,1598,1232],{"class":119},[113,1600,1601],{"class":123}," 10",[113,1603,1367],{"class":130},[113,1605,1207],{"class":119},[113,1607,1608],{"class":123}," 10\n",[113,1610,1612],{"class":115,"line":1611},79,[113,1613,463],{"emptyLinePlaceholder":462},[113,1615,1617,1619],{"class":115,"line":1616},80,[113,1618,1456],{"class":119},[113,1620,1621],{"class":130}," (running.value) {\n",[113,1623,1625,1628,1630,1633],{"class":115,"line":1624},81,[113,1626,1627],{"class":130},"      rafId ",[113,1629,154],{"class":119},[113,1631,1632],{"class":134}," requestAnimationFrame",[113,1634,1635],{"class":130},"(tick)\n",[113,1637,1639],{"class":115,"line":1638},82,[113,1640,1495],{"class":130},[113,1642,1644],{"class":115,"line":1643},83,[113,1645,1646],{"class":130},"  })\n",[113,1648,1650],{"class":115,"line":1649},84,[113,1651,1652],{"class":130},"}\n",[113,1654,1656],{"class":115,"line":1655},85,[113,1657,463],{"emptyLinePlaceholder":462},[113,1659,1661,1663,1666],{"class":115,"line":1660},86,[113,1662,1152],{"class":119},[113,1664,1665],{"class":134}," resetAnim",[113,1667,1668],{"class":130},"() {\n",[113,1670,1672,1675,1677],{"class":115,"line":1671},87,[113,1673,1674],{"class":130},"  start ",[113,1676,154],{"class":119},[113,1678,1104],{"class":123},[113,1680,1682,1684,1686],{"class":115,"line":1681},88,[113,1683,1270],{"class":130},[113,1685,154],{"class":119},[113,1687,1104],{"class":123},[113,1689,1691,1694,1696],{"class":115,"line":1690},89,[113,1692,1693],{"class":130},"  tSamples ",[113,1695,154],{"class":119},[113,1697,1129],{"class":130},[113,1699,1701,1704,1706],{"class":115,"line":1700},90,[113,1702,1703],{"class":130},"  lSamples ",[113,1705,154],{"class":119},[113,1707,1129],{"class":130},[113,1709,1711,1713,1715],{"class":115,"line":1710},91,[113,1712,1340],{"class":130},[113,1714,154],{"class":119},[113,1716,1104],{"class":123},[113,1718,1720,1723,1725],{"class":115,"line":1719},92,[113,1721,1722],{"class":130},"  layoutMs.value ",[113,1724,154],{"class":119},[113,1726,1104],{"class":123},[113,1728,1730],{"class":115,"line":1729},93,[113,1731,1652],{"class":130},[113,1733,1735],{"class":115,"line":1734},94,[113,1736,463],{"emptyLinePlaceholder":462},[113,1738,1740,1742,1745],{"class":115,"line":1739},95,[113,1741,1152],{"class":119},[113,1743,1744],{"class":134}," toggle",[113,1746,1668],{"class":130},[113,1748,1750,1753,1755,1758],{"class":115,"line":1749},96,[113,1751,1752],{"class":130},"  running.value ",[113,1754,154],{"class":119},[113,1756,1757],{"class":119}," !",[113,1759,1760],{"class":130},"running.value\n",[113,1762,1764,1766],{"class":115,"line":1763},97,[113,1765,1170],{"class":119},[113,1767,1621],{"class":130},[113,1769,1771,1774],{"class":115,"line":1770},98,[113,1772,1773],{"class":134},"    resetAnim",[113,1775,1264],{"class":130},[113,1777,1779,1782,1784,1786],{"class":115,"line":1778},99,[113,1780,1781],{"class":130},"    rafId ",[113,1783,154],{"class":119},[113,1785,1632],{"class":134},[113,1787,1635],{"class":130},[113,1789,1791,1794,1797],{"class":115,"line":1790},100,[113,1792,1793],{"class":130},"  } ",[113,1795,1796],{"class":119},"else",[113,1798,1421],{"class":130},[113,1800,1802,1805],{"class":115,"line":1801},101,[113,1803,1804],{"class":134},"    cancelAnimationFrame",[113,1806,1807],{"class":130},"(rafId)\n",[113,1809,1811],{"class":115,"line":1810},102,[113,1812,1813],{"class":130},"  }\n",[113,1815,1817],{"class":115,"line":1816},103,[113,1818,1652],{"class":130},[113,1820,1822],{"class":115,"line":1821},104,[113,1823,463],{"emptyLinePlaceholder":462},[113,1825,1827,1829,1832],{"class":115,"line":1826},105,[113,1828,1152],{"class":119},[113,1830,1831],{"class":134}," reset",[113,1833,1668],{"class":130},[113,1835,1837,1839,1841],{"class":115,"line":1836},106,[113,1838,1752],{"class":130},[113,1840,154],{"class":119},[113,1842,1843],{"class":123}," false\n",[113,1845,1847,1850],{"class":115,"line":1846},107,[113,1848,1849],{"class":134},"  cancelAnimationFrame",[113,1851,1807],{"class":130},[113,1853,1855,1858],{"class":115,"line":1854},108,[113,1856,1857],{"class":134},"  resetAnim",[113,1859,1264],{"class":130},[113,1861,1863],{"class":115,"line":1862},109,[113,1864,1652],{"class":130},[113,1866,1868],{"class":115,"line":1867},110,[113,1869,463],{"emptyLinePlaceholder":462},[113,1871,1873,1876,1878,1880,1883],{"class":115,"line":1872},111,[113,1874,1875],{"class":134},"onUnmounted",[113,1877,1416],{"class":130},[113,1879,1370],{"class":119},[113,1881,1882],{"class":134}," cancelAnimationFrame",[113,1884,1885],{"class":130},"(rafId))\n",[113,1887,1889,1891,1893],{"class":115,"line":1888},112,[113,1890,950],{"class":130},[113,1892,967],{"class":378},[113,1894,382],{"class":130},[113,1896,1898],{"class":115,"line":1897},113,[113,1899,463],{"emptyLinePlaceholder":462},[113,1901,1903,1905,1908,1911],{"class":115,"line":1902},114,[113,1904,375],{"class":130},[113,1906,1907],{"class":378},"style",[113,1909,1910],{"class":134}," scoped",[113,1912,382],{"class":130},[113,1914,1916,1919],{"class":115,"line":1915},115,[113,1917,1918],{"class":134},".wrap",[113,1920,1421],{"class":130},[113,1922,1924,1927,1930,1933,1936],{"class":115,"line":1923},116,[113,1925,1926],{"class":123},"  padding",[113,1928,1929],{"class":130},": ",[113,1931,1932],{"class":123},"20",[113,1934,1935],{"class":119},"px",[113,1937,1938],{"class":130},";\n",[113,1940,1942,1945,1947,1950,1952,1955],{"class":115,"line":1941},117,[113,1943,1944],{"class":123},"  font-family",[113,1946,1929],{"class":130},[113,1948,1949],{"class":123},"system-ui",[113,1951,1361],{"class":130},[113,1953,1954],{"class":123},"sans-serif",[113,1956,1938],{"class":130},[113,1958,1960],{"class":115,"line":1959},118,[113,1961,1652],{"class":130},[113,1963,1965],{"class":115,"line":1964},119,[113,1966,463],{"emptyLinePlaceholder":462},[113,1968,1970,1973],{"class":115,"line":1969},120,[113,1971,1972],{"class":134},".tip",[113,1974,1421],{"class":130},[113,1976,1978,1981,1983,1985,1988,1991,1993],{"class":115,"line":1977},121,[113,1979,1980],{"class":123},"  margin",[113,1982,1929],{"class":130},[113,1984,1028],{"class":123},[113,1986,1987],{"class":123}," 0",[113,1989,1990],{"class":123}," 14",[113,1992,1935],{"class":119},[113,1994,1938],{"class":130},[113,1996,1998,2001,2003,2006],{"class":115,"line":1997},122,[113,1999,2000],{"class":123},"  color",[113,2002,1929],{"class":130},[113,2004,2005],{"class":123},"#64748b",[113,2007,1938],{"class":130},[113,2009,2011,2014,2016,2019,2022],{"class":115,"line":2010},123,[113,2012,2013],{"class":123},"  font-size",[113,2015,1929],{"class":130},[113,2017,2018],{"class":123},"0.85",[113,2020,2021],{"class":119},"rem",[113,2023,1938],{"class":130},[113,2025,2027,2030,2032,2035],{"class":115,"line":2026},124,[113,2028,2029],{"class":123},"  line-height",[113,2031,1929],{"class":130},[113,2033,2034],{"class":123},"1.55",[113,2036,1938],{"class":130},[113,2038,2040],{"class":115,"line":2039},125,[113,2041,1652],{"class":130},[113,2043,2045],{"class":115,"line":2044},126,[113,2046,463],{"emptyLinePlaceholder":462},[113,2048,2050,2052,2055],{"class":115,"line":2049},127,[113,2051,1972],{"class":134},[113,2053,2054],{"class":378}," code",[113,2056,1421],{"class":130},[113,2058,2060,2062,2064,2067,2070],{"class":115,"line":2059},128,[113,2061,2013],{"class":123},[113,2063,1929],{"class":130},[113,2065,2066],{"class":123},"0.8",[113,2068,2069],{"class":119},"em",[113,2071,1938],{"class":130},[113,2073,2075,2077,2079,2082,2084,2087,2089],{"class":115,"line":2074},129,[113,2076,1926],{"class":123},[113,2078,1929],{"class":130},[113,2080,2081],{"class":123},"1",[113,2083,1935],{"class":119},[113,2085,2086],{"class":123}," 4",[113,2088,1935],{"class":119},[113,2090,1938],{"class":130},[113,2092,2094,2097,2099,2102,2104],{"class":115,"line":2093},130,[113,2095,2096],{"class":123},"  border-radius",[113,2098,1929],{"class":130},[113,2100,2101],{"class":123},"4",[113,2103,1935],{"class":119},[113,2105,1938],{"class":130},[113,2107,2109,2112,2114,2117],{"class":115,"line":2108},131,[113,2110,2111],{"class":123},"  background",[113,2113,1929],{"class":130},[113,2115,2116],{"class":123},"#e2e8f0",[113,2118,1938],{"class":130},[113,2120,2122],{"class":115,"line":2121},132,[113,2123,1652],{"class":130},[113,2125,2127],{"class":115,"line":2126},133,[113,2128,463],{"emptyLinePlaceholder":462},[113,2130,2132,2135],{"class":115,"line":2131},134,[113,2133,2134],{"class":134},".compare",[113,2136,1421],{"class":130},[113,2138,2140,2143,2145,2148],{"class":115,"line":2139},135,[113,2141,2142],{"class":123},"  display",[113,2144,1929],{"class":130},[113,2146,2147],{"class":123},"grid",[113,2149,1938],{"class":130},[113,2151,2153,2156,2158,2161,2163],{"class":115,"line":2152},136,[113,2154,2155],{"class":123},"  gap",[113,2157,1929],{"class":130},[113,2159,2160],{"class":123},"12",[113,2162,1935],{"class":119},[113,2164,1938],{"class":130},[113,2166,2168],{"class":115,"line":2167},137,[113,2169,1652],{"class":130},[113,2171,2173],{"class":115,"line":2172},138,[113,2174,463],{"emptyLinePlaceholder":462},[113,2176,2178,2181,2183,2186,2188,2191,2193],{"class":115,"line":2177},139,[113,2179,2180],{"class":119},"@media",[113,2182,1173],{"class":130},[113,2184,2185],{"class":123},"min-width",[113,2187,1929],{"class":130},[113,2189,2190],{"class":123},"520",[113,2192,1935],{"class":119},[113,2194,1164],{"class":130},[113,2196,2198,2201],{"class":115,"line":2197},140,[113,2199,2200],{"class":134},"  .compare",[113,2202,1421],{"class":130},[113,2204,2206,2209,2211,2213,2216,2219,2221],{"class":115,"line":2205},141,[113,2207,2208],{"class":123},"    grid-template-columns",[113,2210,1929],{"class":130},[113,2212,2081],{"class":123},[113,2214,2215],{"class":119},"fr",[113,2217,2218],{"class":123}," 1",[113,2220,2215],{"class":119},[113,2222,1938],{"class":130},[113,2224,2226],{"class":115,"line":2225},142,[113,2227,1813],{"class":130},[113,2229,2231],{"class":115,"line":2230},143,[113,2232,1652],{"class":130},[113,2234,2236],{"class":115,"line":2235},144,[113,2237,463],{"emptyLinePlaceholder":462},[113,2239,2241,2244],{"class":115,"line":2240},145,[113,2242,2243],{"class":134},".col",[113,2245,1421],{"class":130},[113,2247,2249,2251,2253,2256,2258],{"class":115,"line":2248},146,[113,2250,1926],{"class":123},[113,2252,1929],{"class":130},[113,2254,2255],{"class":123},"10",[113,2257,1935],{"class":119},[113,2259,1938],{"class":130},[113,2261,2263,2265,2267,2269,2271],{"class":115,"line":2262},147,[113,2264,2096],{"class":123},[113,2266,1929],{"class":130},[113,2268,2255],{"class":123},[113,2270,1935],{"class":119},[113,2272,1938],{"class":130},[113,2274,2276,2278,2280,2283],{"class":115,"line":2275},148,[113,2277,2111],{"class":123},[113,2279,1929],{"class":130},[113,2281,2282],{"class":123},"#f8fafc",[113,2284,1938],{"class":130},[113,2286,2288,2291,2293,2295,2297,2300,2303],{"class":115,"line":2287},149,[113,2289,2290],{"class":123},"  border",[113,2292,1929],{"class":130},[113,2294,2081],{"class":123},[113,2296,1935],{"class":119},[113,2298,2299],{"class":123}," solid",[113,2301,2302],{"class":123}," #e2e8f0",[113,2304,1938],{"class":130},[113,2306,2308],{"class":115,"line":2307},150,[113,2309,1652],{"class":130},[113,2311,2313],{"class":115,"line":2312},151,[113,2314,463],{"emptyLinePlaceholder":462},[113,2316,2318,2321],{"class":115,"line":2317},152,[113,2319,2320],{"class":134},".col-head",[113,2322,1421],{"class":130},[113,2324,2326,2328,2330,2333],{"class":115,"line":2325},153,[113,2327,2142],{"class":123},[113,2329,1929],{"class":130},[113,2331,2332],{"class":123},"flex",[113,2334,1938],{"class":130},[113,2336,2338,2341,2343,2346],{"class":115,"line":2337},154,[113,2339,2340],{"class":123},"  align-items",[113,2342,1929],{"class":130},[113,2344,2345],{"class":123},"center",[113,2347,1938],{"class":130},[113,2349,2351,2354,2356,2359],{"class":115,"line":2350},155,[113,2352,2353],{"class":123},"  justify-content",[113,2355,1929],{"class":130},[113,2357,2358],{"class":123},"space-between",[113,2360,1938],{"class":130},[113,2362,2364,2367,2369,2372,2374],{"class":115,"line":2363},156,[113,2365,2366],{"class":123},"  margin-bottom",[113,2368,1929],{"class":130},[113,2370,2371],{"class":123},"8",[113,2373,1935],{"class":119},[113,2375,1938],{"class":130},[113,2377,2379,2381,2383,2386,2388],{"class":115,"line":2378},157,[113,2380,2155],{"class":123},[113,2382,1929],{"class":130},[113,2384,2385],{"class":123},"6",[113,2387,1935],{"class":119},[113,2389,1938],{"class":130},[113,2391,2393],{"class":115,"line":2392},158,[113,2394,1652],{"class":130},[113,2396,2398],{"class":115,"line":2397},159,[113,2399,463],{"emptyLinePlaceholder":462},[113,2401,2403,2406],{"class":115,"line":2402},160,[113,2404,2405],{"class":134},".tag",[113,2407,1421],{"class":130},[113,2409,2411,2413,2415,2418,2420],{"class":115,"line":2410},161,[113,2412,2013],{"class":123},[113,2414,1929],{"class":130},[113,2416,2417],{"class":123},"11",[113,2419,1935],{"class":119},[113,2421,1938],{"class":130},[113,2423,2425,2428,2430,2433],{"class":115,"line":2424},162,[113,2426,2427],{"class":123},"  font-weight",[113,2429,1929],{"class":130},[113,2431,2432],{"class":123},"600",[113,2434,1938],{"class":130},[113,2436,2438,2440,2442,2445,2447,2450,2452],{"class":115,"line":2437},163,[113,2439,1926],{"class":123},[113,2441,1929],{"class":130},[113,2443,2444],{"class":123},"2",[113,2446,1935],{"class":119},[113,2448,2449],{"class":123}," 8",[113,2451,1935],{"class":119},[113,2453,1938],{"class":130},[113,2455,2457,2459,2461,2464,2466],{"class":115,"line":2456},164,[113,2458,2096],{"class":123},[113,2460,1929],{"class":130},[113,2462,2463],{"class":123},"999",[113,2465,1935],{"class":119},[113,2467,1938],{"class":130},[113,2469,2471],{"class":115,"line":2470},165,[113,2472,1652],{"class":130},[113,2474,2476],{"class":115,"line":2475},166,[113,2477,463],{"emptyLinePlaceholder":462},[113,2479,2481,2484],{"class":115,"line":2480},167,[113,2482,2483],{"class":134},".tag.good",[113,2485,1421],{"class":130},[113,2487,2489,2491,2493,2496],{"class":115,"line":2488},168,[113,2490,2111],{"class":123},[113,2492,1929],{"class":130},[113,2494,2495],{"class":123},"#dcfce7",[113,2497,1938],{"class":130},[113,2499,2501,2503,2505,2508],{"class":115,"line":2500},169,[113,2502,2000],{"class":123},[113,2504,1929],{"class":130},[113,2506,2507],{"class":123},"#166534",[113,2509,1938],{"class":130},[113,2511,2513],{"class":115,"line":2512},170,[113,2514,1652],{"class":130},[113,2516,2518],{"class":115,"line":2517},171,[113,2519,463],{"emptyLinePlaceholder":462},[113,2521,2523,2526],{"class":115,"line":2522},172,[113,2524,2525],{"class":134},".tag.warn",[113,2527,1421],{"class":130},[113,2529,2531,2533,2535,2538],{"class":115,"line":2530},173,[113,2532,2111],{"class":123},[113,2534,1929],{"class":130},[113,2536,2537],{"class":123},"#fef3c7",[113,2539,1938],{"class":130},[113,2541,2543,2545,2547,2550],{"class":115,"line":2542},174,[113,2544,2000],{"class":123},[113,2546,1929],{"class":130},[113,2548,2549],{"class":123},"#92400e",[113,2551,1938],{"class":130},[113,2553,2555],{"class":115,"line":2554},175,[113,2556,1652],{"class":130},[113,2558,2560],{"class":115,"line":2559},176,[113,2561,463],{"emptyLinePlaceholder":462},[113,2563,2565,2568],{"class":115,"line":2564},177,[113,2566,2567],{"class":134},".metric",[113,2569,1421],{"class":130},[113,2571,2573,2575,2577,2579,2581],{"class":115,"line":2572},178,[113,2574,2013],{"class":123},[113,2576,1929],{"class":130},[113,2578,2417],{"class":123},[113,2580,1935],{"class":119},[113,2582,1938],{"class":130},[113,2584,2586,2588,2590,2592],{"class":115,"line":2585},179,[113,2587,2427],{"class":123},[113,2589,1929],{"class":130},[113,2591,2432],{"class":123},[113,2593,1938],{"class":130},[113,2595,2597,2600,2602,2605],{"class":115,"line":2596},180,[113,2598,2599],{"class":123},"  font-variant-numeric",[113,2601,1929],{"class":130},[113,2603,2604],{"class":123},"tabular-nums",[113,2606,1938],{"class":130},[113,2608,2610,2612,2614,2616],{"class":115,"line":2609},181,[113,2611,2000],{"class":123},[113,2613,1929],{"class":130},[113,2615,2507],{"class":123},[113,2617,1938],{"class":130},[113,2619,2621],{"class":115,"line":2620},182,[113,2622,1652],{"class":130},[113,2624,2626],{"class":115,"line":2625},183,[113,2627,463],{"emptyLinePlaceholder":462},[113,2629,2631,2634],{"class":115,"line":2630},184,[113,2632,2633],{"class":134},".metric.warn-m",[113,2635,1421],{"class":130},[113,2637,2639,2641,2643,2646],{"class":115,"line":2638},185,[113,2640,2000],{"class":123},[113,2642,1929],{"class":130},[113,2644,2645],{"class":123},"#b45309",[113,2647,1938],{"class":130},[113,2649,2651],{"class":115,"line":2650},186,[113,2652,1652],{"class":130},[113,2654,2656],{"class":115,"line":2655},187,[113,2657,463],{"emptyLinePlaceholder":462},[113,2659,2661,2664],{"class":115,"line":2660},188,[113,2662,2663],{"class":134},".track",[113,2665,1421],{"class":130},[113,2667,2669,2672,2674,2677],{"class":115,"line":2668},189,[113,2670,2671],{"class":123},"  position",[113,2673,1929],{"class":130},[113,2675,2676],{"class":123},"relative",[113,2678,1938],{"class":130},[113,2680,2682,2685,2687,2690,2692],{"class":115,"line":2681},190,[113,2683,2684],{"class":123},"  height",[113,2686,1929],{"class":130},[113,2688,2689],{"class":123},"44",[113,2691,1935],{"class":119},[113,2693,1938],{"class":130},[113,2695,2697,2699,2701,2703,2705],{"class":115,"line":2696},191,[113,2698,2096],{"class":123},[113,2700,1929],{"class":130},[113,2702,2371],{"class":123},[113,2704,1935],{"class":119},[113,2706,1938],{"class":130},[113,2708,2710,2712,2714,2716],{"class":115,"line":2709},192,[113,2711,2111],{"class":123},[113,2713,1929],{"class":130},[113,2715,2116],{"class":123},[113,2717,1938],{"class":130},[113,2719,2721,2724,2726,2729],{"class":115,"line":2720},193,[113,2722,2723],{"class":123},"  overflow",[113,2725,1929],{"class":130},[113,2727,2728],{"class":123},"hidden",[113,2730,1938],{"class":130},[113,2732,2734],{"class":115,"line":2733},194,[113,2735,1652],{"class":130},[113,2737,2739],{"class":115,"line":2738},195,[113,2740,463],{"emptyLinePlaceholder":462},[113,2742,2744,2747],{"class":115,"line":2743},196,[113,2745,2746],{"class":134},".ball",[113,2748,1421],{"class":130},[113,2750,2752,2754,2756,2759],{"class":115,"line":2751},197,[113,2753,2671],{"class":123},[113,2755,1929],{"class":130},[113,2757,2758],{"class":123},"absolute",[113,2760,1938],{"class":130},[113,2762,2764,2767,2769,2771,2773],{"class":115,"line":2763},198,[113,2765,2766],{"class":123},"  top",[113,2768,1929],{"class":130},[113,2770,2255],{"class":123},[113,2772,1935],{"class":119},[113,2774,1938],{"class":130},[113,2776,2778,2781,2783,2785],{"class":115,"line":2777},199,[113,2779,2780],{"class":123},"  left",[113,2782,1929],{"class":130},[113,2784,1028],{"class":123},[113,2786,1938],{"class":130},[113,2788,2790,2793,2795,2798,2800],{"class":115,"line":2789},200,[113,2791,2792],{"class":123},"  width",[113,2794,1929],{"class":130},[113,2796,2797],{"class":123},"24",[113,2799,1935],{"class":119},[113,2801,1938],{"class":130},[113,2803,2805,2807,2809,2811,2813],{"class":115,"line":2804},201,[113,2806,2684],{"class":123},[113,2808,1929],{"class":130},[113,2810,2797],{"class":123},[113,2812,1935],{"class":119},[113,2814,1938],{"class":130},[113,2816,2818,2820,2822,2825,2828],{"class":115,"line":2817},202,[113,2819,2096],{"class":123},[113,2821,1929],{"class":130},[113,2823,2824],{"class":123},"50",[113,2826,2827],{"class":119},"%",[113,2829,1938],{"class":130},[113,2831,2833,2835,2837,2840],{"class":115,"line":2832},203,[113,2834,2111],{"class":123},[113,2836,1929],{"class":130},[113,2838,2839],{"class":123},"#6366f1",[113,2841,1938],{"class":130},[113,2843,2845,2848,2851,2853],{"class":115,"line":2844},204,[113,2846,2847],{"class":123},"  will-change",[113,2849,2850],{"class":130},": transform, ",[113,2852,339],{"class":123},[113,2854,1938],{"class":130},[113,2856,2858],{"class":115,"line":2857},205,[113,2859,1652],{"class":130},[113,2861,2863],{"class":115,"line":2862},206,[113,2864,463],{"emptyLinePlaceholder":462},[113,2866,2868,2871],{"class":115,"line":2867},207,[113,2869,2870],{"class":134},".note",[113,2872,1421],{"class":130},[113,2874,2876,2878,2880,2882,2884,2886,2888],{"class":115,"line":2875},208,[113,2877,1980],{"class":123},[113,2879,1929],{"class":130},[113,2881,2371],{"class":123},[113,2883,1935],{"class":119},[113,2885,1987],{"class":123},[113,2887,1987],{"class":123},[113,2889,1938],{"class":130},[113,2891,2893,2895,2897,2899,2901],{"class":115,"line":2892},209,[113,2894,2013],{"class":123},[113,2896,1929],{"class":130},[113,2898,2417],{"class":123},[113,2900,1935],{"class":119},[113,2902,1938],{"class":130},[113,2904,2906,2908,2910,2913],{"class":115,"line":2905},210,[113,2907,2000],{"class":123},[113,2909,1929],{"class":130},[113,2911,2912],{"class":123},"#94a3b8",[113,2914,1938],{"class":130},[113,2916,2918],{"class":115,"line":2917},211,[113,2919,1652],{"class":130},[113,2921,2923],{"class":115,"line":2922},212,[113,2924,463],{"emptyLinePlaceholder":462},[113,2926,2928,2931],{"class":115,"line":2927},213,[113,2929,2930],{"class":134},".actions",[113,2932,1421],{"class":130},[113,2934,2936,2938,2940,2942],{"class":115,"line":2935},214,[113,2937,2142],{"class":123},[113,2939,1929],{"class":130},[113,2941,2332],{"class":123},[113,2943,1938],{"class":130},[113,2945,2947,2949,2951,2953,2955],{"class":115,"line":2946},215,[113,2948,2155],{"class":123},[113,2950,1929],{"class":130},[113,2952,2371],{"class":123},[113,2954,1935],{"class":119},[113,2956,1938],{"class":130},[113,2958,2960,2963,2965,2968,2970],{"class":115,"line":2959},216,[113,2961,2962],{"class":123},"  margin-top",[113,2964,1929],{"class":130},[113,2966,2967],{"class":123},"14",[113,2969,1935],{"class":119},[113,2971,1938],{"class":130},[113,2973,2975],{"class":115,"line":2974},217,[113,2976,1652],{"class":130},[113,2978,2980],{"class":115,"line":2979},218,[113,2981,463],{"emptyLinePlaceholder":462},[113,2983,2985,2988],{"class":115,"line":2984},219,[113,2986,2987],{"class":134},".btn",[113,2989,1421],{"class":130},[113,2991,2993,2995,2997,2999,3001,3004,3006],{"class":115,"line":2992},220,[113,2994,1926],{"class":123},[113,2996,1929],{"class":130},[113,2998,2371],{"class":123},[113,3000,1935],{"class":119},[113,3002,3003],{"class":123}," 16",[113,3005,1935],{"class":119},[113,3007,1938],{"class":130},[113,3009,3011,3013,3015,3018],{"class":115,"line":3010},221,[113,3012,2290],{"class":123},[113,3014,1929],{"class":130},[113,3016,3017],{"class":123},"none",[113,3019,1938],{"class":130},[113,3021,3023,3025,3027,3029,3031],{"class":115,"line":3022},222,[113,3024,2096],{"class":123},[113,3026,1929],{"class":130},[113,3028,2371],{"class":123},[113,3030,1935],{"class":119},[113,3032,1938],{"class":130},[113,3034,3036,3038,3040,3042],{"class":115,"line":3035},223,[113,3037,2111],{"class":123},[113,3039,1929],{"class":130},[113,3041,2839],{"class":123},[113,3043,1938],{"class":130},[113,3045,3047,3049,3051,3054],{"class":115,"line":3046},224,[113,3048,2000],{"class":123},[113,3050,1929],{"class":130},[113,3052,3053],{"class":123},"white",[113,3055,1938],{"class":130},[113,3057,3059,3061,3063,3065],{"class":115,"line":3058},225,[113,3060,2427],{"class":123},[113,3062,1929],{"class":130},[113,3064,2432],{"class":123},[113,3066,1938],{"class":130},[113,3068,3070,3073,3075,3078],{"class":115,"line":3069},226,[113,3071,3072],{"class":123},"  cursor",[113,3074,1929],{"class":130},[113,3076,3077],{"class":123},"pointer",[113,3079,1938],{"class":130},[113,3081,3083,3085,3087,3090,3092],{"class":115,"line":3082},227,[113,3084,2013],{"class":123},[113,3086,1929],{"class":130},[113,3088,3089],{"class":123},"13",[113,3091,1935],{"class":119},[113,3093,1938],{"class":130},[113,3095,3097],{"class":115,"line":3096},228,[113,3098,1652],{"class":130},[113,3100,3102],{"class":115,"line":3101},229,[113,3103,463],{"emptyLinePlaceholder":462},[113,3105,3107,3110],{"class":115,"line":3106},230,[113,3108,3109],{"class":134},".btn.active",[113,3111,1421],{"class":130},[113,3113,3115,3117,3119,3122],{"class":115,"line":3114},231,[113,3116,2111],{"class":123},[113,3118,1929],{"class":130},[113,3120,3121],{"class":123},"#4f46e5",[113,3123,1938],{"class":130},[113,3125,3127],{"class":115,"line":3126},232,[113,3128,1652],{"class":130},[113,3130,3132],{"class":115,"line":3131},233,[113,3133,463],{"emptyLinePlaceholder":462},[113,3135,3137,3140],{"class":115,"line":3136},234,[113,3138,3139],{"class":134},".btn.ghost",[113,3141,1421],{"class":130},[113,3143,3145,3147,3149,3151],{"class":115,"line":3144},235,[113,3146,2111],{"class":123},[113,3148,1929],{"class":130},[113,3150,2116],{"class":123},[113,3152,1938],{"class":130},[113,3154,3156,3158,3160,3163],{"class":115,"line":3155},236,[113,3157,2000],{"class":123},[113,3159,1929],{"class":130},[113,3161,3162],{"class":123},"#334155",[113,3164,1938],{"class":130},[113,3166,3168],{"class":115,"line":3167},237,[113,3169,1652],{"class":130},[113,3171,3173,3175,3177],{"class":115,"line":3172},238,[113,3174,950],{"class":130},[113,3176,1907],{"class":378},[113,3178,382],{"class":130},[37,3180,3181],{"id":3181},"小结",[311,3183,3184,3193,3198],{},[314,3185,3186,3188,3189,3192],{},[24,3187,259],{}," = 重算布局树，代价高；浏览器会批量，但 ",[24,3190,3191],{},"读布局属性会强制同步","。",[314,3194,3195,3197],{},[24,3196,215],{}," = 重算绘制及之后；reflow 必然连带 repaint。",[314,3199,3200,3202,3203,3205,3206,336,3208,3192],{},[24,3201,295],{}," 主要在合成阶段完成，适合做位移、旋转、缩放动画；位移动画优先 ",[82,3204,295],{},"，慎用 ",[82,3207,335],{},[82,3209,339],{},[1907,3211,3212],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":109,"searchDepth":160,"depth":160,"links":3214},[3215,3219,3220,3221],{"id":39,"depth":148,"text":40,"children":3216},[3217,3218],{"id":56,"depth":160,"text":56},{"id":72,"depth":160,"text":73},{"id":189,"depth":148,"text":190},{"id":289,"depth":148,"text":290},{"id":3181,"depth":148,"text":3181},"frontend","2026-06-26","回流与重绘分别对应布局树与绘制指令的重新计算，以及为何 transform 动画大多不拖累渲染主线程。",false,"md",{},"\u002Fblog\u002Freflow-repaint-transform",{"title":5,"description":3224},"blog\u002Freflow-repaint-transform",[3232,3233,3234],"browser","rendering","performance","9qGt4nC5IYw-1z--ZpE9qqITwfWBE18SKN7ZWLP5isc",1782309644799]