Maison > Article > interface Web > Pratique HTML5 et analyse des scripts retardés

Pratique HTML5 et analyse des scripts retardés

黄舟original: 2017-02-10 14:26:311946parcourir

Qu'est-ce qu'un script différé ? Le combat réel et l'analyse des scripts différés HTML5 vous aident à résoudre certains problèmes de chargement de JavaScript. Avec la fonction de script différé du combat et de l'analyse réels HTML5, nous ne pouvons plus nous soucier de la structure désordonnée de la page lorsqu'elle est chargée pour le chargement JavaScript.

En ce qui concerne les scripts retardés en JavaScript, il existe un tel attribut dès HTML4.01. Il est très pratique à utiliser, c'est-à-dire qu'il faut ajouter un attribut "defer" à la balise de script référencée en externe. L'ajout de l'attribut "defer" n'affectera pas la structure de la page. En d’autres termes, le script se chargera mais ne s’exécutera pas, et sera exécuté séquentiellement une fois la page complètement chargée. Pour mieux comprendre, jetez un œil à l’exemple ci-dessous.

Dans cet exemple, il y aura un fichier.html. La balise script référencée dans ce fichier n'a pas l'attribut de script retardé ajouté, tandis que le fichier b.html ajoute l'attribut de script retardé. Il existe respectivement deux fichiers JavaScript, a.js et b.js. Chacun des deux fichiers affiche le nom de son propre fichier à titre de démonstration.

　code a.js

alert("a");

code b.js

alert("b");

　un code.html

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙</title>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body>
<p class="a">
梦龙小站
</p>
</body>
</html>

　Code b.html

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙</title>
<script type="text/javascript" defer="defer" src="a.js"></script>
<script type="text/javascript" defer="defer" src="b.js"></script>
</head>
<body>
<p class="a">
梦龙小站
</p>
</body>
</html>

Comme le montre l'exemple ci-dessus. Bien que nous ayons référencé a.js et b.js dans la balise head, car nous avons défini l'attribut "defer". Par conséquent, les a.js et b.js référencés seront chargés, mais ils devront être exécutés une fois que le navigateur aura rencontré la balise. Étant donné que les navigateurs analysent différemment les attributs de délai, l'ordre dans lequel les scripts de délai sont exécutés est différent. L'attribut « defer » s'applique uniquement aux fichiers JavaScript référencés en externe et ignorera plusieurs autres méthodes de référencement des fichiers JavaScript.

Les navigateurs pris en charge sont : IE9, Firefox 3.5, Safari 5 et Chrome. Les autres navigateurs non pris en charge chargeront et traiteront le script normalement.

Ce qui précède est le contenu du combat réel HTML5 et de l'analyse des scripts retardés. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration：

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

Article précédent：Utilisez HTML5 pour implémenter le téléchargement de fichiers asynchrone, prendre en charge plusieurs domaines et télécharger une barre de progressionArticle suivant：Utilisez HTML5 pour implémenter le téléchargement de fichiers asynchrone, prendre en charge plusieurs domaines et télécharger une barre de progression

Articles Liés

Voir plus