Du bon usage du chargement des scripts dans une page HTML

**Mat_Mat** · 29/02/2016, 14h53

Bonjour,

Je débute en javascript. Jusque là je ne faisais que des petits trucs simples, mais là j'ai besoin de faire les choses correctement, et je suis un peu perdu avec les différentes façons d'inclure du javascript dans une page HTML.

En gros, l'exemple c'est une carte google map. Donc j'ai deux scripts à inclure dans ma page :
- Le script de l'api google que j'inclus avec un <script src='http://maps.google.com/maps/api/js'></script>
- Mon script. Celui-ci étant très petit, je l'inclus en inline : <script> /*... Mon code Javascript min ici ...*/ </script>

Sachant que mon script contient essentiellement ça.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function initialize() {
        // On vérifie que l'api google map est disponible
	if ( (typeof google !== 'undefined') && (typeof google.maps !== 'undefined') ) {
		// le code d'initialisation ici
	} else {
		return;
	}
}
// execute initialize() une fois la page chargée
window.addEventListener('load', initialize);

Maintenant, pour chacun de ces 2 scripts, je peux l'inclure soit dans le head, soit en plein milieu de la page là où j'en ai besoin, soit juste avant la fin du body. Si on ajoute à ça les defer et async que j'ai trouvés dans les FAQ google (mais dont le support n'est aparemment pas très répendu), ça fait beaucoup de possibilités.

Donc, quelle est la bonne façon de faire pour :
- respecter les usages habituels,
- ne pas trop ralentir le rendu de la page,
- être sûr que tout est disponible au moment où l'événement load de la window est déclenché,
- que ça ne plante pas lamentablement si l'api google ne peut pas être chargée (exemple : la page est locale et il n'y a pas de connexion internet).

Merci d'avance pour votre aide.

Mat

**SylvainPV** · 29/02/2016, 16h54

Voilà un post long en explications à ce sujet : http://www.developpez.net/forums/d15...y/#post8371661

**Mat_Mat** · 29/02/2016, 17h55

Merci SylvainPV. Je n'avais pas trouvé ce post avant.

Du coup c'est un peu plus clair.

Donc si je comprends bien dans mon exemple de google map (même si seulement pour le principe, vu la taille des scripts) :
- Puisqu'un script dépend de l'autre je ne dois pas utiliser async
- Idéalement je devrais inclure mes scripts dans le head avec defer pour ne pas bloquer le rendu de la page puisque dans mon script rien ne se passe avant l'évenement 'load' de 'window'
- Mais comme defer n'est pas supporté par tous les navigateurs il vaut mieux inclure mes scripts à la fin du body. Ma page sera alors affichée sans carte le temps du chargement des scripts.

C'est bon, j'ai bien compris ?

Et deux autres précisions, pour être sûr :
- Dans le cas normal (ni async ni defer), un script n'est exécuté qu'une fois que ceux inclus au-dessus on été exécutés ?
- L'évenement 'load' de 'window' est il exécuté quand le DOM est prêt ou quand tout (DOM+scripts) est prêt ?

Merci encore.
Mat

**SylvainPV** · 29/02/2016, 18h46

script defer en <head> ou scripts normaux à la fin du </body>, ce sont deux solutions satisfaisantes. La première est plus optimisée pour les navigateurs modernes mais pénalise les anciens, tandis que la seconde est uniforme. Je recommande personnellement script defer en <head>.

- Dans le cas normal (ni async ni defer), un script n'est exécuté qu'une fois que ceux inclus au-dessus on été exécutés ?
--> oui, leur téléchargement se fait en parallèle mais leur exécution se fait dans l'ordre de leur déclaration.

- L'évenement 'load' de 'window' est il exécuté quand le DOM est prêt ou quand tout (DOM+scripts) est prêt ?
--> quand toutes les ressources, CSS, scripts, images etc.. sont chargées ; pour le chargement du DOM uniquement, tu peux te servir de l'événement DOMContentLoaded: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

**Mat_Mat** · 29/02/2016, 20h51

Merci pour cette réponse détaillée.

Je venais justement de trouver des infos semblables à celles-ci et j'étais en train de faire des tests de timing entre window.onload et DOMContentLoaded.
Il ne me reste plus qu'à voir la façon dont ces deux évènements sont gérés par les différents browsers.
Décidément, ce serait plus simple si le support était uniforme

Du coup, je marque la question comme résolue ... dès que je trouve comment

Merci encore.

Mat

Du bon usage du chargement des scripts dans une page HTML

JavaScript

Discussions similaires

Partager

Partager