Points de base
requestIdleCallback est une API qui permet de planifier des tâches inutiles lorsque le navigateur est inactif, similaire à la fonctionnalité de requestAnimationFrame. Il peut être utilisé avec l'option de délai d'expiration pour s'assurer que les tâches fonctionnent dans une plage de temps définie, même si le navigateur n'est pas inactif. requestIdleCallback est une fonctionnalité expérimentale avec un support de navigateur limité et ne convient pas aux tâches qui effectuent un temps imprévisible ou pour résoudre les tâches de promesse. Pour les navigateurs ou tâches non pris en charge qui nécessitent un accès direct au DOM, des alternatives telles que les travailleurs Web ou setTimeout peuvent être utilisées. Si vous oubliez tout le reste en javascript, rappelez-vous toujours ceci: il bloque . Imaginez un assistant de traitement magique faisant fonctionner votre navigateur. Qu'il s'agisse de rendre HTML, de réponse aux commandes de menu, de dessin à l'écran, de manipulation de clics de souris ou d'exécution des fonctions JavaScript, tout cela est géré par un seul sprite. Comme la plupart d'entre nous, les elfes ne peuvent faire qu'une seule chose à la fois. Si nous lançons beaucoup de tâches sur les elfes, ils sont ajoutés à une grande liste de tâches et traités dans l'ordre. Tout le reste s'arrête lorsque le sprite rencontre une balise de script ou doit exécuter une fonction JavaScript. Le code (si nécessaire) sera téléchargé et exécuté immédiatement avant que d'autres événements ou le rendu ne soient traités. Ceci est nécessaire car votre script peut tout faire: charger plus de code, supprimer chaque élément DOM, rediriger vers une autre URL, etc. Même avec deux sprites ou plus, d'autres sprites doivent cesser de fonctionner lorsque le premier sprite traite votre code. C'est un blocage. C'est pourquoi les scripts de longue date ne réagissent pas le navigateur. Vous voulez généralement que JavaScript s'exécute dès que possible, car le code initialise les widgets et les gestionnaires d'événements. Cependant, il existe des tâches backend moins importantes qui n'affecteront pas directement l'expérience utilisateur, telles que:
Ce ne sont pas des tâches critiques, mais pour garder la page réactive, elles ne doivent pas s'exécuter lorsque l'utilisateur défile ou interagit avec le contenu. Une option consiste à utiliser des travailleurs Web, qui peuvent exécuter le code simultanément dans un thread séparé. Il s'agit d'un excellent choix pour la prélecture et le traitement, mais vous n'autorisez pas l'accès direct ou la mise à jour du DOM. Vous pouvez éviter cela dans vos propres scripts, mais vous ne pouvez pas garantir que des scripts tiers tels que Google Analytics n'en auront jamais besoin. Une autre possibilité est setTimeout, par exemple setTimeout(doSomething, 1);. Le navigateur exécutera la fonction doSomething() une fois les autres tâches immédiatement exécutées. En fait, il est placé en bas de la liste de tâches. Malheureusement, la fonction est appelée quelles que soient les exigences de traitement.
requestIdleCallback requestIdleCallback est une nouvelle API conçue pour planifier des tâches backend non essentielles pendant les moments de la respiration du navigateur. Il vous rappelle requestAnimationFrame, qui appelle une fonction pour mettre à jour l'animation avant la prochaine repeinte. Vous pouvez en savoir plus sur requestAnimationFrame ici: Animation simple à l'aide de demandeanimationframe
Nous pouvons vérifier s'il le prend en charge comme celui-ci requestIdleCallback:
if ('requestIdleCallback' in window) {
// requestIdleCallback 受支持
requestIdleCallback(backgroundTask);
} else {
// 不支持 - 执行其他操作
setTimeout(backgroundTask1, 1);
setTimeout(backgroundTask2, 1);
setTimeout(backgroundTask3, 1);
}Vous pouvez également spécifier des paramètres d'objet d'option en utilisant le délai d'attente (en millisecondes), par exemple:
requestIdleCallback(backgroundTask, { timeout: 3000 }); Cela garantit que votre fonction est appelée dans les trois premières secondes, que le navigateur soit inactif ou non. requestIdleCallback Appelez votre fonction une seule fois et transmettez un objet de date limite avec les propriétés suivantes:
didTimeout - Définir sur true timeRemaining()
timeRemaining() requestIdleCallback Votre tâche ne se verra pas attribuer au plus de 50 millisecondes de temps d'exécution. Il n'arrête pas les tâches qui dépassent cette limite, mais il est préférable d'appeler à nouveau
// 要运行的函数数组
var task = [
background1,
background2,
background3
];
if ('requestIdleCallback' in window) {
// requestIdleCallback 受支持
requestIdleCallback(backgroundTask);
} else {
// 不支持 - 尽快运行所有任务
while (task.length) {
setTimeout(task.shift(), 1);
}
}
// requestIdleCallback 回调函数
function backgroundTask(deadline) {
// 如果可能，运行下一个任务
while (deadline.timeRemaining() > 0 && task.length > 0) {
task.shift()();
}
// 如果需要，安排进一步的任务
if (task.length > 0) {
requestIdleCallback(backgroundTask);
}
}requestIdleCallback Actions qui ne devraient pas être effectuées dans
requestIdleCallback Comme Paul Lewis le souligne dans son article de blog sur ce sujet, le travail que vous effectuez dans requestAnimationFrame devrait être divisé en petits morceaux. Il ne fonctionne pas pour rien avec un temps d'exécution imprévisible (comme l'exploitation du DOM, ce qui est mieux fait en utilisant le rappel
requestIdleCallback Prise en charge du navigateur requestIdleCallback est une caractéristique expérimentale, et les spécifications changent toujours, alors ne soyez pas surpris lorsque vous rencontrez des modifications de l'API. Il est pris en charge dans Chrome 47… Ceci devrait être disponible d'ici la fin de 2015. Opera devrait également obtenir cette fonctionnalité bientôt. Microsoft et Mozilla envisagent d'utiliser l'API, et cela semble prometteur. Apple n'a aucune nouvelle comme d'habitude. Si vous voulez l'essayer aujourd'hui, la meilleure façon est d'utiliser Chrome Canary (une version mise à jour de Chrome qui n'est pas aussi bonne que la première, mais a les dernières fonctionnalités intéressantes). Paul Lewis (mentionné ci-dessus) crée une cale simple requestIdleCallback. Cela met en œuvre la description de l'API, mais ce n'est pas un polyfill qui peut simuler le comportement de détection d'inactivité du navigateur. Il utilise la méthode d'utilisation de setTimeout comme l'exemple ci-dessus, mais c'est une bonne option si vous souhaitez utiliser l'API sans détection d'objets et charge de code. Bien qu'il y ait un support limité aujourd'hui, requestIdleCallback peut être un outil intéressant pour vous aider à maximiser vos performances Web. Mais que pensez-vous? J'adorerais entendre vos réflexions dans la section des commentaires ci-dessous.
Tâches d'arrière-plan Dans JavaScript L'API est un outil puissant qui permet aux développeurs de planifier des tâches en arrière-plan, même si le thread principal est inactif. Cette API convient particulièrement aux tâches qui nécessitent beaucoup de demandes de calcul ou de réseau, car il permet de réaliser ces tâches sans bloquer le thread principal et mener potentiellement à une mauvaise expérience utilisateur. L'API de tâche backend fait partie de la plus grande API Web fournie par les navigateurs modernes, offrant une manière plus efficace et axée sur les performances de gérer les tâches backend que les méthodes traditionnelles setTimeout ou setInterval.
setTimeout et setInterval? setTimeout et setInterval sont des méthodes traditionnelles en JavaScript qui sont utilisées pour planifier des tâches pour s'exécuter après un retard spécifique ou à intervalles réguliers. Cependant, ces approches ont certaines limites, en particulier en termes de performances. Ils fonctionnent sur le fil principal, ce qui signifie que s'ils prennent trop de temps à terminer, ils peuvent bloquer d'autres tâches et peuvent conduire à une mauvaise expérience utilisateur. D'un autre côté, l'API de la tâche d'arrière-plan exécute des tâches en arrière-plan, séparées du fil principal. Cela signifie qu'il peut gérer des tâches plus intensives sans affecter les performances du fil principal.
L'API de tâche backend est un ajout relativement nouveau à l'API Web fournie par les navigateurs modernes, il peut donc ne pas être pris en charge dans tous les navigateurs. Lorsque vous prévoyez d'utiliser une API dans votre projet, il est toujours préférable de vérifier le niveau de support actuel de l'API que vous prévoyez d'utiliser. Des sites Web comme puis-je utiliser fournissent les dernières informations sur les niveaux de support de diverses API dans différents navigateurs.
Pour utiliser l'API de la tâche d'arrière-plan pour planifier les tâches, vous pouvez utiliser la méthode requestIdleCallback. Cette méthode prend la fonction de rappel comme son premier paramètre, qui sera exécuté lorsque le navigateur est inactif. Voici un exemple de base:
if ('requestIdleCallback' in window) {
// requestIdleCallback 受支持
requestIdleCallback(backgroundTask);
} else {
// 不支持 - 执行其他操作
setTimeout(backgroundTask1, 1);
setTimeout(backgroundTask2, 1);
setTimeout(backgroundTask3, 1);
} Si vous devez annuler les tâches d'arrière-plan planifiées à l'aide de la méthode requestIdleCallback, vous pouvez utiliser la méthode cancelIdleCallback. Cette méthode prend l'ID renvoyé par requestIdleCallback comme paramètre. Voici un exemple:
requestIdleCallback(backgroundTask, { timeout: 3000 });requestIdleCallback? requestIdleCallback spécifie le temps maximum (en millisecondes), le navigateur doit attendre avant d'exécuter le rappel, même s'il n'est pas inactif. Ceci est utile si vos tâches d'arrière-plan doivent fonctionner dans un délai spécifique.
Les erreurs de traitement des tâches d'arrière-plan planifiées à l'aide de l'API de la tâche d'arrière-plan sont similaires aux erreurs de gestion dans tout autre code JavaScript. Vous pouvez utiliser le bloc Try / Catch pour attraper les erreurs qui se produisent lors de l'exécution de la tâche. Voici un exemple:
// 要运行的函数数组
var task = [
background1,
background2,
background3
];
if ('requestIdleCallback' in window) {
// requestIdleCallback 受支持
requestIdleCallback(backgroundTask);
} else {
// 不支持 - 尽快运行所有任务
while (task.length) {
setTimeout(task.shift(), 1);
}
}
// requestIdleCallback 回调函数
function backgroundTask(deadline) {
// 如果可能，运行下一个任务
while (deadline.timeRemaining() > 0 && task.length > 0) {
task.shift()();
}
// 如果需要，安排进一步的任务
if (task.length > 0) {
requestIdleCallback(backgroundTask);
}
}L'API de tâche backend fait partie de l'API Web fournie par les navigateurs modernes, il n'est donc pas disponible dans Node.js par défaut. Cependant, il existe d'autres moyens d'exécuter des tâches d'arrière-plan dans Node.js, comme l'utilisation de threads ouvriers ou de processus enfants.
L'API de la tâche d'arrière-plan ne renvoie pas de promesse, il ne peut donc pas être utilisé directement avec Async / Await. Cependant, si vous devez l'utiliser dans un contexte asynchrone, vous pouvez envelopper la méthode requestIdleCallback dans une promesse. Voici un exemple:
window.requestIdleCallback(() => {
// 您的后台任务在此处
});Les tâches d'arrière-plan L'API est utile pour toute tâche qui nécessite beaucoup de demandes de calcul ou de réseau, car elle permet d'exécuter ces tâches sans bloquer le thread principal. Certains exemples de cas d'utilisation peuvent inclure la récupération et le traitement des données de l'API, la réalisation de calculs complexes ou la mise à jour de l'interface utilisateur en fonction des interactions utilisateur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
