javascript - 最小化 "Forced reflow"

Question

TD;DR

我花了一些时间跟踪我们的应用程序的性能，该应用程序实现了 highcharts。我发现，像 getBBox() 这样的函数确实经常触发“强制回流”。

如果您查看此列表 What forces layout / reflow ，触发回流的东西很长。

我的问题:

对于至少一些列出的属性(特别是 offsetWidth/offsetHeight)，是否有不会触发回流的替代方案？

Answer 1

您熟悉 Avoid forced synchronous layouts 等文档吗？ ？主要思想是在更改元素布局的写入操作之前执行所有读取操作。只要您遵循该原则，使用什么属性就不那么重要了。当然，使用尽可能少的工作的属性总是一个好主意。

. High-Performance Animations是关于哪些属性有效的好资源。这与 Derek 提到的分层方法有关。