Pour optimiser le temps de chargement d'une page, on peut conditionner l'exécution des scripts pour réduire l'impact sur la vitesse de rendu du contenu HTML. Voici comment.
Différer l'exécution d'un script au chargement du document
Pour exécuter un script après le chargement de la page, on peut appliquer sur le document de la page un écouteur d'évènement déclenché lorsque le chargement du document est complété.
La méthode "addEventListener" prend en arguments le nom d'évènement "DOMContentLoaded" et une fonction à exécuter après chargement du document :
document.addEventListener('DOMContentLoaded', function() {
console.log('HTML prêt !');
});Détecter si le document a été chargé
Un script conditionné avec un écouteur d'évènement ne pourra pas être exécuté si cet écouteur est implémenté après le chargement du document. Il peut donc être nécéssaire de vérifier l'état du document afin d'exécuter le script immédiatement si besoin.
On peut vérifier la propriété "readyState" du document pour savoir si le document a déjà été chargé :
if (document.readyState === 'complete') {
console.log('HTML prêt !');
}Exécuter un script lorsque le document est prêt
En combinant les deux méthodes précédentes, un script peut être inclus dans une fonction exécutable immédiatement si le document est prêt ou au déclenchement d'un écouteur d'évènement.
function monScript() {
console.log('HTML prêt !');
}
if (document.readyState === 'complete') {
monScript();
} else {
document.addEventListener('DOMContentLoaded', function() {
monScript();
});
}Exécuter de multiples scripts en asynchrone
In fine, on peut créer une fonction qui permet d'appliquer ces règles d'exécution à tous les scripts qui peuvent être chargés avant ou après que le document ait été lui même chargé.
"domReady" est une fonction JavaScript qui permet d'exécuter des scripts en asynchrone. Elle prend en argument une fonction englobant le script à exécuter lorsque le document est prêt.
function domReady(f) {
if (document.readyState === 'complete') {
f();
} else {
document.addEventListener('DOMContentLoaded', f);
}
}
domReady(function() {
console.log('HTML prêt !');
});Cet article vous a-t-il été utile ?
Super :)
Merci d'avoir donné votre avis !
Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !