Question

我正在快速触发的处理程序中更新元素的内联样式。在我的代码中，它位于onscroll中（并且我了解节流），但是为了简单起见，这里我将使用setInterval。

我要问的是-这样：

function updateStyle (value) {
  document.body.style.marginTop = value + 'px'
}

setInterval(function () {
  updateStyle(15)
}, 1)

...执行任何比这更糟的事情：

var current = null

function updateStyle (value) {
  if (current !== value) {
    document.body.style.marginTop = value + 'px'
    current = value
  }
}

setInterval(function () {
  updateStyle(15)
}, 1)

一方面，我正在设置style属性。另一方面，我实际上并没有更改值。我的猜测是渲染引擎足够聪明，可以注意到这一点，但是-是吗？

Answer 1

可以通过两种方式计算浏览器的性能影响。

1。重绘： DOM可见性更改（少花费）

2。回流：更改DOM布局（更昂贵）

因此，您所做的更改对DOM的影响将决定您的性能。在您的情况下，您要添加边距，并且如果布局更改是由于该DOM回流而发生的，那么这将是昂贵的，但还要考虑您对哪个大型DOM产生了影响。

  Hope this explanation helps you :)

将内联样式设置为相同值会对性能产生影响？

1 个答案: