64 votes

Javascript - tête, corps ou jQuery?

Cette question est juste pour clarifier certaines choses. Certaines choses de ce genre ont déjà été posées, et ce tours de tous dans une question où dois - JavaScript aller dans le document HTML, ou, plus important encore, est-il question? Donc, une des choses que je vous pose est, ne

<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>

à tous différents (en termes de fonctionnalité) à partir d'

<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>

Plus important encore, je veux me concentrer sur JS qui modifie ou utilise des éléments du DOM en aucune façon. Donc, je sais que si vous mettez quelque chose comme document.getElementById("test").innerHTML = "Hello world!" avant <element id="test"></element> dans votre corps, alors il ne fonctionnera pas car le corps est chargé de haut en bas, faisant de la JS charge en premier, qui procédera ensuite à essayer de manipuler un élément qui n'existe pas encore. Il devrait donc, comme ci-dessus, soit aller dans l' <head> ou juste avant l' </body> balise. La question est, en dehors de l'organisation et de tri, n'importe laquelle de ces est choisi, et si oui, dans quel sens?

Bien sûr, il y a aussi une troisième méthode - le jQuery façon:

$(document).ready(function(){ /*Code goes here*/ });

De cette façon, il n'est pas n'importe où dans le corps, vous placez le code, car il ne sera exécuté que lorsque tout est chargé. La question ici est, vaut-il l'importation d'un énorme bibliothèque JS juste à utiliser une méthode qui pourrait être remplacé par un placement précis de vos scripts? Je voudrais juste clarifier les choses, un peu ici, si vous souhaitez répondre, aller de l'avant! Résumé: les différents types de scripts - tête ou le corps, et/ou est-il question? JQuery est la peine juste pour le prêt de l'événement?

61voto

Sarfraz Points 168484

Méthode recommandée est de le mettre avant d' </body> balise. Yahoo performance de l'article suggère également que d'autres que YSlow et Page Speed addons par Yahoo et Google, respectivement.

Citant Yahoo article lié ci-dessus:

Le problème causé par les scripts, c'est qu'ils bloquer les téléchargements en parallèle. La spécification HTTP/1.1 suggère que les navigateurs téléchargent pas plus de deux composants en parallèle par le nom d'hôte. Si vous servez à vos images de multiples noms d'hôte, vous pouvez obtenir plus de deux téléchargements de se produire en parallèle. Lorsqu'un script est en cours de téléchargement, cependant, le navigateur n'est pas démarrer tous les autres téléchargements, même sur les différents noms d'hôte.

Lorsque vous mettre les scripts dans <head> balise, les navigateurs se passe pour eux, ce qui permet de garder d'autres choses en attente jusqu'à ce que les scripts sont chargés les utilisateurs perçoivent comme la lenteur de chargement de la page. C'est pourquoi vous devez mettre les scripts en bas.

Comme pour:

$(document).ready(function(){//Code goes here});

Il est déclenché lorsque le DOM est disponible et prêt à être manipulé. Si vous mettez votre code à la fin, vous n'aurez pas nécessairement besoin de cela, mais habituellement, cela est nécessaire parce que vous voulez faire quelque chose dès que le DOM est disponible pour utilisation.

29voto

T.J. Crowder Points 285826

Bien que la pratique courante, en mettant script de balises dans l' head n'est généralement pas une bonne idée, car il détient le rendu de votre page, jusqu'à ce que ces scripts ont été téléchargées et traitées (sauf votre utilisation de async ou defer et le navigateur qui les appuient).

La recommandation habituelle est de mettre script balises à la fin de l' body balise, par exemple, juste avant d' </body>. De cette façon, tous les éléments du DOM-dessus, le script sera accessible (voir les liens ci-dessous). Une mise en garde sur c'est qu'il peut y avoir un bref instant lorsque votre page a été rendue, mais vos scripts qui ne sont pas traitées (encore), et si l'utilisateur commence à interagir avec la page, ils peuvent faire quelque chose pour déclencher un événement que votre script n'a pas eu le temps de crochet encore. Si vous avez besoin d'être conscient de cela. C'est une des raisons pour amélioration progressive, qui est l'idée que la page fonctionne sans JavaScript, mais de travailler mieux avec elle. Si vous êtes en train de faire une page/une application qui ne va pas fonctionner sans JavaScript, vous pouvez inclure certains inline script en haut de l' body balise (par exemple, <script>minimal code here</script>) qui intercepte tout des événements de propagation sur document.body et soit les files d'attente à l'action lorsque le script est chargé, ou demande simplement à l'utilisateur d'attendre.

Utilisant des fonctions telles que jQuery ready est bien, mais pas vraiment nécessaire en dehors des bibliothèques (par exemple, si vous êtes dans le contrôle de l'endroit où l' script étiquettes, vous n'avez généralement pas besoin de l'utiliser, mais si vous êtes en train de rédiger un plug-in jQuery qui doit faire quelque chose sur la charge [ce qui est relativement rare, normalement ils ont juste attendre d'être appelé], vous n'avez généralement).

Plus de lecture:

7voto

Luka Points 166

Il est possible de télécharger des javascripts en parallèle, en faisant quelque chose comme ceci:

(function () {
    var ele = document.createElement('script');
    ele.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
    ele.id = "JQuery";
    ele.onload = function () {
        //code to be executed when the document has been loaded
    };
    document.getElementsByTagName('head')[0].appendChild(ele);
})();

Dans l'exemple, il téléchargements minifiés JQuery v1.7.2 à partir de Google, c'est un bon moyen de télécharger JQuery depuis le télécharger à partir de Google, c'est comme utiliser un CDN et si l'utilisateur a une page qui utilise le même fichier, il peut être mis en cache et donc n'a pas besoin d'être téléchargé

Il y a vraiment une bonne Google tech en parler ici http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X