Вимірювання часу маніпуляції DOM у JavaScript допомагає оптимізувати роботу веб-сторінок. Розуміння, як довго скрипти приймають оновлення моделі об'єкта документів (DOM) можна визначити пляшки та покращити досвід користувача.

Методи вимірювання часу маніпуляції ОМ

Використання вбудованих інструментів браузера є найбільш простим способом вимірювання продуктивності маніпуляцій DOM. API Performance надає детальну інформацію про час виконання JavaScript.

Використання API продуктивності

API Performance дозволяє розробникам розмітити певні точки в коді і вимірювати час, який клацається між ними. Це дозволяє визначити, як довго приймають оновлення DOM.

Приклад коду:

]

Виконувати DOM-маніпуляції тут.

]

]]

Потім, одержимо вимірювання:

]]

duration] вказує на час, який приймається.

Кращі практики для вимірювання прискорених речовин

Щоб забезпечити точний результат, виконувати вимірювання кількох разів і середні результати. Уникайте інших сценаріїв, що працюють одночасно, які можуть вплинути на частимізацію.

Додаткові поради

  • requestAnimationFrame для вимірювання візуальних оновлень.
  • Вимкнено непотрібні сценарії під час тестування.
  • Профіль з інструментами для розробників веб-сайтів для детальних інсайтів.