Bonjour,
Je n’ai pas très bien compris l’utilisation de ce mot-clef defer sur une balise <script>.
C’est un équivalent à window.onload en html ?
Defer vient de quel mot en anglais ?
Est-ce mieux de toujours le mettre sur ces balises <script> ?
Merci.
Quel passage te pose un soucis ?
Cette l’infographie de cet article pourra t’aider :
L’event DOMContentLoaded sera lancé qu’après le fichier js soit chargé et exécuté.
Merci et faut-il toujours placer ce mot sur les balises script ?
ça semble optimiser le chargement des pages.
Merci et faut-il toujours placer ce mot sur les balises script ?
ça semble optimiser le chargement des pages.
C’est quasi similaire à document.addEventListener("DOMContentLoaded"; function () {}) sauf qu’un script avec defer est appelé juste avant que l’event soit lancé.
Personnellement, je lance mon code en load (après DOMContentLoaded et defer) pour attendre que les images et les feuilles de style soit chargé, il y a donc aucun intérêt que j’utilise defer.
L’évènement DOMContentLoaded est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.
J’aurais tendance à utiliser document.addEventListener("DOMContentLoaded"; function () {}) pour les raisons suivantes :
defer) car defer n’est visible que dans ton fichier HTML, tu ne verras dans ton fichier JS que tu attends/utilises DOMContentLoaded ;defer sur tout mon code dans du code qui ne nécessite pas defer, me dérange.Au mieux, tu peux utiliser defer plutôt que async.
En tout cas, il vaut toujours mieux ajouter defer ou async afin de ne pas ralentir le parsing de la page par le téléchargement du script.
Si ton script est directement écrit dans le code HTML. Par exemple :
<script>
alert(11);
</script>
Alors defer et async n’ont strictement aucun effet.
En tout cas, il vaut toujours mieux ajouter defer ou async afin de ne pas ralentir le parsing de la page par le téléchargement du script.
Le seul impact de defer dans script, c’est que le navigateur va attendre que le DOM (-> code HTML de la page) ait fini d’être traité (lu) au lieu d’être exécuté immédiatement (quand le fichier en src a été téléchargé entièrement).
Il faut être prudent quand tu utilises async, le navigateur ne respectera pas l’ordre des balises SCRIPT, il peut charger le dernier fichier en premièr, selon la conception du code ceci peut-être problématique (assure toi que ton code le permet et de comprendre la différence, avant de l’utiliser).
En tout cas, il vaut toujours mieux ajouter defer ou async afin de ne pas ralentir le parsing de la page par le téléchargement du script.
Le seul impact de
deferdans script, c’est que le navigateur va attendre que le DOM (-> code HTML de la page) ait fini d’être traité (lu) au lieu d’être exécuté immédiatement (quand le fichier en src a été téléchargé entièrement).
Oui, de reporter l’exécution du script. Ce qui implique de ne pas devoir attendre qu’il soit télécharger pour continuer le parsing. Ce qui implique un gain de performance là plupart du temps.
Autrement, le parser attend le téléchargement du script, exécute le script et reprend le traitement du fichier HTML. Avec defer, le parser télécharge le script et en même temps continue le traitement du fichier HTML. Quand il a fini, si le script à fini de se télécharger, il l’exécute, sinon il attend encore qu’il ai fini de se télécharger puis l’exécute.
En règle générale, mieux vaut mettre defer. async, c’est pour des cas particuliers où tu es sûr que l’exécution du script ne ralentit pas ou peu le traitement du DOM. Un autre cas, est celui d’un gros script lent à télécharger. Tu ne l’exécutes que quand il est prêt, mais tu sais que script charger avec defer vont s’exécuter avant. C’est assez crade, mieux vaut utiliser defer et le charger en dernier, voir le charger dynamiquement.
Oui, de reporter l’exécution du script. Ce qui implique de ne pas devoir attendre qu’il soit télécharger pour continuer le parsing. Ce qui implique un gain de performance là plupart du temps.
Autrement, le parser attend le téléchargement du script, exécute le script et reprend le traitement du fichier HTML. Avec
defer, le parser télécharge le script et en même temps continue le traitement du fichier HTML. Quand il a fini, si le script à fini de se télécharger, il l’exécute, sinon il attend encore qu’il ai fini de se télécharger puis l’exécute.
Niveau opti ça serait une aberration si l’exécution du script, agissait sur le temps de téléchargement de la page. Je viens de vérifier, l’exécution du script n’agit pas sur le téléchargement :
<html>
<head>
<script type="text/javascript" src="js1MO.js"></script>
<script type="text/javascript" src="js2MO.js"></script>
</head>
<body></body>
</html>
Un script qui s’exécute instantanément :
Un script qui prend 2 secondes à s’exécuter via :
a = +new Date();
loop:
while (1) {
if (new Date() - a > 2000)
break loop;
}
Niveau opti ça serait une aberration si l’exécution du script, agissait sur le temps de téléchargement de la page. Je viens de vérifier, l’exécution du script n’agit pas sur le téléchargement : Mais ce n’est pas ce que j’ai dis ! Ce que j’ai dis, c’est que ça agissait sur le parsing (et pas le téléchargement) de la page !
Ton code est horrible. Mais bref, testé avec ça :
<html>
<head>
</head>
<body>
<script src="test.js"></script>
<h1>Done !</h1>
</body>
</html>
Le header Done ne s’affiche qu’au bout de 5s (j’ai augmenté de 3s afin que ce soit net). Ce qui signifie que le fichier test.js a été téléchargé (donc le parser a attendu la fin du téléchargement du fichier) et exécuté (le parser a attendu la fin de l’exécution) puis enfin il a continué le parsing de la page.
Bref, des tests comme cela n’ont que très peu de valeur. Surtout quand ils sont mal réalisés.
Pour finir, je te lie l’article cité dans la page MDN (le premier lien que tu as cité) section « Voir aussi ». Efficiently load JavaScript with defer and async.
Merci bon comme defer marche pour les pages que je code, je vais le garder.
Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte