在 javascript 运行时中查看 painting 耗时，最直接的方法是使用 chrome devtools 的 performance 面板。你需要录制一段性能数据，然后在生成的火焰图中找到名为 "paint" 或 "composite layers" 的事件块。这些事件块的时间长度即为浏览器绘制当前帧所花费的时间。通过分析这些数据，你可以定位到导致界面卡顿的具体代码调用或样式变更。
如何开启并录制 Performance 数据
要获取 Painting 耗时，必须先在 Chrome DevTools 中启动性能录制。打开 DevTools（F12），切换到 "Performance" 标签页。点击左上角的录制按钮（圆形图标），然后执行你的应用操作，例如滚动页面、点击按钮或运行动画。操作完成后再次点击录制按钮停止。此时，时间轴上会显示一系列事件，包括 JavaScript 执行、布局（Layout）、样式计算（Recalculate Style）和绘制（Paint）。你需要关注的是时间轴下方的 "Layers" 区域，那里展示了各个图层在每一帧的绘制情况。
const btn = document.getElementById('myButton');
btn.addEventListener('click', () => {
// 模拟一些 DOM 操作
const div = document.createElement('div');
div.style.backgroundColor = 'red';
document.body.appendChild(div);
});
上述代码是一个简单的交互示例。当点击按钮时，它创建了一个新的 DOM 元素并改变其样式。这通常会触发重排（Reflow）和重绘（Repaint）。在 Performance 面板中，你可以看到对应的 "Scripting" 事件后紧跟 "Layout" 和 "Paint" 事件。通过放大时间轴，你可以精确测量从开始绘制到绘制完成的时间间隔。如果 Paint 耗时过长，通常意味着需要绘制的像素区域过大，或者绘制的内容过于复杂。
如何通过代码手动测量单次绘制耗时
除了使用 DevTools，你还可以通过 JavaScript 代码手动测量特定操作的绘制耗时。虽然浏览器没有直接暴露 "paint time" 的 API，但可以利用 `requestAnimationFrame` 来估算。`requestAnimationFrame` 的回调函数会在下一帧绘制前被调用。你可以在回调开始时记录时间，并在下一次回调中计算差值，但这主要反映帧率。更精确的方法是结合 `performance.mark()` 和 `performance.measure()`，在关键操作前后标记时间点，并通过 Performance Observer 监听长任务或绘制事件。
let lastFrameTime = 0;
function measurePaint() {
const now = performance.now();
if (lastFrameTime) {
const frameDuration = now - lastFrameTime;
console.log(`Frame duration: ${frameDuration}ms`);
// 假设 Paint 占帧时间的 10-30%，可粗略估算
const estimatedPaintTime = frameDuration * 0.2;
console.log(`Estimated Paint Time: ${estimatedPaintTime}ms`);
}
lastFrameTime = now;
requestAnimationFrame(measurePaint);
}
requestAnimationFrame(measurePaint);
这段代码通过持续监控帧持续时间来间接评估绘制开销。虽然它不能给出绝对的 Paint 耗时，但在开发环境中，如果帧持续时间显著增加，往往伴随着 Paint 耗时的上升。你可以将这种测量与具体的 DOM 操作结合起来，例如在修改大量元素后检查帧率变化。这种方法适用于需要自动化测试或集成到 CI/CD 流程中的场景，帮助开发者在早期发现潜在的绘制性能问题。
Painting 耗时过长通常由哪些具体条件引起
当你在 Performance 面板中看到 Painting 耗时异常高时，通常是由以下几个具体条件引起的。首先是绘制区域过大，例如整个屏幕都被重绘，而不是局部更新。其次是绘制内容复杂，比如使用了大量的阴影、模糊效果或复杂的 CSS 渐变，这些都会增加 GPU 的处理负担。此外，频繁的样式变更会导致浏览器不得不重新计算样式并重新绘制，即使视觉上没有明显变化。最后，如果页面包含大量的重叠透明元素，浏览器需要进行合成（Compositing），这也会增加绘制时间。解决这些问题的方法包括减少重绘区域、使用 `will-change` 属性提示浏览器优化、以及避免在动画过程中修改影响布局的属性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
