Chargement paresseux de JavaScript

Comment charger paresseux JavaScript

Le véritable chargement paresseux de JavaScript signifie : charger ou analyser JavaScript uniquement après que le contenu de la page a été complètement chargé (cela signifie que JavaScript ne peut pas affecter la vitesse ou la criticité de la page) rendu chemin).

• Utilisez l'événement "onload" pour appeler des ressources JavaScript externes

• Les ressources JavaScript externes ne peuvent pas être chargées avant le chargement du contenu de la page

• Les ressources JavaScript externes commencent à s'exécuter et affectent la page après le chargement du contenu

Explication

L'accent mis sur Internet est souvent les gens en essayant de trouver un fou sur diverses solutions, le chargement paresseux de JavaScript est l'un des objectifs.

Beaucoup de gens disent "utilisez simplement defer", "utilisez simplement async" ou "mettez simplement votre JavaScript au bas de la page", mais ces problèmes ne sont pas résolus. Problème - Laissez la page se charger complètement, puis ( seulement après le chargement complet) chargez le JS externe. Ces méthodes ne vous permettront pas non plus de transmettre l'avertissement "chargement retardé de JavaScript" obtenu à partir de Google Page Speed ​​​​Tool (le traducteur a des doutes à ce sujet, car lors des tests, j'ai constaté que les trois méthodes ci-dessus peuvent supprimer cet avertissement).

Cette solution répondra.

Un script qui appelle un fichier JavaScript externe

Ce code est placé avant la balise </body> du document HTML (près du bas du document HTML). Le nom du script externe est defer.js.

<script type="text/javascript">function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild( element );}if ( window.addEventListener ) {
    window.addEventListener( "load", downloadJSAtOnload, false );} else if ( window.attachEvent ) {
    window.attachEvent( "onload", downloadJSAtOnload );} else { 
    window.onload = downloadJSAtOnload;}
</script>

Que fait ce script ?

Ce code dit d'attendre que le document soit complètement chargé, puis de charger le fichier externe "defer.js".

Instructions détaillées

• 1. Copiez le code ci-dessus

• 2. Collez le code dans votre document HTML, avant le </body> balise

• 3. Remplacez defer.js par le nom de votre fichier externe

• 4. est correct. Par exemple : Si vous utilisez "defer.js", alors le fichier "defer.js" doit être dans le même dossier que votre fichier HTML

À quoi pouvez-vous l'utiliser (ou Ce qui ne peut pas être fait)

Ce code ne chargera pas les fichiers de liens externes tant que votre page n'est pas complètement chargée. Vous devez diviser votre JavaScript en deux groupes, un que la page doit charger et un autre qui fait ce qu'il doit faire après le chargement de la page (comme la recherche d'événements de clic ou d'autres choses). Tout JavaScript pouvant attendre et attendre le chargement de la page doit être appelé à partir d'un fichier externe.

Par exemple, dans cette page, j'ai utilisé le script ci-dessus pour charger paresseux les statistiques de Google, Viglink et l'avatar Google plus en bas. Je n'ai aucune raison de charger ces fichiers au début de la page, car ces fichiers ne sont pas liés au contenu que j'ai mentionné ci-dessus et ne doivent pas être chargés. Peut-être auriez-vous le même type de chose sur votre page, feriez-vous attendre que ces ressources se chargent avant de leur montrer votre contenu utilisateur ?

Pourquoi pas d'autres moyens ?

Inlining, mettre le script en bas, utiliser defer ou async sont autant de méthodes qui n'atteignent pas l'objectif de charger d'abord la page puis de charger le JS, et ces méthodes ne sont en effet pas universelles et navigateur interfonctionnel.

Pourquoi est-ce important ?

En effet, Google utilise la vitesse de chargement des pages comme facteur de classement et parce que les utilisateurs souhaitent que les pages se chargent plus rapidement. C’est également idéal pour votre SEO mobile. Google mesure votre vitesse de chargement de la page à partir du moment où elle est appelée jusqu'à ce que le chargement initial de la page soit terminé. Cela signifie également que vous devez faire en sorte que l'événement load de la page se termine le plus rapidement possible. Google évalue votre page en fonction du temps de chargement de sa page d'accueil (et n'oubliez pas que les utilisateurs attendent que la page se charge).

Promotion et recommandation actives de Googlepriorité au contenu au-dessus de la ligne de flottaison (le contenu de l'écran est prioritaire). Donc, garder toutes les ressources hors écran (js, css, images, etc.) hors du chemin de rendu principal en vaut la peine. Si cela rend vos utilisateurs heureux et Google heureux, pourquoi ne pas le faire.

Exemple d'utilisation

J'ai créé une page, cliquez ici, vous verrez que j'ai utilisé l'extrait de code ci-dessus ici.

Fichier d'exemple de test

Eh bien, juste pour illustrer, j'ai écrit quelques pages de test que vous pouvez tester. Chaque page fait la même chose. Une page HTML pure utilise un script. Le contenu du script consiste à attendre deux secondes pour afficher "hello world". Vous pouvez tester ces pages et constater qu'il n'existe qu'une seule façon d'afficher le contenu immédiatement (le temps de chargement de la page n'inclut pas les deux secondes d'attente).

• Script en ligne - Cliquez pour voir

• Utilisez "différer" pour charger des scripts externes - Cliquez pour afficher

• Utilisez le code recommandé ci-dessus - Cliquez pour view

Point clé

Le point le plus critique est de présenter le contenu à l'utilisateur le plus rapidement possible. Nous n'avons pas fait cela avec la façon dont nous avons traité notre javascript. Les utilisateurs doivent voir leur contenu car certains scripts font des choses sous le contenu visuel. Peu importe à quel point le bas de votre page est cool, si l'utilisateur ne fait jamais défiler vers le bas de la page, vous n'avez aucune raison de charger le script pour rendre le bas de la page cool.

Outil

Utilisez l'outil d'utilisation de Javascript pour tester la manière dont JavaScript est utilisé sur vos pages.

---

Extensions supplémentaires

1. Différé et asynchrone

Les deux attributs peuvent être utilisés à des fins d'optimisation de page, mais quelle est la différence ? Une image peut répondre :

2. Sous le pli

Selon la définition dans wordstream :

Below the fold signifie qu'il n'y a que du défilement. dans la zone visible de la page Web.

Above the Fold fait référence à la zone de contenu visible sans faire défiler la page.

De manière générale, le contenu affiché à l'écran sans défilement recevra plus d'attention, et le contenu qui nécessite un défilement pour être visible recevra moins d'attention. foldLes opinions proviennent du secteur de l’édition d’actualités.