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节点设置动画

添加样式表，调整样式属性

用户操作，例如调整窗口大小，更改字体大小或滚动（哦，天哪，不！）

在网站底部，它说明了避免多次重排的最佳方法：

请勿一一更改个人风格。为了保持理智和可维护性，最好的办法是更改类名而不是样式。但这假定为静态样式。如果样式是动态的，则编辑cssTextproperty，而不是每次更改都触摸元素及其样式属性。

批处理DOM更改并“离线”执行。脱机意味着不在实时DOM树中。

不要过度要求计算样式。如果需要使用计算值，请取一次，缓存到本地变量并使用本地副本。

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

是否可以通过一次重排进行这些更改？

1 个答案: