Introduction détaillée du mécanisme d'exécution, de la boucle d'événements et du cache du navigateur dans js (image et texte)

Cet article vous apporte une introduction détaillée (images et textes) sur le mécanisme de fonctionnement, la boucle d'événements et le cache du navigateur dans js. Il a une certaine valeur de référence. Les amis dans le besoin pourront s'y référer.

Mécanisme de rendu :
Qu'est-ce que DOCTYPE et son rôle ?
DTD (définition du type de document) est une série de règles de syntaxe utilisées pour définir le type de fichier XML ou (X)HTML. Le navigateur utilisera la DTD pour déterminer le type de document, détermine. quel protocole utiliser pour l'analyse et change de mode de navigateur.
DOCTYPE est utilisé pour déclarer les types de documents et les spécifications DTD. L'une de ses principales utilisations est la vérification de la légalité des fichiers. Si le code du fichier est illégal, certaines erreurs se produiront lorsque le navigateur l'analysera. DOCTYPE de html5 :. HTML 4.01 Strict : Cette DTD contient tous les éléments et attributs HTML, à l'exception des éléments de présentation et obsolètes. HTML 4.01 Transitionnel : Cette DTD contient tous les éléments et attributs HTML, y compris les éléments de présentation et obsolètes.

Le processus de rendu du navigateur ?

Qu'est-ce que le Reflow du navigateur ?
Définition du Reflow : Chaque élément de la structure DOM a sa propre boîte (Modèle), celles-ci nécessitent le navigateur pour calculer selon différents styles et placer l'élément là où il doit apparaître en fonction des résultats du calcul. Ce processus est appelé Reflow ; chaque nœud DOM n'est pas fixe. Lors de l'utilisation de dom, par exemple : un p avec du contenu, CSS. peut modifier le dom. Alors, que doit faire le navigateur après une re-modification ? Cela nécessite de relancer Reflow, alors quand Reflow sera-t-il déclenché ? Chaque DOM a une méthode de Reflow. Dans quelles circonstances sera-t-il déclenché ? 1. Lorsque vous ajoutez, supprimez ou modifiez un nœud DOM, cela provoquera un Reflow ou un Repaint. Par exemple, si vous ajoutez un sous-élément à un p, cela provoquera un Reflow ou un Repaint. Le sous-élément doit être affiché. Sur l'écran, vous devez modifier l'arbre dom et l'arbre de règles d'origine, ce qui nécessite Reflow et Repaint ; 2. Lorsque vous déplacez la position du dom ou créez une animation ; Style CSS ; 4. , lorsque vous redimensionnez la fenêtre (la version mobile n'a pas ce problème), ou lors du défilement ; 5. Lorsque vous modifiez la police par défaut de la page Web.

Qu'est-ce que la repeinture du navigateur ?
La définition de Repaint : Lorsque la position, la taille et d'autres attributs de diverses cases, tels que la couleur, la taille de la police, etc., sont déterminés, le navigateur redessine ensuite ces éléments en fonction Les caractéristiques respectives sont à nouveau dessinées et le contenu de la page apparaît. Ce processus est appelé Repaint. Les modifications apportées au dom et aux modifications apportées au css déclencheront le redessinage de Repaint. Tant que l'affichage sur la page change, elle sera redessinée.

Qu'est-ce que la mise en page du navigateur ?

Le mécanisme d'exécution de JS
javascript est monothread, c'est-à-dire que javascript ne peut faire qu'une seule chose à la fois. File d'attente des tâches : Nous savons tous qu'il existe des événements et le concept de programmation asynchrone. Puisqu'il s'agit d'une programmation monothread, c'est-à-dire synchrone, pourquoi y a-t-il encore une programmation asynchrone ? Par exemple, lors d'un événement, si je clique sur quelque chose, je peux alors utiliser la fonction de rappel ou ajuster la réponse de l'événement pour obtenir l'objet. Il s'agit d'un processus asynchrone. La communication Ajax utilise la liaison d'événements. Si je la supprime, je n'ai pas à m'en soucier. Lorsque le serveur répond, le navigateur appellera automatiquement le dernier événement lié (fonction de traitement). ce qui semble entrer en conflit avec le monothread lui-même, alors comment fait-il ? Cela se fait via la file d'attente des tâches. Dans la file d'attente des tâches, il existe un autre concept appelé tâche synchrone et tâche asynchrone. La fonction setTimeout est une tâche asynchrone. Les instructions lors de l'exécution synchrone de JavaScript sont appelées tâches synchrones. Lorsque vous rencontrez setTimeout, setInterval est appelé une tâche asynchrone. JavaScript est exécuté de haut en bas. La première phrase est exécutée en premier : Console.log(1); la deuxième phrase : setTimeout(function(){console.log(2);}, 0); Si la tâche asynchrone doit être suspendue, setTimeout n'est pas exécuté en premier, JavaScript continue d'exécuter la troisième phrase : Console.log(3) ; exécute la troisième phrase de la tâche synchrone après l'exécution de la troisième phrase ; est terminé, puis gérera les tâches asynchrones. Les threads uniques et les files d'attente de tâches sont séquentiels.Il existe des tâches synchrones et des tâches asynchrones dans les tâches Lors de l'exécution du mécanisme d'exécution JavaScript, les tâches synchrones sont traitées, les tâches asynchrones recevront une réponse, même si setTimeout. définit un délai de 0.

Recommandations associées :

Exemple d'analyse du mécanisme de boucle d'événements JS

Mécanisme de traitement des événements de compatibilité du navigateur Javascript

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!