JavaScript часто вызывает визуальные изменения. Иногда это происходит непосредственно посредством манипуляций со стилем, а иногда — вычислений, приводящих к визуальным изменениям, например, поиска или сортировки данных. Несвоевременный или длительный запуск JavaScript является распространенной причиной проблем с производительностью. Вам следует постараться минимизировать его влияние там, где это возможно.
JavaScript часто вызывает визуальные изменения. Иногда это происходит непосредственно посредством манипуляций со стилем, а иногда — вычислений, приводящих к визуальным изменениям, например, поиска или сортировки данных. Несвоевременный или длительный запуск JavaScript является распространенной причиной проблем с производительностью. Вам следует постараться минимизировать его влияние там, где это возможно.
Профилирование производительности JavaScript может быть своего рода искусством, поскольку написанный вами JavaScript не имеет ничего общего с кодом, который фактически выполняется. Современные браузеры используют JIT-компиляторы и всевозможные оптимизации и трюки, чтобы обеспечить максимально быстрое выполнение, и это существенно меняет динамику кода.
Однако, несмотря на все вышесказанное, есть некоторые вещи, которые вы определенно можете сделать, чтобы ваши приложения хорошо выполняли JavaScript.
Краткое содержание
- Избегайте setTimeout или setInterval для визуальных обновлений; вместо этого всегда используйте requestAnimationFrame.
- Переместите долго выполняющийся JavaScript из основного потока в Web Workers.
- Используйте микрозадачи, чтобы вносить изменения в DOM в нескольких кадрах.
- Используйте временную шкалу Chrome DevTools и профилировщик JavaScript, чтобы оценить влияние JavaScript.
Используйте requestAnimationFrame для визуальных изменений.
Когда на экране происходят визуальные изменения, вы хотите выполнить свою работу в нужное для браузера время, то есть в самом начале кадра. Единственный способ гарантировать, что ваш JavaScript запустится в начале кадра, — это использовать requestAnimationFrame .
/**
* If run as a requestAnimationFrame callback, this
* will be run at the start of the frame.
*/
function updateScreen(time) {
// Make visual updates here.
}
requestAnimationFrame(updateScreen);
Платформы или примеры могут использовать setTimeout или setInterval для выполнения визуальных изменений, таких как анимация, но проблема в том, что обратный вызов будет выполняться в какой-то момент кадра, возможно, прямо в конце, и это часто может привести к тому, что мы пропустим кадр, что приведет к зависанию.