Многие сайты и приложения содержат множество скриптов для выполнения. Ваш JavaScript часто необходимо запустить как можно скорее, но в то же время вы не хотите, чтобы он мешал пользователю. Если вы отправляете аналитические данные, когда пользователь прокручивает страницу, или добавляете элементы в DOM, когда они нажимают на кнопку, ваше веб-приложение может перестать отвечать на запросы, что приведет к ухудшению пользовательского опыта.
Хорошей новостью является то, что теперь есть API, который может помочь: requestIdleCallback . Точно так же, как внедрение requestAnimationFrame позволило нам правильно планировать анимацию и максимизировать шансы на достижение 60 кадров в секунду, requestIdleCallback будет планировать работу, когда в конце кадра есть свободное время или когда пользователь неактивен. Это означает, что есть возможность выполнять свою работу, не мешая пользователю. Он доступен начиная с Chrome 47, так что вы можете опробовать его уже сегодня, используя Chrome Canary! Это экспериментальная функция , и ее спецификация все еще меняется, поэтому в будущем все может измениться.
Почему мне следует использовать requestIdleCallback?
Самостоятельно планировать второстепенную работу очень сложно. Невозможно точно определить, сколько времени кадра осталось, потому что после выполнения обратных вызовов requestAnimationFrame необходимо выполнить вычисления стиля, макета, рисования и другие внутренние функции браузера. Домашнее решение не может учитывать ни один из этих факторов. Чтобы быть уверенным, что пользователь каким-либо образом не взаимодействует, вам также необходимо прикрепить прослушиватели к каждому виду событий взаимодействия ( scroll , touch , click ), даже если они вам не нужны для функциональности, просто чтобы вы могли быть абсолютно уверены, что пользователь не взаимодействует. Браузер, с другой стороны, точно знает, сколько времени доступно в конце кадра и взаимодействует ли пользователь, поэтому с помощью requestIdleCallback мы получаем API, который позволяет нам использовать любое свободное время наиболее эффективным способом.
Давайте рассмотрим его более подробно и посмотрим, как мы можем его использовать.
Проверка запросаIdleCallback
requestIdleCallback еще только начинается, поэтому перед его использованием вы должны убедиться, что он доступен для использования:
if ('requestIdleCallback' in window) {
// Use requestIdleCallback to schedule work.
} else {
// Do what you’d do today.
}
Вы также можете изменить его поведение, что потребует возврата к setTimeout :
window.requestIdleCallback =
window.requestIdleCallback ||
function (cb) {