Je veux utiliser un peu de javascript avant que la page entière ne soit chargée. Est-ce possible? Ou le code commence-t-il à s'exécuter sur </html> ?
Réponses
Trop de publicités?
Non seulement pouvez - vous, mais vous avez à faire un effort spécial pas si tu n'en veux pas. :-)
Lorsque le navigateur rencontre une script balise lors de l'analyse du HTML, il s'arrête et analyse de mains au cours de l'interpréteur Javascript qui exécute le script. Seulement quand le script est terminé le navigateur de reprendre l'analyse de la page (parce que le script peut ne document.write des appels à la sortie de balisage que l'analyseur doit gérer). C'est le comportement par défaut; il y a script attributs de la balise que l'on peut éviter cette (defer et async).
Donc, considérez ceci:
<!DOCTYPE HTML>
<html><head><!-- yada yada yada --></head>
<body>
<p>Line 1</p>
<script type='text/javascript'>
alert("Stop that parsing!");
</script>
<p>Line two</p>
</body>
</html>
Si vous chargez la page, vous verrez la "Ligne 1" alinéa, alors que l'alerte est affiché, et la la "Ligne 2" paragraphe apparaît par la suite.
Là où ça devient un peu délicat, c'est l'interaction avec le DOM, depuis les DOM est construit par l'analyseur comme il fait son truc et votre script peut s'exécuter avant le DOM est complètement prêt à être manipulé. En général, si vous avez seulement accès à des éléments qui précèdent l' script balise dans le fichier, que vous êtes bien, mais pour être sûr que c'est mieux de le mettre hors tension toutes les interactions DOM jusqu'à ce que le DOM est entièrement construit.
Mais pour la plupart, vous pouvez heureusement accès le plus tôt éléments. Considérer:
<!DOCTYPE HTML>
<html><head><!-- yada yada yada --></head>
<body>
<p id='p1'>Line 1</p>
<script type='text/javascript'>
document.write("<p>p1 is null? " + (document.getElementById('p1') == null ? "yes" : "no") + "</p>");
document.write("<p>p2 is null? " + (document.getElementById('p2') == null ? "yes" : "no") + "</p>");
</script>
<p id='p2'>Line two</p>
</body>
</html>
La sortie que vous voyez est:
La ligne 1 p1 est nulle? faux p2 est nulle? vrai La ligne 2
...parce qu' p1 existe lorsque le script s'exécute, mais p2 ne le fait pas.
Je n'ai pas de lien à portée de main, mais Dans ce message, les développeurs de Google Fermeture de la bibliothèque de dire qu'ils ne voient pas tout de grande valeur pour le "prêt" de style événements de ce Prototype, jQuery, ExtJS, Dojo, et la plupart des autres de fournir, car si vous mettez le script après les éléments que vous souhaitez interagir avec, vous êtes fine; qui tombe à la ligne avec YUI est la recommandation que vous venez de mettre vos scripts droite avant la clôture </html> tag (puisque vous avez à les mettre quelque part, après tout, et là-bas ils ne retenez pas votre affichage de la page). Maintenant, personnellement, je vois une certaine valeur dans ces évènements, bien que je pense qu'ils sont sur-utilisés, mais mon point est que clairement, vous pouvez commencer à interagir avec les choses très tôt.
Marian
Points
1640
Vous pouvez exécuter du code javascript à tout moment. Autant que je sache, il est exécuté au moment où le navigateur atteint la balise <script>, où il se trouve. Mais vous ne pouvez pas accéder à des éléments qui ne sont pas encore chargés.
Donc, si vous avez besoin d'accéder à des éléments, vous devez attendre jusqu'à ce que le DOM est chargé (ce qui ne signifie pas l'ensemble de la page est chargée, y compris les images et les choses. C'est seulement la structure du document, qui est chargé beaucoup plus tôt, de sorte que vous ne serez généralement pas l'avis d'un retard), à l'aide du corps de l' onload ou des fonctions telles que $.ready en jQuery.
Raj
Points
1352
