J'ai vu des bibliothèques JavaScript chargées en haut et en bas de la page.
J'aimerais savoir quand faire ces choix. Tout le code JavaScript J'ai écrit tous les travaux en haut de la page, qui comprend des plugins JQuery.
Quand puis-je charger mon script à l'une de ces positions?
9 Réponses :
top : lorsque la fonction d'événements JavaScript sur les éléments est immédiatement plus important (donc si vous utilisez un événement DOM Ready pour tout charger, c'est le mauvais endroit)
bas : lorsque le chargement du contenu est plus important
J'aime ça, c'est précis. Pourriez-vous expliquer un peu plus sur le scénario «Top», je ne suis pas tout à fait claire dessus.
Vous pouvez avoir des parties de la page que vous souhaitez que le JS commence à fonctionner immédiatement après avoir rendu la page (c.-à-d. Navigation principale avec Flyout Subnav). Dans ce cas, vous voudriez que la navigation JS soit chargée en haut et déclencher la gâchette lorsque la DIV contenant la navigation est prête, au lieu de la fin de la page complète du chargement.
Pour donner un autre exemple de quand mettre quelque chose en haut, voir ma réponse ici: Stackoverflow.com/Questtions/703783/...
Je soulignerais que si vous le chargez au bas, vous n'avez accès à aucune fonctionnalité de jQuery pour "Inline" JavaScript qui fonctionne à la charge de la page (c.-à-d. "$ Non définie") ref: Stackoverflow.com/a/8556006/32453
Yahoo dit à mettre des scripts en bas . Google dit quelque chose de similaire mais pas aussi clairement.
Oui; CSS en haut, JS en bas.
La pagesPeed de Google dit la même chose. Pour les pages chargant quelques centaines de K de JS ou plus, cela fait une amélioration de temps de charge importante.
Merci James, j'ai également ajouté avec la recommandation de Google.
Et les deux disent que pour des raisons de performance. Les performances ne sont pas toujours la chose la plus importante. Méfiez-vous de l'optimisation prématurée.
@David: vrai. C'est la raison principale que j'ai posée cette question, car j'avais ce sentiment que ce n'est pas le cas.
Décider où mettre JavaScript pour la vitesse de chargement n'est pas une optimisation prématurée.
Décider où mettre JavaScript basé sur sur la vitesse de chargement sans envisager d'autres facteurs est Optimisation prématurée.
La grande majorité des pages Web n'ont aucune exigence particulière qui indiquerait déplacer le JS au sommet. Par conséquent, le cas qui fonctionne généralement le meilleur (JS en bas) doit être utilisé à moins que quelque chose n'aboutit à invalider l'utilisation de la valeur par défaut. L'optimisation prématurée est de passer du temps à vous inquiéter de la vitesse. Une valeur par défaut de mettre des JS au bas ne nécessite pas de réflexion ou d'effort supplémentaire.
Je suis d'accord avec Nosredna. Par défaut, il est préférable de mettre le JavaScript en bas. Il est certain que le HTML est rendu en premier et l'utilisateur verra du contenu rapidement. Cependant, une fois que vous remarquez que une interaction importante est affectée par cette pratique, il est alors temps de déplacer la bonne quantité de JavaScript vers le haut, permettant à ce code à utiliser avant que la page soit complètement chargée. .
La raison pour laquelle vous le faites au bas de la page est parce que si vous le mettez en haut de votre page, le rendu de votre page attendra ces fichiers avant qu'il ne rende. C'est pourquoi beaucoup de gens placent JavaScript au bas de la page car il permet à la page complète d'être rendue alors que le JavaScript est chargé.
Il y a très rarement une raison pour laquelle vous voudriez mettre le JavaScript en haut de la page, et si vous avez une raison explicite, vous souhaitez que le JavaScript soit chargé avant la page principale, puis la mettez en bas. La plupart des guides d'optimisation suggèrent de la mettre en bas pour cette raison.
En raison du fait que les navigateurs doivent suspendre l'affichage du contenu d'une page lors de l'analyse d'un fichier JavaScript, la recommandation consiste à charger le JavaScript au bas de la page pour accélérer le contenu d'une page. Cela fonctionne mieux si votre site Web peut être rendu sans exécution JavaScript pour modifier la page car la page sera disponible pour l'interaction utilisateur, même si une script est suspendue plus longtemps que prévu.
Je mettez tous les scripts externes (tels que Google Analytics) au bas, de sorte que leur retard n'effectue pas le chargement du DOM.
Mettez simplement, si votre script a des extraits qui commenceraient à exécuter tout de suite (en dehors de toutes les fonctions Si vous accédez à DOM uniquement des appels de fonction (comme () {} corps) et que l'accès des éléments DOM, il devrait aller à la fin de la page. Ce DOM aurait été construit et être prêt à être consulté au moment où le script commence à exécuter.
surcharger , onclick etc.), vous pouvez mettre le script en toute sécurité dans la section de tête elle-même.
Je placerai tous les CSS dans la tête pour éviter des peintures d'écran excessives et des éclairs de style.
Je place la plupart des demandes de fichiers JavaScript au bas de la page afin que la page puisse rendant rapidement (le chargement HTML / CSS bloquera jusqu'à ce que les balises de script au-dessus d'elles aient été chargées et traitées). Tout code qui doit être exécuté après que les fichiers de la bibliothèque chargés sont exécutés Ondomréady, qui est tout code, à l'exception de l'initialisation de la bibliothèque. Je suis à peu près suivi Recommandations de Google PagePeed .
J'ai pensé à utiliser Labjs ainsi que pour réduire davantage les heures de chargement de la page, mais cela fonctionne assez bien en ce moment.
Je mettais un petit script dans la tête qui fait tout ce que je veux faire avant que le reste de la page rend et charge tout autre script de scripts requis, ou au besoin après la charge du document.
Lorsque le navigateur rencontre un élément de script , il faut évaluer le JavaScript contenu dans cet élément car le script peut modifier le contenu de la page (via Si le script (code> Elément charge le script à l'aide de l'attribut Ces deux facteurs peuvent ralentir le temps de chargement perçu de votre page.
Si votre JavaScript ne modifie pas la page ou si elle n'a pas besoin d'inspecter l'état de la page jusqu'à ce qu'il ait chargé, vous pouvez marquer votre fichier document.write ) ou inspecter l'état actuel de la page.
src , le chargement d'autres ressources (JavaScript, CSS, images, etc.) sera bloqué jusqu'à ce que le script actuel soit chargé.
script avec reporer = "différer " (supporté par IE 6+ et Firefox 3.5+) qui indique que l'évaluation du script peut se produire" plus tard ". Déplacer votre script au bas de la page fait efficacement la même chose - car vos scripts apparaissent à la fin du document, ils seront évalués après que CSS, images, etc. sont chargés et le HTML est rendu.
chaque fois que vous pouvez ne casser aucune fonctionnalité.
@MAURICIO SCHEFFER: Que voulez-vous dire?
Lollll! Je pense qu'il parle de vous mettre un script au bas de la page.
Désolé si je n'étais pas assez clair. Je voulais dire: Mettez votre code JS aussi près que possible du fond sans rien ne rien casser. Si vous déplacez du code en bas et que vous obtenez une erreur JS, vous êtes allé trop loin :-)