Часто встречается ситуация, когда в JS нужно выполнить много тяжелых операций, и показатель #TBT от этого будет расти. Современный JS позволяет начать выполнение следующей операции только когда предыдущая завершена и основной поток свободен для новых задач.
Знакомьтесь -
requestIdleCallback метод, который позволяет выполнять операции во время простоя браузера, только когда основной поток свободен и новая задача минимально повлияет на быстродействие. Метод достаточно старый, но поддержка браузерами, не очень большая, на момент написания поста 78.33%. Но не переживайте полифилл очень простой и его можно просто включать в ваш код.
if (!window.requestIdleCallback) {
window.requestIdleCallback = (func, options) => {
options = options || {};
setTimeout(func, options.timeout || 1);
}
}
Если браузер не поддерживает requestIdleCallback, то функция просто выполнится по таймауту.
Как пользоваться этим методом.requestIdleCallback(() => {
// Ваш код
}, {timeout: 1000});
timeout - время в миллисекундах через которое функция будет выполнена безусловно, даже если основной поток загружен и выполнение приведет к падению быстродействия. Если не указывать, то метод всегда будет ждать свободного времени для выполнения.
Помните, это не волшебная кнопка и если просто обернуть в этот метод весь ваш js код, то разницы в быстродействии не будет, нужно логически разбивать код на блоки, выполнение которых не зависит друг от друга, тогда будет видна разница в быстродействии. И интерфейсные вещи первого экрана (события на кнопки и тд) лучше не откладывать, чтобы не понижать отзывчивость вашего сайта.
А вы используете этот метод в своей работе?
