Повышение производительности этой одной строки кода Javascript

Question

Повышение производительности этой одной строки кода Javascript

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

Я использую это для блокировки прокрутки некоторых элементов TH по вертикали. Эта строка кода, кажется, имеет экспоненциальную сложность во время выполнения. Это хорошо работает, когда я блокирую 10 элементов. 30 элементов, это все еще отзывчиво, но очень плохо. 60 элементов, он перестает отвечать.

На случай, если вам интересно. Нет, мне не звонили неоднократно. Он вызывается ровно 3 раза за свиток.

Решено: проблема была в document.body.scrollTop. После попытки прокрутить элементы вверх и вниз по странице, используя предварительно вычисленное значение, оно становится плавным, но при добавлении этого фиктивного вызова в ту же функцию он перестает отвечать.

0

javascript performance scroll-lock

Источник

user3758745 15 авг '19 в 03:11

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>

0

Источник

user4839724 15 авг '19 в 03:45

Другие вопросы по тегам javascript performance scroll-lock

user1048572 15 авг '19 в 20:26 2019-08-15 20:26 · Accepted Answer · 2019-08-15 20:26

В зависимости от того, что ваш style.top влияет назначение и как работает механизм рендеринга браузера, каждый доступ к .scrollTop может вызвать оплавление. Таким образом, вы должны получить к нему доступ только один раз перед циклом над вашими элементами и сохранить его в переменной:

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