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线程准确地对其进行度量。

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