Présentez brièvement la différence entre le report HTML5 et l'async

L'éditeur ci-dessous vous proposera une brève discussion sur HTML5 La différence entre différer et asynchrone. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil.

La principale façon d'insérer du Javascript dans une page HTML est d'utiliser l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a Cet élément a été créé par Netscape et a été implémenté pour la première fois dans Netscape Navigator 2. Plus tard, cet élément a été ajouté à la spécification HTML officielle. HTML4.01 définit 6 attributs pour 3f1c4e4b6b16bbbd69b2ee476dc4f83a, y compris defer et async. Defer et async sont facultatifs et valables uniquement pour les fichiers de script externes.

1. Lorsque le navigateur analyse le script sans différé ni asynchrone :

<script src="main.js"></script>

Parcourir Le navigateur charger et exécuter le script spécifié immédiatement. "Immédiatement" signifie avant de rendre l'élément du document sous la balise script, c'est-à-dire qu'il le chargera et l'exécutera dès qu'il sera lu sans attendre le chargement ultérieur des éléments du document.

2. Lorsque le navigateur analyse le script et qu'il y a une synchronisation :

<script async src="main.js"></script>

Le navigateur téléchargera le script immédiatement, mais n'empêchez pas d'autres opérations sur la page, telles que le téléchargement d'autres ressources ou l'attente du chargement d'autres scripts. Le processus de chargement et de rendu des éléments de document suivants se produit en parallèle (de manière asynchrone) avec le chargement et l'exécution de main.js.

async ne garantit pas l'exécution dans l'ordre dans lequel les scripts apparaissent. Il est donc très important de s'assurer que les deux ne dépendent pas l'un de l'autre auparavant. Le but de la spécification de l'attribut async est d'empêcher le. page d'attendre le téléchargement et l'exécution des deux scripts, se chargeant ainsi de manière asynchrone. Pour les autres contenus de la page, il est recommandé que les scripts asynchrones ne modifient pas le DOM pendant le chargement.

Le script asynchrone sera certainement exécuté avant l'événement load de la page, mais il pourra être exécuté avant ou après le déclenchement de l'événement DOMContentLoaded. Les navigateurs prenant en charge les scripts asynchrones incluent Firefox 3.6, Safari 5 et Chrome.

3. Lorsque le navigateur analyse le script et qu'il y a un report :

<script defer="defer" src="main1.js"></script>
<script defer="defer"  src="main2.js"></script>

signifie que le script sera Retardé jusqu'à ce que le document soit entièrement analysé et affiché, le processus de chargement des éléments suivants du document se produira en parallèle avec le chargement de main.js (de manière asynchrone). La spécification HTML5 exige que les scripts soient exécutés dans l'ordre dans lequel ils apparaissent, de sorte que le premier script différé sera exécuté avant le deuxième script différé, et les deux scripts seront exécutés avant l'événement DOMContentLoaded. En réalité, les scripts de retard ne sont pas nécessairement exécutés dans l'ordre, ni avant le déclenchement de l'événement DOMContentLoaded. Il est donc préférable de n'inclure qu'un seul script de retard.

IE4~IE7 prend également en charge l'attribut defer pour les scripts intégrés, mais IE8 et les versions ultérieures prennent entièrement en charge le comportement spécifié par HTML5.

IE4, Firefox 3.5, Safari 5 et Chrome sont les premiers navigateurs à prendre en charge l'attribut defer. Les autres navigateurs ignorent cet attribut et gèrent le script normalement. Pour cette raison, placer les scripts différés en bas de la page reste la meilleure option.

La ligne bleue représente la lecture réseau, la ligne rouge représente le temps d'exécution, les deux étant destinées aux scripts ; la ligne verte représente l'analyse HTML.

Cette image nous indique les points suivants :

defer et async sont les mêmes en terme de lecture réseau (téléchargement), Les deux sont asynchrones (par rapport à l'analyse HTML)

La différence entre eux réside dans le moment où le script est exécuté après son téléchargement. De toute évidence, le report est le plus proche de nos exigences en matière de chargement et d'exécution du script d'application

Concernant le report, ce qui n'est pas fini dans cette image, c'est qu'il exécute le script selon l'ordre de chargement.

async est un maître de l'exécution dans le désordre. Quoi qu'il en soit, le script est pour cela. chargé et exécution sont étroitement liés, donc quel que soit l'ordre de vos déclarations, tant qu'il est chargé, il sera exécuté immédiatement

Réfléchissez bien, async n'est pas très utile pour les scripts d'application car il ne prend pas du tout en compte les dépendances (même l'exécution séquentielle de niveau le plus bas), mais il est très adapté aux scripts qui ne dépendent d'aucun script ou ne dépendent d'aucun script. L'exemple le plus typique : Google Analytics

.

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!