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

I'm using this to lock the scrolling of some TH elements vertically. This line of code seems to have exponential runtime complexity. It works nicely when I am locking 10 elements. 30 elements, it's still responsive but very bad. 60 elements, it becomes unresponsive.

In case you're wondering. No, I do not have it called repeatedly. It is called exactly 3 times per scroll.

Solved: The problem was in document.body.scrollTop. After trying to scroll the elements up and down the page using a pre-calculated value, it is smooth, but when adding that dummy call into the same function, it became unresponsive.

user3758745
  • 777
  • 1
  • 6
  • 19
  • Save the value in a variable instead of looking it up over and over. – zfrisch Aug 15 '19 at 00:13
  • Why is it called 3 times per scroll, and how do the 10 to 30 elements become the `el`? Please post the complete code. – Bergi Aug 15 '19 at 00:29
  • The line itself should not be slow. At least not until thousands of elements. How are you calling it? – slebetman Aug 15 '19 at 00:48
  • @slebetman Accessing [`.scrollTop` might trigger a reflow](https://stackoverflow.com/a/43354279/1048572), causing it to be much slower than expected – Bergi Aug 15 '19 at 01:40
  • 1
    You guys are correct. I tried scrolling the 60 elements up and down the page by setting `el.style.top = savedPos + weight` and it going smoothly so the problem my is either in `document.body.scrollTop` or in a bad logic somewhere else. Thanks. – user3758745 Aug 15 '19 at 16:05
  • @Bergi I'm reimplementing the scroll functionality because there're a lot of flickering when trying to lock element against browser's default scrolling. `el` element is used inside a loop `for(var i = 0; i < els.length; i++)`. There were setTimeout and setInterval going on so didn't want to post the whole code. I only paste this line because once I commented it out, the scrolling became smooth. – user3758745 Aug 15 '19 at 16:08
  • @Bergi I've tested it and scrollTop IS the bottleneck. If you're interest in making it as an answer, I can select it as correct answer. Thanks. – user3758745 Aug 15 '19 at 16:15

2 Answers2

0

I would use 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>
Steve
  • 878
  • 1
  • 5
  • 9
  • This is for IE support – user3758745 Aug 15 '19 at 16:03
  • Oh, I'm sorry... RIP. Next time you might want to include that in your post. Since IE is a deprecated, insecure browser the answers will definitely be different than for a modern, secure browser.. – Steve Aug 16 '19 at 00:12
0

Depending on what your style.top assignment affects and how the browser rendering engine works, each access to .scrollTop might trigger a reflow. So you should access it only once before the loop over your elements and store it in a variable:

const { scrollTop } = document.body;
for (const el of els) {
    el.style.top = scrollTop + 'px';
}
Bergi
  • 630,263
  • 148
  • 957
  • 1,375