是否可以通过一次回流来进行这些更改？ [复制]

Question

我一直在阅读 google 向我提供的一些指南和结果，但我仍然不确定如何将以下更改减少到一次回流。

var el1 = document.getElementById("one");
var el2 = document.getElementById("two");
var el3 = document.getElementById("three");
var variable1 = getSomeDynamicValue();

function doChanges() {
  el1.style.cssText = "width: " + variable1 + "px;";
  el2.style.cssText = "top:50px; left: 50px; position: fixed;";
  el3.style.cssText = "";
}

doChanges();

据我了解，cssText 会导致重排，所以使用此代码会有三个重排？还是取决于其他情况？

编辑：文章和类似帖子并没有真正给出我的问题的明确答案。是否可以？方法是什么？

Answer 1

根据this site：

任何改变用于构建渲染树的输入信息都可能导致重绘或回流，例如：

• 添加、删除、更新 DOM 节点
• 通过显示隐藏 DOM 节点：无（重排和重绘）或可见性：隐藏（仅重绘，因为没有几何形状更改）
• 在页面上移动、动画化 DOM 节点
• 添加样式表，调整样式属性
• 用户操作，例如调整窗口大小、更改字体大小或（哦，天哪，不！）滚动

在网站底部，它解释了避免多次回流的最佳方法：

• 不要一一更改个别样式。最好的理智和可维护性是更改类名而不是样式。但这假设是静态样式。如果样式是动态的，请编辑 cssText 属性，而不是为每一个小的更改都触摸元素及其样式属性。
• 批量 DOM 更改并“脱机”执行。离线意味着不在实时 DOM 树中。
• 不要过度要求计算样式。如果您需要使用计算值，请获取一次，缓存到本地 var 并使用本地副本。

请自己阅读，他们提供了不错的例子