这一行Javascript代码的性能提升答案

【问题标题】：Performance enhancement of this one line of Javascript code这一行Javascript代码的性能提升
【发布时间】：2019-08-15 00:11:13
【问题描述】：

el.style.top = document.body.scrollTop + 'px';

我正在使用它来锁定某些 TH 元素的垂直滚动。这行代码似乎具有指数运行时复杂性。当我锁定 10 个元素时，它工作得很好。 30个元素，它仍然响应但非常糟糕。 60 个元素，它变得无响应。

如果您想知道的话。不，我没有重复调用它。每次滚动恰好调用 3 次。

已解决：问题出在 document.body.scrollTop 中。尝试使用预先计算的值在页面上上下滚动元素后，它很流畅，但是当将该虚拟调用添加到同一函数中时，它变得无响应。

【问题讨论】：

将值保存在变量中，而不是一遍又一遍地查找。
为什么每次滚动调用3次，10到30个元素怎么变成el？请发布完整的代码。
线路本身不应该很慢。至少直到成千上万的元素。你怎么称呼它？
@slebetman 访问.scrollTop might trigger a reflow，导致它比预期慢得多
你们是对的。我尝试通过设置el.style.top = savedPos + weight 在页面上下滚动 60 个元素，并且运行顺利，所以我的问题要么在 document.body.scrollTop 中，要么在其他地方的逻辑错误。谢谢。

标签： javascript performance scroll-lock

【解决方案1】：

取决于您的style.top 分配影响的内容以及浏览器渲染引擎的工作方式，每个access to .scrollTop might trigger a reflow。因此，您应该只在循环遍历元素之前访问它一次并将其存储在变量中：

const { scrollTop } = document.body;
for (const el of els) {
    el.style.top = scrollTop + 'px';
}

【讨论】：

【解决方案2】：

我会使用 CSS：

table {
  border-collapse: collapse;
}

th {
  position: sticky;
  top: 0;
  background-color: red;
  color: white;
  outline: solid 1px white;
  padding: 5px;
}

td {
  border: solid 1px black;
  text-align: center;
}

<table>
  <thead>
    <tr>
      <th>header column 1</th>
      <th>header column 2</th>
      <th>header column 3</th>
      <th>header column 4</th>
      <th>header column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
    <tr>
      <td>data column 1</td>
      <td>data column 2</td>
      <td>data column 3</td>
      <td>data column 4</td>
      <td>data column 5</td>
    </tr>
  </tbody>
</table>

【讨论】：

这是为了支持 IE
哦，对不起... RIP。下次您可能希望将其包含在您的帖子中。由于 IE 是一种已弃用、不安全的浏览器，因此答案肯定会与现代、安全的浏览器不同......