Pratique HTML5 et analyse des scripts retardés-Tutoriel H5-php.cn

Pratique HTML5 et analyse des scripts retardés

黄舟

Libérer： 2017-02-10 14:26:31

original

2026 Les gens l'ont consulté

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");

Copier après la connexion

code b.js

alert("b");

Copier après la connexion

　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>

Copier après la connexion

　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>

Copier après la connexion

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) !