Vidéo: Comment faire un chargement des images différé en jquery ? (2/2) 2024
Une cause majeure des pages Web lentes est le script de blocage. Un script bloquant est un fichier JavaScript dont le chargement et l'exécution bloque le chargement d'une page Web. Dans des circonstances extrêmes, un navigateur peut télécharger une page Web entière et afficher un écran vide pendant plusieurs secondes ou plus pendant que le JavaScript est chargé et analysé. Parce que les internautes ont tendance à s'ennuyer rapidement, cette situation doit absolument être évitée.
Heureusement, il existe plusieurs façons de différer le chargement et l'exécution de JavaScript et d'accélérer l'affichage de vos pages Web.
La première méthode consiste à utiliser l'attribut defer de l'élément de script. Voici à quoi cela ressemble:
Notez que l'attribut defer ne peut être utilisé qu'avec des fichiers JavaScript externes. Il ne peut pas être appliqué aux blocs dans un document.
Lorsqu'il est présent, l'attribut defer entraînera l'exécution du script une fois l'analyse de la page terminée.
Une autre façon de différer le chargement et l'exécution d'un script est la méthode recommandée par Google. Google recommande de placer le code suivant tout en bas de votre page Web. Pour l'utiliser, vous devez remplacer le nom de l'exemple de script (ici, myscript.js) par votre propre nom de fichier, bien sûr.
function downloadJSAtOnload () {var élément = document. createElement ("script"); élément. src = "myscript.js"; document. corps. appendChild (élément);} fenêtre (window.AddEventListener). addEventListener ("load", downloadJSAtOnload, false); else si (fenêtre. attachEvent) fenêtre. attachEvent ("onload", downloadJSAtOnload); autre fenêtre. onload = downloadJSAtOnload;
Un autre attribut pour aider à différer JavaScript est l'attribut async. L'attribut async est nouveau en HTML5. Voici à quoi ça ressemble:
Comme l'attribut defer, l'attribut async ne peut être utilisé qu'avec des scripts externes (où l'attribut src est utilisé). Lorsqu'il est présent, l'attribut async provoquera l'exécution asynchrone du script avec le reste de la page. En d'autres termes, le script s'exécutera en même temps que le reste de la page.
La méthode que vous choisissez d'utiliser peut avoir un effet sur le bon fonctionnement du JavaScript de votre page. Assurez-vous de tout tester après l'implémentation du chargement différé. Fait correctement, le fait de différer JavaScript peut réduire considérablement le temps d'attente de vos utilisateurs et rendre tout le monde plus heureux.
