Une fois que l'agent utilisateur arrête d'analyser le document, l'agent utilisateur doit exécuter les étapes suivantes :
1. Définissez la préparation actuelle du document sur « interactif » et le point d'insertion sur non défini.
Retirez tous les nœuds de la pile d'éléments ouverts.
2. Si la liste des scripts qui s'exécuteront une fois l'analyse du document terminée n'est pas vide, exécutez ces sous-étapes :
2.1 Faites tourner la boucle d'événements jusqu'à ce que le premier script de la liste des scripts qui s'exécuteront lorsque le document aura terminé l'analyse ait son indicateur « prêt à être exécuté par l'analyseur » défini et que le document de l'analyseur n'ait pas de feuille de style qui bloque les scripts.
2.2 Exécutez le premier script de la liste des scripts qui s'exécuteront lorsque l'analyse du document sera terminée.
2.3 Supprimez le premier élément de script de la liste des scripts qui s'exécuteront une fois l'analyse du document terminée (c'est-à-dire décalez la première entrée de la liste).
2.4 Si la liste des scripts qui s'exécuteront une fois l'analyse du document terminée n'est toujours pas vide, répétez à nouveau ces sous-étapes à partir de la sous-étape 1.
3. Mettez en file d'attente une tâche pour déclencher un événement simple qui fait des bulles nommé DOMContentLoaded au niveau du document.
L'événement DOMContentLoaded est déclenché lorsque le document a été complètement chargé et analysé, sans attendre la fin du chargement des feuilles de style, des Limpact de JS, CSS et img sur les compétences DOMContentLoaded event_javascripts et des sous-cadres
Remarque : La feuille de style charge l'exécution du script de bloc, donc si vous avez un <font face="NSimsun"><script></script></font> après un <font face="NSimsun"><link rel="stylesheet" ...></font>, la page ne terminera pas l'analyse – et DOMContentLoaded ne se déclenchera pas – tant que la feuille de style n'est pas chargée.
这么看来，至少可以得出这么一个理论：DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。
它的触发时机是:加载完页面，解析完所有标签（不包括执行CSS et JS），并如规范中所说的设置 <font face="NSimsun">interactive</font> 和执行每个静态的script标签中的JS，然后触发。
Les fichiers JS, les fichiers CSS et les CSS.于它前面的CSS计算出来的样式。
实践是检验真理的唯一标准
实验1：DOMContentLoaded事件不直接等待CSS文件、图片的加载完成
index.html :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/main.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<p>Content</p>
<img src="./img/chrome-girl.jpg" alt="L'impact de JS, CSS et img sur les compétences DOMContentLoaded event_javascript" >
</body>
</html>
Chrome开发者工具的Timeline面板可以帮我们记录下浏览器的一举一动. Il s'agit de DOMContentLoaded, et de la fonction de chargement en premier. peinture, survolez les conseils类的对吧！）。
实验2：DOMContentLoaded事件需要等待JS执行完才触发
index.html :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
console.timeStamp('Inline script before link in head');
window.addEventListener('DOMContentLoaded', function(){
console.timeStamp('DOMContentLoaded event');
});
</script>
<link rel="stylesheet" type="text/css" href="./css/main.css" rel="external nofollow" rel="external nofollow" >
<script type="text/javascript">
console.timeStamp('Inline script after link in head');
</script>
</head>
<body>
<p>Content</p>
<img src="./img/chrome-girl.jpg" alt="L'impact de JS, CSS et img sur les compétences DOMContentLoaded event_javascript" >
<script type="text/javascript" src="./js/main.js"></script>
</body>
</html>
Copier après la connexion
main.js:
console.timeStamp('External script after link in body');
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
console.timeStamp('Inline script in head');
window.addEventListener('DOMContentLoaded', function(){
console.timeStamp('DOMContentLoaded event');
});
</script>
</head>
<body>
<p>Content</p>
<img src="./img/chrome-girl.jpg" alt="L'impact de JS, CSS et img sur les compétences DOMContentLoaded event_javascript" >
<script type="text/javascript" src="./js/main.js"></script>
</body>
</html>
Copier après la connexion
Il est très surprenant que dans une page avec JS mais pas de CSS, img puisse effectivement commencer à décoder et dessiner (paint) immédiatement après avoir reçu les données. En d'autres termes, JS ne bloque pas l'affichage d'img ! Ceci est différent de notre compréhension précédente du concept traditionnel selon lequel JS bloquerait les ressources img. Il semble que Chrome ait apporté de nouvelles optimisations pour le chargement et l'affichage de img.
La méthode $(document).ready() que nous utilisons couramment dans jQuery consiste à surveiller l'événement DOMContentLoaded (bien sûr, elle fournit également une solution de rétrogradation en interne en simulant l'événement DOMContentLoaded et en surveillant l'événement onload). Il est généralement recommandé d'enregistrer les événements pour les éléments DOM lorsque l'événement DOMContentLoaded est déclenché. Ainsi, déclencher l'événement DOMContentLoaded le plus tôt possible signifie que la page peut être rendue interactive au plus vite :
Réduisez la taille des fichiers CSS, divisez un seul fichier CSS en plusieurs fichiers pour un chargement parallèle et réduisez le temps de blocage du CSS sur JS
Les fichiers JS secondaires sont chargés en insérant dynamiquement des balises de script (les balises de script insérées dynamiquement ne bloquent pas le déclenchement de l'événement DOMContentLoaded)
Les sprites utilisés en CSS peuvent être chargés avec le fichier CSS en HTML en préchargeant img
Pendant l'expérience, j'ai senti que le panneau Chronologie des outils de développement Chrome était très puissant et que chaque mouvement du navigateur était enregistré. Dans le passé, si nous voulions comprendre et explorer le comportement interne du navigateur dans le développement front-end, nous faisions soit des tests en boîte noire en palpant les pierres, soit nous étudiions le code source du navigateur avec deux fois plus de résultats et la moitié de l'effort. Le seul moyen efficace était d'apprendre de l'expérience de recherche des autres et d'examiner l'expérience de recherche des étrangers, mais le développement des navigateurs évolue chaque jour (par exemple, le JS trouvé dans cette expérience ne bloque pas l'affichage de img). ), l'expérience des autres n'est jamais la plus récente et la plus appropriée. La clé est de combiner vos propres scénarios d'entreprise et de demande, et de prendre des décisions ciblées. Analyse et optimisation.
PS.
L'environnement de test ci-dessus est Windows/Chrome et Fiddler est utilisé pour simuler un réseau lent
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
