查看 javascript 运行时 recalculate style 耗时，最直接的方法是在 chrome devtools 的 performance 面板中开启 "layout" 和 "style" 采样选项，并在录制过程中触发重排操作。通过分析生成的火焰图（flame chart），你可以定位到名为 "recalculate style" 的蓝色条块，其宽度直接对应耗时。若需更细粒度的数据，可结合 `performance.measure()` api 手动标记代码段，或使用 `window.getcomputedstyle()` 强制同步布局来观察性能瓶颈。
如何在 Performance 面板中定位 Recalculate Style 耗时
在 Chrome DevTools 中打开 Performance 面板，点击录制按钮开始捕获。确保顶部工具栏中的 "Layout" 和 "Style" 复选框已被勾选，这告诉浏览器在录制期间收集样式计算和布局信息。执行完你的交互或动画后停止录制。在生成的时间线视图中，找到底部的 "Rendering" 区域，这里会显示每一帧的耗时分布。点击展开某一帧的详细视图，你会看到 "Styles" 部分，其中列出了 "Recalculate Style" 的具体耗时毫秒数。如果该值过高，说明 JavaScript 执行了大量 DOM 操作或 CSS 变更，导致浏览器需要重新计算元素样式。
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
// 模拟大量 DOM 操作
for (let i = 0; i < 1000; i++) {
const div = document.createElement('div');
div.style.color = 'red';
document.body.appendChild(div);
}
});上述代码演示了一个典型的引发 Recalculate Style 的场景。当用户点击按钮时，循环创建并插入 1000 个带有内联样式的元素。每次 `appendChild` 都会使浏览器标记相关节点为脏状态，最终在下一帧渲染前触发大规模的样式重计算。在 Performance 面板中，你会看到 "Recalculate Style" 条块显著变宽，且可能伴随 "Layout" 条块，因为插入新元素也可能触发布局重排。通过对比操作前后的耗时，可以量化这段代码对主线程的影响。
立即学习“Java免费学习笔记（深入）”；
如何使用 performance.measure 精确测量特定代码段的样式计算开销
如果你只关心某一段特定 JavaScript 逻辑导致的样式重计算耗时，可以使用 Web API 中的 `performance.mark()` 和 `performance.measure()`。在目标代码段前后分别设置标记，然后创建一个测量对象。虽然 `performance.measure` 本身不区分具体是样式还是布局耗时，但结合 Performance 面板的 "User Timing" 轨道，你可以将自定义标记与底层的 "Recalculate Style" 事件对齐，从而确认两者之间的因果关系。这种方法适合在复杂应用中隔离问题模块。
performance.mark('start-style-check');
// 执行可能触发重排的 JS 代码
const rect = document.querySelector('.item').getBoundingClientRect();
performance.mark('end-style-check');
performance.measure('style-calc-overhead', 'start-style-check', 'end-style-check');
console.log(performance.getEntriesByName('style-calc-overhead')[0].duration);这段代码首先标记了起始点，然后调用 `getBoundingClientRect()`。这是一个常见的强制同步布局操作，它会立即触发 Recalculate Style 和 Layout，以确保获取最新的几何信息。随后标记结束点并创建测量。在 Performance 面板的 "User Timing" 轨道上，你会看到一个名为 "style-calc-overhead" 的条形图。同时，在下方的 "Rendering" 轨道中，你应该能看到一个对应的 "Recalculate Style" 事件发生在同一时间段内。通过比较这两个时间戳的重合度，可以验证你的代码是否确实导致了昂贵的样式计算。注意，`getComputedStyle` 也会产生类似效果，应尽量避免在高频回调中使用。
为什么 getComputedStyle 会导致显著的 Recalculate Style 耗时
`getComputedStyle` 是导致 Recalculate Style 耗时的常见原因之一，因为它是一个强制同步方法。当你在 JavaScript 中调用它时，浏览器必须确保所有待处理的样式变更都已应用，以便返回准确的计算值。这意味着即使你只是读取一个元素的样式，浏览器也可能提前触发整个文档或子树的样式重计算。在主线程繁忙或 DOM 结构复杂时，这种同步阻塞会显著增加帧耗时，导致掉帧现象。因此，优化策略通常是批量读取样式，或者使用 `requestAnimationFrame` 将读取操作推迟到渲染周期之后，以减少不必要的中间重计算。
