De nombreux sites et applications ont de nombreux scripts à exécuter. Votre code JavaScript doit souvent être exécuté dès que possible, mais vous ne voulez pas qu'il gêne l'utilisateur. Si vous envoyez des données analytiques lorsque l'utilisateur fait défiler la page ou si vous ajoutez des éléments au DOM alors qu'il appuie sur le bouton, votre application Web peut ne plus répondre, ce qui entraîne une mauvaise expérience utilisateur.
La bonne nouvelle est qu'une API peut vous aider: requestIdleCallback. De la même manière que l'adoption de requestAnimationFrame nous a permis de planifier correctement les animations et de maximiser nos chances d'atteindre 60 FPS, requestIdleCallback planifie le travail lorsqu'il y a du temps libre à la fin d'un frame ou lorsque l'utilisateur est inactif. Vous avez donc la possibilité de faire votre travail sans gêner l'utilisateur. Elle est disponible à partir de Chrome 47. Vous pouvez donc l'essayer dès aujourd'hui avec Chrome Canary. Il s'agit d'une fonctionnalité expérimentale, et les spécifications sont encore en cours d'évolution. Les choses peuvent donc changer à l'avenir.
Pourquoi utiliser requestIdleCallback ?
Planifier vous-même des tâches non essentielles est très difficile. Il est impossible de déterminer exactement combien de temps de frame reste, car après l'exécution des rappels requestAnimationFrame, des calculs de style, de mise en page, de peinture et d'autres éléments internes du navigateur doivent s'exécuter. Une solution maison ne peut pas tenir compte de tout cela. Pour vous assurer qu'un utilisateur n'interagit pas d'une manière ou d'une autre, vous devez également associer des écouteurs à chaque type d'événement d'interaction (scroll, touch, click), même si vous n'en avez pas besoin pour la fonctionnalité, juste pour être absolument sûr que l'utilisateur n'interagit pas. En revanche, le navigateur sait exactement combien de temps est disponible à la fin du frame et si l'utilisateur interagit. Grâce à requestIdleCallback, nous disposons donc d'une API qui nous permet d'utiliser tout temps libre de la manière la plus efficace possible.
Examinons-le de plus près pour voir comment nous pouvons l'utiliser.
Recherche de requestIdleCallback
requestIdleCallback est encore en phase de développement. Avant de l'utiliser, vérifiez qu'il est disponible:
if ('requestIdleCallback' in window) {
// Use requestIdleCallback to schedule work.
} else