HTML5 : Optimisation des flux de production

Définir l'emplacement de JavaScript

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Où devez-vous placer le lien vers les fichiers JavaScript ? Dans l'en-tête ou à la fin du document HTML ? Tout va dépendre de vos besoins. Notez que tout script chargé dans l'en-tête peut bloquer le reste du chargement.
02:33

Transcription

En produisant du HTML, on se pose parfois la question d’où placer nos fichiers JavaScript. Certains documents vont nous dire que les fichiers JavaScript viennent dans l’en-tête du document HTML, et puis, certains utilisateurs vont écrire des posts disant qu’il faut mettre le fichier JavaScript, avant la fermeture de la balise body. Alors qu’en est-il exactement, et, où vaut-il mieux placer notre ligne de JavaScript ? Déjà, tout va dépendre du contexte d’utilisation dans lequel on va être. Mais ce qu’il y a de certain, c’est que, en fonction de certaines utilités de nos fichiers JavaScript, cela va pouvoir bloquer carrément le chargement de notre page. Alors regardons, ici on a une page HTML qui fait deux liens distincts. Un, en en-tête de document vers le fichier 01 JavaScript, et un deuxième en fin de document, vers le fichier 02 JavaScript. Ce fichier 01 contient simplement une fonction boucle, qui va compter de 1 à 100 000, pour compter largement ici. Avec ici, une petite opération à faire à chaque fois, qui va prendre peanuts au niveau du cycle, mais qui va déjà bloquer un peu le système. On va appeler cette fonction. On va mettre un message d’alerte qui va bloquer le script forcément. Donc à ce moment-là on va bloquer ce script, puisqu’un message d’alerte va attendre que l’utilisateur valide cette boîte de dialogue. On pourrait au passage demander d’avoir un affichage dans la console. Et puis, le script JavaScript numéro 2 fait exactement la même chose, sauf que cette fois-ci, c’est sur le blocage du script numéro 2. Alors ici, si je reviens dans ma partie HTML 1, je vais pouvoir la lancer dans un navigateur, et voir ce qu’il en est. Alors pour cela, je vais utiliser Firefox, Ici, voilà. Je lance Firefox Et, j’ouvre ma console, je suis à la racine de mon document ici, je lance mon fichier HTML 1, et regardez ce qui se passe. En arrière-boutique, je n’ai rien, tout est gris, ce qui veut dire que ma page n’est pas chargée. On le voit très bien ici. J’ai mon script qui bloque ce script numéro 1, je n’ai rien qui est passé ici au niveau de la console. J’ai vraiment ma fenêtre d’alerte, dans mon script, qui bloque quoique ce soit au niveau du téléchargement. Et vous voyez ici, que ça pédale dans la semoule, rien ne se passe. Dès que je libère cette boîte de dialogue, on voit instantanément la page se charger. On voit l’instruction de la console qui est placée, mais une fois encore, le script se bloque. Là il bloque, mais c'est vrai qu'il n’y a plus rien à faire d’un point de vue navigateur, au niveau de l’utilisateur. La seule interférence qu’on pourra avoir d’un point de vue ergonomique, c’est le pédalage dans la semoule qui continue à se passer, tant qu’on n’aura pas libéré le script ici.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :26 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !