Javascript优化浏览器回流

我希望通过javascript优化更新样式，避免浏览器回流

检查样式是否已设置，以提高性能

if( element.style.width !== '100px' ) {
   element.style.width = '100px';
}

而不是直接更新（无需检查）

这是基准：

如果已经为优化浏览器回流设置了样式，是否有最佳实践检查

旁注：同样的，add类不是这样

如果已经为优化浏览器回流设置了样式，是否有最佳实践检查

不，这不是最佳做法。浏览器本身会这样做，如果该值不变，则不会导致回流

（也就是说，据我所知，在一些旧的safari版本中有一个bug，因此一些受此影响的开发人员实际上不得不在他们的代码中添加这样一个变通方法。不过，Iirc这只是一个特定的属性。）

如果已经为优化浏览器回流设置了样式，是否有最佳实践检查

不，这不是最佳做法。浏览器本身会这样做，如果该值不变，则不会导致回流

---

（也就是说，据我所知，在一些旧的safari版本中有一个bug，因此一些受此影响的开发人员实际上不得不在他们的代码中添加这样一个变通方法。尽管Iirc这只是一个特定的属性。）

要优化的一件事是关于定位的元素依赖关系

考虑以下几点：

<div id="container">
    <div id="absolute_child"></div>
    <div id="floating_child"></div>
    <div id="another_floating_child"></div>
</div>

在这里，如果更改#absolute_child的大小或位置，则不会发生回流，因为不会计算与之相关的其他元素。但是，如果您处理浮动元素，则每个元素都会相对于另一个元素进行计算，从而导致昂贵的回流

---

这有细微差别，但如果您想动态更改元素，请将它们从中取出以优化性能。

要优化的一件事是与定位相关的元素依赖性

考虑以下几点：

<div id="container">
    <div id="absolute_child"></div>
    <div id="floating_child"></div>
    <div id="another_floating_child"></div>
</div>

在这里，如果更改#absolute_child的大小或位置，则不会发生回流，因为不会计算与之相关的其他元素。但是，如果您处理浮动元素，则每个元素都会相对于另一个元素进行计算，从而导致昂贵的回流

---

这有细微差别，但如果您想动态更改元素，请将它们从中取出以优化性能。

您认为必须“优化”某些内容有什么原因吗？您是如何验证的？只有在标记中使用

style=“…”

属性设置所有样式时，您的方法才会起作用，这是一个糟糕的想法。如果您将

style

属性重新指定为完全相同的值，并且这会导致浏览器中出现回流，这就是引擎中的错误。在javascript中没有什么需要优化的。有没有理由认为必须“优化”某些东西？您是如何验证的？只有在标记中使用

style=“…”

属性设置所有样式时，您的方法才会起作用，这是一个糟糕的想法。如果您将

style

属性重新指定为完全相同的值，并且这会导致浏览器中出现回流，这就是引擎中的错误。在javascript中没有什么需要优化的。为什么要在设置之前使用基准win check？@SimoneNigro因为读操作的成本比写操作低，所以它只是DOM API中不同的方法调用。差别很小。如果浏览器真的在其中执行回流，那么数字将被关闭多个数量级。为什么要在设置前的基准测试中进行win check？@SimoneNigro因为读的成本比写的低，所以它只是DOM API中的一个不同的方法调用。差别很小。如果浏览器真的在那里执行回流，那么数字将被关闭多个数量级。

.container .div{width:100px; height:100px; display:block; position:relative;}
#absolute_child {position:absolute;}
#floating_child, #another_floating_child  {float:left;}