DOM渲染是异步发生的吗？

Question

我有一些代码在SVG上的鼠标滚动回调中被触发 这会对SVG进行一些转换（用于放大和缩小到某个点）。 对于一些巨大的SVG，性能低迷，我想改进它 我正在尝试测量从滚动开始到渲染完成的时间。 我有以下代码

var timerStart = Date.now();
//some calculations
svgElement.setAttribute("transform",newTransform);
console.log("rendered:", Date.now()-timerStart);

但是我可以看到即使在打印日志之后也会发生渲染。 我假设DOM操作是同步的（javascript运行时是单线程的），似乎情况并非如此？是否有一些异步渲染的渲染队列？ 在这种情况下，如何准确测量渲染的性能？

Answer 1

渲染不只是异步发生，它发生并发（即在另一个线程中）。所以你无法从JavaScript线程中准确地测量它。

但是，大多数现代浏览器允许从它们提供的开发人员工具进行分析，以查看每个渲染/布局/重排的原因以及如何优化代码。