Attribut de différence javascript

Si vous avez déjà recherché le développement Web ou la conception de sites Web, alors vous avez probablement entendu parler de HTML. Eh bien, HTML représente «Langage Signalétique Hyper Text". HTML est utilisé en combinaison avec CSS pour développer des pages Web attrayantes et réactives. JavaScript est un langage de programmation qui permet à nos pages Web et aux applications Web de penser et d'agir et de rendre nos applications Web interactives. L'ensemble du document HTML est scanné par le navigateur d'abord pour CSS, JavaScript ou tout autre matériel référencé tel qu'une image et ce processus est appelé l'analyse HTML. Le navigateur Web demande ensuite chacun des fichiers de ressources du serveur si des ressources sont trouvées dans le HTML. Une fois que le navigateur Web a toutes les ressources nécessaires, elle commence à construire la page.

JavaScript peut être référencé par le scénario La tag de HTML et JavaScript est appelée un analyseur Bloquer des ressources Parce que l'analyse HTML est bloquée par JavaScript. Pour résoudre ce problème scénario La tag de HTML nous offre asynchrone et reporter Attributs nous permettant donc d'avoir plus de contrôle sur comment et quand les fichiers externes sont récupérés et exécutés. Dans cet article, nous explorerons ce qu'est l'attribut JavaScript Defer et comment nous pouvons utiliser l'attribut Defer.

Exécution normale

Jetons un coup d'œil à l'impact de ce qui se passe lorsque l'attribut de report n'est pas là. Les fichiers JavaScript, par défaut, mettront en pause l'analyse du texte HTML afin qu'ils puissent être récupérés (sinon en ligne) et exécuter.

Disons que nous avons une balise de script quelque part au milieu d'une page HTML et qu'il y a du code HTML au-dessus et en dessous du scénario étiqueter:

L'analyseur HTML scannera cette page et lorsqu'il atteindra la balise de script, il en pause l'analyse HTML et récupérera le javascript code.js fichier dans la balise de script, puis exécutez ce fichier. Une fois l'exécution et la récupération du fichier JavaScript terminé, seulement alors l'analyse HTML continue à nouveau. Ce processus retarde le rendu de HTML et ralentit donc notre page Web en prenant un peu de temps pour charger complètement la page Web.

Quel est l'attribut de différence?

La propriété de différence ne peut avoir qu'une véritable valeur ou une fausse valeur, nous pouvons conclure qu'il s'agit d'un attribut booléen. C'est un attribut qui est utilisé uniquement pour les scripts externes. Si cette propriété est utilisée, elle définit que le navigateur ne doit pas attendre que le script se charge. Ce qui signifie que, dans certains cas, les scripts externes peuvent prendre beaucoup de temps à charger, cette propriété dit simplement de charger le document avant de se charger dans le script. En termes simples, l'attribut de différence n'attend pas le scénario La tag et le traitement de HTML se poursuit, ce qui fait que notre page Web augmente les performances de chargement. L'attribut Syntaxe for Defer est:

Ça devrait être noté que l'attribut de différence ne peut être appliqué que sur des feuilles / scripts externes SRC L'attribut est présent dans la balise de script. Il convient également de noter que l'attribut de report ne peut pas être appliqué au code en ligne.

L'attribut de différence est similaire au processus asynchrone, c'est-à-dire que vous pouvez passer à une autre tâche même lorsque la première tâche n'est pas terminée.

Exemple

Nous utilisons une feuille JavaScript externe avec le nom de code.JS:

Avant le script

Après le script: exécutera immédiatement

Nous avons initié un p Tag puis une balise de script qui fait référence au code.js fichier et ensuite encore un p étiqueter.

Dans le code.js fichier, nous console simplement.enregistrer Bonjour le monde!:

console.Log ("Hello World!");

Nous verrons la sortie suivante:

Soutien du navigateur

Les nombres donnés dans le tableau indiquent quelle version du navigateur a été la première à implémenter complètement l'attribut.

Attribut	Mozilla Firefox	Microsoft Edge	Google Chrome	Opéra	Safari
reporter	3.5	dix.0	8.0	15.0	5.0

Conclusion

L'exécution normale de HTML est bloquée lorsqu'il y a une balise de script. La balise de script récupère un fichier ou un lien externe, puis l'exécute ainsi bloquant l'analyse normale de HTML. L'attribut de différence est la solution car l'attribut de repère nous aidera à télécharger nos scripts dès que possible sans bloquer le navigateur / html car il dit au navigateur de ne pas attendre le scénario étiqueter. Dans cet article, l'attribut de report dans JavaScript a été discuté avec un exemple et le soutien du navigateur.