Mon ami Lisez un article qui mentionnait que déplacer tous les fichiers JavaScript à la fin de la balise de fermeture de fermeture ( J'ai déplacé tous les fichiers JS à la fin, à l'exception des fichiers JQuery et JS qui attachent l'événement à un élément de la page, comme ci-dessous; p> corort> code>), améliorera les performances d'une page Web. $(document).ready(function(){
//submit data
$("#create_video").click(function(){ //... });
});
7 Réponses :
Le $ (document) .Ready La fonction ne veut pas fonctionner tant que le DOM a fini d'être instancié - ainsi de déplacement à l'autre après que le corps est correct tant que la bibliothèque JQuery est chargée d'abord. Non conventionnel et certaines hypothèses peuvent ne plus être correctes, mais d'accord.
C'est une pratique standard pour déplacer tout votre JS inclut le bas de votre page. En effet, lorsqu'un navigateur charge le script, il n'accroche pas un nouveau fil pour le faire, donc fondamentalement, le navigateur attendra jusqu'à ce qu'il ait chargé le script avant de passer à la ligne suivante.
Qu'est-ce que cela signifie pour vos utilisateurs est qu'ils verront un écran vide. Bien mieux de les voir voir la page complète (ish) comme alors cela ne semble pas être bloqué.
Il suffit de prendre en compte que le fichier JQuery JavaScript doit être chargé avant n'importe quel appel à la $ (...) fonction.
Utilisez JavaScript discret (Ajout d'auditeurs d'événements aux éléments au lieu d'OnClik = "...", etc.). Mettez tous vos fichiers .js au bas de la balise du corps, avec la bibliothèque principale (jQuery dans ce cas) placée en premier, et tout ira bien. Vous pouvez utiliser un Bundler comme Bundle FU
Vous verrez une grosse performance de chargement de votre page.
Q - Pourquoi est-ce que je vois souvent JavaScript écrit / inclus avant la fermeture élément de corps dans un document (x) HTML?
Les éléments A - DOM ne peuvent pas être consultés par javascript jusqu'à ce que le navigateur ait chargé les éléments HTML dans le DOM. En plaçant JavaScript à la fin d'un (x) Document HTML (avant la fermeture élément de corps), vous vous assurerez que Le script est appelé dès que le DOM est construit / chargé et prêt pour la manipulation. Un avantage de cette approche est que le code JavaScript est exécuté juste après que le DOM soit construit et éventuellement avant le L'événement surcharger serait incendier.
Les débutants JavaScript sont trébuchés par Ceci constamment en plaçant du code que Manipule le DOM dans l'en-tête élément d'un document HTML (x) HTML. Cette provoque une erreur parce que le DOM a pas encore été construit et est donc pas encore accessible à JavaScript que traverse / manipule le DOM.
de
Exécution JavaScript et techniques de surlanches sur les navigateurs Web
La raison pour laquelle cet article vous a demandé de déplacer des scripts en bas, est de permettre à d'autres artefacts d'être téléchargés en premier. (CSS & Images, qui accéléreront les temps de rendu apparents)
Ceci est parce que http 1.1 recommande uniquement de télécharger 2 éléments par nom d'hôte. Et vous voudriez certainement que votre fichier CSS soit l'un des premiers fichiers téléchargés, plutôt que JavaScript, ce qui puisse rendre le site à affronter plus lentement (juste par le fait que le navigateur n'a pas encore reçu le fichier CSS et n'est pas sûr. ce qu'il devrait faire avec le HTML)
mais si vous avez utilisé Google pour héberger votre jQuery puis qui téléchargerait en parallèle et annule toute raison de la déplacer vers le bas de vos pages.
Alternativement, vous pouvez configurer un deuxième nom d'hôte pour accueillir du contenu statique (tel que CSS / Scripts / Images).
Mais Google a déjà fait le travail acharné pour vous, il est donc logique de l'utiliser s'il convient. : -)
Utilisez une "file d'attente Dom Ready" pour collecter des fonctions à exécuter une fois que JQuery est chargé et que le DOM est prêt.
Exemple: P>
<html>
<head>
<script type="text/javascript">
var domReadyQueue = [];
</script>
</head>
<body>
...
<div class="foo"></div>
<script type="text/javascript">
domReadyQueue.push(function($){
$('.foo').doSomething();
})
</script>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
while (domReadyQueue.length) {
domReadyQueue.shift()(jQuery);
}
});
</script>
</body>
</html>
Ceci est une question d'optimisation de la charge de page. Voir la réponse de Duncan pour plus de détails à ce sujet. Tant que vous utilisez la surcharge pour déclencher le début de l'exécution de votre script, cela devrait aller. Voir développeur.yahoo.com/performance/roules.html Pour plus.