Points de base
Cet article explique comment créer une extension de texte à dispection Chrome de navigateur (TTS) qui utilise une API de synthèse vocale HTML5 ou une API tierce pour convertir le texte en surbrillance ou le contenu du presse-papiers en parole.
Les extensions de chrome contiennent généralement des fichiers manifestes (fichiers de métadonnées), des images (telles que des ic?nes d'extension), des fichiers HTML, des fichiers JavaScript et d'autres ressources (tels que des feuilles de style).
L'extension TTS attend que l'utilisateur clique sur son ic?ne ou appuyez sur une cure de tête spécifique (Shift Y), puis convertit le contenu de texte ou de presse-papiers en surbrillance.
Le code de l'extension comprend des scripts d'arrière-plan et des scripts de contenu, des autorisations pour accéder aux balises actives et à des tableaux de gamme d'utilisateurs, ainsi qu'à la vérification du text en surbrillance ou du contenu du presse-papiers, à l'initialisation des extensions, à l'ajout de raccourcis clavier et à la conversion du texte en méthode vocale.
Si l'API de synthèse vocale HTML5 n'est pas disponible, l'extension utilisera une API tierce telle que la voix RSS pour convertir le texte en parole. L'extension comprend également une correction de bogue pour résoudre le problème que Chrome arrête la prononciation après 200 à 300 mots.
Cet article a été évalué par des pairs par Marc Towler. Merci à tous les pairs examinateurs de SitePoint pour rendre le contenu de SitePoint parfait!
Le texte à la parole (également connu sous le nom de synthèse de la parole ou TTS) est une fa?on de produire artificiellement la parole humaine. Ce n'est pas nouveau, selon Wikipedia, les gens ont essayé de créer des machines qui peuvent produire une voix humaine pendant au moins mille ans.
TTS devient de plus en plus courant dans nos vies aujourd'hui et tout le monde peut en bénéficier. Nous le démontrerons en créant une extension chromée qui convertit le texte en parole. HTML5 nous apporte une API de synthèse de la parole qui permet à toute application Web de convertir gratuitement des cha?nes de texte arbitraires en parole et de jouer aux utilisateurs.
Les extensions de chrome contiennent généralement les éléments suivants:
- Fichier de talents (fichier requis contenant des métadonnées)
- Image (comme l'ic?ne pour l'extension)
- Fichier HTML (par exemple, une fenêtre contextuelle qui appara?t lorsque l'utilisateur clique sur l'ic?ne de l'extension)
- Fichiers JavaScript (tels que des scripts de contenu et / ou d'arrière-plan qui seront expliqués plus loin)
- Toutes autres ressources que l'application peut utiliser (comme les feuilles de style)
à propos de la page à l'extension vocale
En raison de la popularité du chrome et de la montée des TT, nous créerons une extension chromée qui convertit le texte en voix. L'extension attendra que l'utilisateur clique sur son ic?ne ou appuyez sur une cure de putain spéciale (Shift Y), puis essayez de trouver ce que l'utilisateur met en évidence sur la page qu'il consulte actuellement, ou essayez de trouver ce qui est copié dans son presse-papiers. Si quelque chose est trouvé, il essaiera d'abord de le convertir en parole en utilisant l'API de synthèse de la parole HTML5, et si cette API n'est pas disponible, une API tierce est appelée.
Bases de l'extension chromée
Chaque extension Chrome nécessite un fichier nommé Manifest.json. Le manifeste est un fichier JSON contenant des données essentielles à l'application, du nom, de la description, de l'ic?ne et de l'auteur Soyez autorisé que l'utilisateur doit accorder) ou quels fichiers exécutent lorsque l'utilisateur navigue sur un site Web spécifique.
{
"manifest_version": 2,
"name": "Page to Speech",
"description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
"author": "Ivan Dimov",
"version": "1.0",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
Notre liste commence par le nom, la description, l'auteur, la version et l'ic?ne de l'extension. Vous pouvez fournir de nombreuses ic?nes avec différentes tailles dans l'objet ic?nes.
"background": {
"scripts": ["background.min.js"]
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": [ "polyfill.min.js", "ext.min.js"],
"run_at": "document_end"
}],
Ensuite, nous définissons un script d'arrière-plan appelé background.min.js dans l'objet d'arrière-plan (notez que nous utilisons un fichier de minimisation). Les scripts d'arrière-plan sont des scripts de longue date qui continueront à s'exécuter jusqu'à ce que le navigateur de l'utilisateur soit fermé ou que l'extension soit désactivée.
Après, nous avons un tableau de contenu_scripts qui demande à Chrome de charger deux fichiers JavaScript sur chaque demande de site Web en raison de wildcards " http: // * / *" et "https: // * / *" "et" https: // * / * "". Contrairement aux scripts d'arrière-plan, les scripts de contenu peuvent accéder au DOM du site Web réel que l'utilisateur visite. Les scripts de contenu peuvent à la fois lire et modifier le dom de toute page Web intégrée. Par conséquent, nos polyfill.min.js et ext.min.js pourront lire et modifier toutes les données sur chaque page Web .
"browser_action": {
"default_icon": "speech.png"
},
"permissions": [
"activeTab",
"clipboardRead"
]
}
attendez! Nous avons également un tableau appelé autorisation, que nous demandons d'accéder uniquement à la page Web (balise d'activité) actuellement ouverte par l'utilisateur. Nous demandons également une autre autorisation appelée ClipboardRead, qui nous permettra de lire le presse-papiers de l'utilisateur (afin que nous puissions convertir son contenu en voix).
écriture d'une page pour exprimer Chrome Extension
Tout d'abord, nous créons notre seul script d'arrière-plan qui connecte un écouteur d'événements qui tirera lorsque l'utilisateur clique sur l'ic?ne de l'extension. Lorsque cela se produit, nous appellerons la fonction SendMessage, qui utilise la méthode chrome.tabs.sendMessage (Tabid, Message, rappel) pour envoyer un message à notre script de contenu (le script de contenu peut lire le DOM et découvrir ce que l'utilisateur met en évidence . Contenu et / ou contenu placé par l'utilisateur dans le presse-papiers). Nous utilisons la méthode chrome.tabs.query pour envoyer un message à la page onglet actuellement ouverte - car c'est ce qui nous intéresse et ce à quoi nous pouvons accéder - les paramètres de la méthode incluent une fonction de rappel qui utilisera les éléments suivants : Interrogez l'appel de paramètre pour les pages d'onglet correspondantes.
chrome.browserAction.onClicked.addListener(function (tab) {
//fired when the user clicks on the ext's icon
sendMessage();
});
function sendMessage() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {action: "pageToSpeech"}, function(response) {});
});
}
Maintenant, plus la chose verbale est notre script de contenu. Nous créons un objet pour maintenir certaines données liées à l'extension, puis définissons notre méthode d'initialisation.
initialize: function() {
if (!pageToSpeech.hasText()) { return;}
if (!pageToSpeech.trySpeechSynthesizer()) {
pageToSpeech.trySpeechApi();
}
},
Cette méthode vérifie si l'utilisateur n'est pas mis en évidence avec du texte ou rien dans le presse-papiers, et dans ce cas, il n'est renvoyé que. Sinon, il essaiera de générer une parole en utilisant l'API de synthèse de la parole HTML5. Si cela échoue, il finira par essayer d'utiliser une API tierce.
Comment vérifier le texte effectue plusieurs actions. Il essaie d'obtenir un objet contenant du texte en surbrillance à l'aide de la méthode GetSelection () intégrée et de le convertir en une cha?ne de texte à l'aide de ToString (). Ensuite, si le texte n'est pas mis en surbrillance, il essaiera de trouver le texte dans le presse-papiers de l'utilisateur. Il le fait en ajoutant un élément d'entrée à la page, en le concentrant, en déclenchant un événement de pate avec execcommand ('pate'), puis en enregistrant le texte collé dans cette entrée dans une propriété. Ensuite, il efface l'entrée. Dans les deux cas, il renvoie ce qu'il a trouvé.
{
"manifest_version": 2,
"name": "Page to Speech",
"description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
"author": "Ivan Dimov",
"version": "1.0",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
Pour permettre à l'utilisateur d'exécuter la conversion de texte vocale à l'aide de Howkkeys (codé en dur comme Shift Y), nous initialisons un tableau et configurons un écouteur d'événements pour les événements OnKeyDown et OnkeyUp. Dans l'auditeur, nous stockons un index correspondant au Keycode de la touche enfoncée, qui est dérivé du résultat de comparaison du type d'événement E.Type et de la clé, et est une valeur booléenne. Par conséquent, chaque fois qu'une touche est enfoncée, la valeur de l'indice de clé correspondant sera définie sur true, et chaque fois qu'une touche est libérée, la valeur de l'index sera changée en false. Donc, si les deux index 16 et 84 contiennent des valeurs vraies, nous savons que l'utilisateur utilise nos raccourcis clavier, nous allons donc initialiser le texte en conversion de la parole.
"background": {
"scripts": ["background.min.js"]
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": [ "polyfill.min.js", "ext.min.js"],
"run_at": "document_end"
}],
Pour convertir le texte en discours, nous comptons sur la méthode TryspeEchSyntheSizer (). Si la synthèse de la parole HTML5 existe dans le navigateur de l'utilisateur (Window.SpeechSynthesis), nous savons que l'utilisateur peut l'utiliser, nous vérifions donc si le discours est en cours d'exécution (nous savons s'il fonctionne à travers la pagetospeech.data.speechinprogress booléen) . Si la voix est en cours, nous arrêterons la voix actuelle (car TryspeechSyntheSizer commencera une nouvelle voix, nous ne voulons pas faire deux sons en même temps). Nous définissons ensuite la parole sur true, et chaque fois que le discours est terminé, nous relachons la propriété sur une fausse valeur.
Maintenant, je ne veux pas expliquer pourquoi nous utilisons SpeemberCumberanceChunker, mais c'est un correctif de bogue lié à la synthèse de la parole de Chrome après avoir émis 200 à 300 mots. Fondamentalement, il divise notre cha?ne de texte en de nombreux morceaux plus petits (120 mots dans notre cas) et appelle l'API de synthèse de la parole en utilisant un bloc après l'autre.
"browser_action": {
"default_icon": "speech.png"
},
"permissions": [
"activeTab",
"clipboardRead"
]
}
Enfin, si l'API de synthèse vocale HTML5 n'est pas disponible, nous essaierons une API. Nous avons les mêmes propriétés pour savoir si nous devons arrêter l'audio déjà en cours d'exécution. Nous créons ensuite directement un nouvel objet audio et passons à l'URL du point de terminaison de l'API souhaité, car l'API de démonstration que nous avons sélectionné diffusée directement diffuse l'audio. Il nous suffit de passer la touche API et le texte à convertir. Nous vérifions également si l'audio déclenche une erreur. Dans ce cas, nous avons juste besoin de montrer à l'utilisateur une alerte que nous ne pouvons pas aider pour le moment (nous testons le code de cette API spécifique, Voice RSS, permettant 300 demandes sur la hiérarchie gratuite).
{
"manifest_version": 2,
"name": "Page to Speech",
"description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
"author": "Ivan Dimov",
"version": "1.0",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
Enfin, en dehors de toute portée locale, nous appelons la méthode AddhotKeys, qui commencera à attendre que l'utilisateur appuie sur la bonne cure de putain, et nous configurons un écouteur qui attendra que le message soit re?u du script d'arrière-plan. Si vous recevez le message correct ( Speakhighlight ) ou appuyez sur la touche de putain, nous initialiserons l'objet de conversion du texte en parole.
"background": {
"scripts": ["background.min.js"]
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": [ "polyfill.min.js", "ext.min.js"],
"run_at": "document_end"
}],
Conclusion
voix, nous avons une belle extension chromée qui convertit le texte en voix. Le concept ici peut être utilisé pour créer des extensions de chrome à différentes fins. Avez-vous construit des extensions de chrome intéressantes, ou voulez-vous en construire une? S'il vous pla?t laissez-moi savoir dans les commentaires!
Si vous aimez cette idée et que vous souhaitez le développer davantage, vous pouvez trouver le code complet dans notre référentiel GitHub. Si vous souhaitez le tester, vous pouvez trouver une version de production de l'extension dans le Chrome Web Store.
Références: http://ipnx.cn/link/B8B0E04211DCE1C104DFCDB685C9B9AD > Texte à la parole Chrome Extension FAQ
Comment installer le texte pour exprimer Chrome Extension?L'installation de l'extension de chrome text-to-discours est un processus facile. Tout d'abord, ouvrez votre navigateur Google Chrome et accédez au Chrome Web Store. Dans la barre de recherche, entrez le nom de l'extension que vous souhaitez installer, telle que "lire à haute voix" ou "text-to-dispeach (TTS)". Cliquez sur l'extension dans les résultats de la recherche et cliquez sur le bouton "Ajouter à Chrome". Une fenêtre contextuelle semblera demander une confirmation et cliquer sur "Ajouter une extension". L'extension sera installée et une ic?ne appara?tra sur la barre d'outils de votre navigateur.
Puis-je personnaliser ma voix dans mon texte pour parler de l'extension chromée?
Oui, la plupart des extensions de chrome de texte à la parole vous permettent de personnaliser votre discours. Vous pouvez généralement choisir parmi une variété de voix, y compris des voix masculines et féminines dans différents accents et langues. Pour personnaliser votre voix, cliquez sur l'ic?ne d'extension dans la barre d'outils du navigateur et accédez au menu Paramètres ou Options. Ici, vous devez trouver des options pour changer la voix, la vitesse, le ton et le volume.
Le texte de l'extension de chrome du texte est-il gratuit?
De nombreuses extensions de chrome de texte vocale sont gratuites, mais certaines peuvent facturer une somme modique pour offrir des fonctionnalités avancées. Ces fonctionnalités avancées peuvent inclure d'autres fichiers audio sans vocation, utilisation sans publicité. Assurez-vous de vérifier les détails de l'extension dans la boutique en ligne Chrome avant l'installation.
Puis-je utiliser le texte pour exprimer Chrome Extension hors ligne?
Certaines extensions de texte chromées peuvent être utilisées hors ligne, mais toutes les extensions ne peuvent pas le faire. Cela dépend de la fa?on dont l'extension est con?ue. Si une utilisation hors ligne est importante pour vous, vérifiez la description de l'extension dans le Chrome Web Store ou les paramètres de l'extension après l'installation.
Comment utiliser l'extension du texte pour parler de chrome?
Pour utiliser l'extension du texte pour parler de chrome, par la pose, par la page Web que vous souhaitez lire à haute voix. Ensuite, cliquez sur l'ic?ne d'extension de la barre d'outils du navigateur. Certaines extensions commenceront immédiatement à lire la page à haute voix, tandis que d'autres peuvent vous obliger à sélectionner le texte que vous souhaitez lire. Vous pouvez généralement utiliser des contr?les dans la fenêtre contextuelle d'extension pour faire une pause, reprendre ou arrêter de lire.
Puis-je utiliser le texte pour exprimer Chrome Extension sur n'importe quel site Web?
La plupart des extensions de texte pour chrome devraient fonctionner sur n'importe quel site Web, avec des exceptions possibles. Certains sites Web peuvent avoir des problèmes de compatibilité avec certaines extensions, ou des extensions peuvent ne pas être en mesure de lire certains types de contenu, tels que des images ou des vidéos. Si vous avez des problèmes, essayez d'utiliser une extension différente ou contactez le développeur de l'extension pour l'assistance.
Mes données sont-elles sans danger dans l'extension du texte à la parole?
La plupart des extensions de chrome de texte vocale doivent respecter votre confidentialité et ne collecter pas ou ne partageront pas vos données sans votre consentement. Cependant, il est préférable de vérifier la politique de confidentialité de l'extension avant l'installation. Si vous n'êtes pas satisfait de cette politique, envisagez de rechercher d'autres extensions.
Puis-je modifier la vitesse de la parole dans le texte en discours dans l'extension chromée?
Oui, la plupart des extensions de chrome de texte à la parole vous permettent d'ajuster la vitesse de votre discours. Cela peut généralement être fait dans le menu Paramètres ou options de l'extension. Vous pouvez généralement choisir une gamme de vitesses, de très lent à très rapidement.
Puis-je utiliser le texte pour exprimer une extension Chrome dans d'autres navigateurs?
L'extension du texte à la parole est con?ue pour s'exécuter dans Google Chrome et peut ne pas s'exécuter dans d'autres navigateurs. Cependant, de nombreux développeurs d'extensions créeront également des versions de leurs extensions pour d'autres navigateurs, tels que Firefox ou Edge. Veuillez consulter le site Web du développeur ou la boutique d'extension pertinente pour ces navigateurs pour voir s'il y a une version disponible.
Puis-je utiliser l'extension du texte Chrome sur mon appareil mobile?
Certains extensions de texte pour chrome peuvent fonctionner pour Chrome sur Android ou iOS, mais toutes les extensions ne sont pas disponibles. Cela dépend de la fa?on dont l'extension est con?ue. Si l'utilisation mobile est importante pour vous, vérifiez la description de l'extension dans la boutique en ligne Chrome ou les paramètres de l'extension après l'installation.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment faire une demande HTTP dans Node.js?
Jul 13, 2025 am 02:18 AM
Il existe trois fa?ons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple
Types de données JavaScript: référence primitive vs
Jul 13, 2025 am 02:43 AM
Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la cha?ne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.
React vs Angular vs Vue: Quel framework JS est le meilleur?
Jul 05, 2025 am 02:24 AM
Quel framework JavaScript est le meilleur choix? La réponse est de choisir la plus appropriée selon vos besoins. 1.RIATT est flexible et gratuit, adapté aux projets moyens et grands qui nécessitent une personnalisation élevée et des capacités d'architecture d'équipe; 2. Angular fournit des solutions complètes, adaptées aux applications au niveau de l'entreprise et à la maintenance à long terme; 3. Vue est facile à utiliser, adaptée à des projets de petite et moyenne taille ou à un développement rapide. De plus, s'il existe une pile technologique existante, la taille de l'équipe, le cycle de vie du projet et si le RSS est nécessaire sont également des facteurs importants dans le choix d'un cadre. En bref, il n'y a pas absolument le meilleur cadre, le meilleur choix est celui qui convient à vos besoins.
Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc.
Jul 08, 2025 pm 02:27 PM
Bonjour, développeurs JavaScript! Bienvenue dans JavaScript News de cette semaine! Cette semaine, nous nous concentrerons sur: le différend de marque d'Oracle avec Deno, les nouveaux objets Time JavaScript sont pris en charge par les navigateurs, les mises à jour Google Chrome et certains outils de développeurs puissants. Commen?ons! Le différend de marque d'Oracle avec la tentative de Deno Oracle d'enregistrer une marque "JavaScript" a provoqué la controverse. Ryan Dahl, le créateur de Node.js et Deno, a déposé une pétition pour annuler la marque, et il pense que JavaScript est un niveau ouvert et ne devrait pas être utilisé par Oracle
Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript
Jul 08, 2025 am 02:40 AM
La promesse est le mécanisme central pour gérer les opérations asynchrones en JavaScript. Comprendre les appels de cha?ne, la gestion des erreurs et les combinants est la clé pour ma?triser leurs applications. 1. L'appel de la cha?ne renvoie une nouvelle promesse à travers. Puis () pour réaliser la concaténation des processus asynchrones. Chaque .then () re?oit le résultat précédent et peut renvoyer une valeur ou une promesse; 2. La gestion des erreurs doit utiliser .catch () pour attraper des exceptions pour éviter les défaillances silencieuses, et peut renvoyer la valeur par défaut dans Catch pour continuer le processus; 3. Combinateurs tels que promesse.all () (réussi avec succès uniquement après tout succès), promesse.race () (le premier achèvement est retourné) et promesse.allsetTled () (en attente de toutes les achèvements)
Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?
Jul 08, 2025 am 02:43 AM
Cacheapi est un outil fourni par le navigateur pour mettre en cache les demandes de réseau, qui est souvent utilisée en conjonction avec travailleur de service pour améliorer les performances du site Web et l'expérience hors ligne. 1. Il permet aux développeurs de stocker manuellement des ressources telles que des scripts, des feuilles de style, des photos, etc.; 2. Il peut faire correspondre les réponses du cache en fonction des demandes; 3. Il prend en charge la suppression des caches spécifiques ou la nettoyage du cache entier; 4. Il peut mettre en ?uvre des stratégies de priorité de cache ou de priorité de réseau grace à l'écoute des événements Fetch; 5. Il est souvent utilisé pour le support hors ligne, accélérez la vitesse d'accès répétée, préchargement des ressources clés et du contenu de mise à jour des antécédents; 6. Lorsque vous l'utilisez, vous devez faire attention au contr?le de la version du cache, aux restrictions de stockage et à la différence entre le mécanisme de mise en cache HTTP.
Tire de tirage.
Jul 06, 2025 am 02:36 AM
Des méthodes intégrées de la matrice JavaScript telles que .map (), .filter () et .reduce () peuvent simplifier le traitement des données; 1) .map () est utilisé pour convertir les éléments un en un pour générer de nouveaux tableaux; 2) .filter () est utilisé pour filtrer les éléments par condition; 3) .reduce () est utilisé pour agréger les données en tant que valeur unique; Une mauvaise utilisation doit être évitée lorsqu'elle est utilisée, entra?nant des effets secondaires ou des problèmes de performance.
JS Roundup: une plongée profonde dans la boucle d'événement JavaScript
Jul 08, 2025 am 02:24 AM
La boucle d'événement de JavaScript gère les opérations asynchrones en coordonnant les piles d'appels, les webapis et les files d'attente de taches. 1. La pile d'appels exécute du code synchrone, et lors de la rencontre de taches asynchrones, il est remis à WebAPI pour le traitement; 2. Une fois que le WebAPI a terminé la tache en arrière-plan, il met le rappel dans la file d'attente correspondante (macro tache ou micro tache); 3. La boucle d'événement vérifie si la pile d'appels est vide. S'il est vide, le rappel est retiré de la file d'attente et poussé dans la pile d'appels pour l'exécution; 4. Micro taches (comme Promise. puis) ??prendre la priorité sur les taches macro (telles que Settimeout); 5. Comprendre la boucle d'événements permet d'éviter de bloquer le thread principal et d'optimiser l'ordre d'exécution du code.
