Mais comment le moteur javascript charge-t-il le code ?

**FDussault** · 27/05/2011, 18h19

Bonjour,

Quelqu'un pourrait-il m'expliquer, ou me diriger vers l'explication, comment le moteur javascript charge le code puis execute celui-ci?

Ce que je sais pour le moment est que le code peux s'exécuter à deux moment:
1) quand le document est prêt (tout le code est chargé mais pas toutes les ressources telles les images)
2) toute la page (window) est prête (le code et les ressources sont chargés)

Mais que se passe t'il avant?

Un exemple de mon incompréhension est le code suivante:

Code :

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

1
2
3
4
 
(function(leParametre){
 mon code ici
})(monParametre);

ou simplement

Code :

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

1
2
 
(function(){ mon code ici })();

Ceci est régulièrement utilisé avec jQuery...

On me dit que cela est utilisé (éxécuté?!) lors du chargement du code. Personellement je pense que cela se ferait au document ready, mais je n'en sais rien.

Y a t'il d'autre "moment" dans le "page loading process" ?

Merci d'avance pour toute explication.

**Bovino** · 27/05/2011, 18h42

1) quand le document est prêt (tout le code est chargé mais pas toutes les ressources telles les images)
2) toute la page (window) est prête (le code et les ressources sont chargés)

En fait, le navigateur possède un interpréteur HTML et un interpréteur JavaScript.
Pendant que la page se crée, si l'interpréteur HTML rencontre une balise <script>, il donne la main à l'interpréteur JavaScript et attend bien sagement.
Le moteur JavaScript charge (si besoin) le script, le compile et l'interprète, éventuellement lance des message s'il rencontre des erreurs de syntaxe, si le script comporte du code en dehors d'une fonction, ce code est exécuté. Ensuite il rend la main à l'interpréteur HTML.

Le code est donc chargé au moment où il est trouvé dans la page et c'est dans la partie hors fonction que sont généralement placés les gestionnaires d'événements onload, onDOMReady etc. qui servent à jQuery par exemple à pouvoir s'exécuter quand la page est prête.

**SpaceFrog** · 27/05/2011, 18h45

Je pense qu'il y a une petite confusion...
Tu dois parler de ce type de code:

Code :

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

$(function(){ mon code ici });

En jquery $() est un réaccourci pour $(document).ready()

sinon pour lancer une fonction il suffit de l'appeler par son nom suivi de () contenant eventuellement des paramètres.
Ce qui entraine la possibilité d'un execution immediate de la fonction comem suit au moment de l'interprétation du code

Code :

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

(function(foo){alert(foo)})('hello')

**FDussault** · 27/05/2011, 19h03

Je fais bien reférence à

Code :

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

1
2
 
(function(foo){alert(foo)})('hello')

Donc si je vous suis bien, le code javascript est executé (si exécutable, tel le code ci-haut) au moment où il est rencontré lors du chargement de la page.

Merci beaucoup!

EDIT:
Je comprends que jQuery attend que onDOMReady ou onLoad soient déclanchés.

Par curiosité, quels sont les autres événements déclenchés dans le processus de chargement?

**sekaijin** · 27/05/2011, 20h54

l'interprète Javascript est en fait une machine virtuelle avec un compilateur.
le moment où le code va être exécuté dépend de l'attribut defered.
quoi qu'il arrive la première chose c'est le chargement du code source. même s'il est defered le compilateur s'il dispose de temps vas prècompiler le code.
il vas référencer des élément du code sans pour autant les compiler complètement. par exemple pour une définition de fonction il va référencer la fonction sans en compiler le code.
si la balise n'est pas defered il exécute le code et compile à la volée les fonctions utilisées.
si le code est défered il continue avec les balise suivantes.
ensuite il exécute dans l'ordre d'apparition les scripts defered.
la page fini de se charger et le gestionnaire d'événement entre en jeux.
s'éxécute alors dans le désordre (c'est le moteur qui décide) tous les handler liés à chaque événements.

en clair les listeners associés à un événement sont tous exécuté avant de passé à l'événement suivant. mais l'ordre des listeneur de cet événement n'est pas garanti.

A+JYT