Toute différence entre le chargement paresseux fichiers Javascript par rapport à placer juste avant

StackOverflow https://stackoverflow.com/questions/2901265

Question

Regarda autour de lui, n'a pas pu trouver cette question spécifique discuté. À peu près sûr la différence est négligeable, curieux de vos pensées.

Scénario: Tout Javascript qui n'a pas besoin d'être chargé avant la page render a été placé juste avant la balise </body> de fermeture. Y a-t-il des avantages ou inconvénients pour le chargement paresseux par ceux-ci à la place du code Javascript dans la tête qui exécute lorsque l'événement de chargement DOM / prêt est mis à feu? Disons que cela ne concerne que le téléchargement d'un fichier .js ensemble complet de fonctions et ne se charge pas paresseux plusieurs fichiers individuels selon les besoins lors de l'utilisation.

L'espoir qui est clair, merci.

Était-ce utile?

La solution

Il y a une grande différence, à mon avis.

Lorsque vous en ligne la JS au fond de la balise <body>, vous forçant la page à charger les <script>s synchrone (doit se produire maintenant) et séquentiellement (dans une rangée), donc vous ralentir la page un peu , comme vous devez attendre les appels HTTP à la fin et le moteur JS pour interpréter vos scripts. Si vous mettez beaucoup de JS empilés ensemble au bas de la page, vous pourriez perdre le temps avec mise en attente du réseau de l'utilisateur (dans les anciens navigateurs seulement 2 connexions par hôte à la fois), les scripts peuvent dépendre les uns des autres , de sorte qu'ils doivent être téléchargés dans l'ordre.

Si vous voulez que votre DOM soit prêt plus rapidement (en général ce que la plupart attente à faire une gestion des événements et de l'animation), vous devez réduire la taille des scripts que vous devez aussi peu que possible, ainsi que les paralléliser.

Par exemple, YUI3 a une petite résolution des dépendances et un script de téléchargement que vous devez charger séquentiellement dans la page (voir les seed.js de YUI3). Après cela, vous passez par la page et rassemblez les dépendances et faire 1 appel asynchrone et à leur CDN pipe-line (ou vos propres serveurs) pour obtenir une grosse boule de JS. Après la balle JS est retourné, vos scripts exécutent les callbacks que vous avez fourni. Voici le schéma général: 

<script src="seed.js"></script>
<script>

    YUI().use('module', function(Y) {
        // done when the ball returns and is interpretted
    });

</script>

Je ne suis pas particulièrement grand fan de mettre vos scripts dans une grosse boule (parce que si 1 dépendance change, vous devez télécharger à nouveau! Et d'interpréter la chose), mais je suis un fan de pipe doublure (combinant scripts) et le modèle événementiel.

Lorsque vous autorisez pour le chargement asynchrone, basé sur les événements, vous obtenez une meilleure performance, mais peut-être pas perçu la performance (même si cela peut être contrecarrée).

Par exemple, certaines parties de la page ne se charge pas pour une seconde ou deux, et regardez donc différent (si vous utilisez JS pour affecter le style de page, que je ne pas conseiller) ou ne pas être prêt pour l'interaction de l'utilisateur jusqu'à ce que vous (ou ceux d'hébergement de votre site) retour de vos scripts.

En outre, vous devez faire un travail pour vous assurer que vos <script>s ont les dépendances droit d'être en mesure d'exécuter correctement. Par exemple, si vous n'avez pas jQuery ou Prototype, vous ne pouvez pas appeler avec succès: 

<script>

    $(function () {
        /* do something */
    });

</script>

ou 

<script>

    document.observe('dom:loaded', function {
        /* do something */
    });

</script>

comme interpretter dira quelque chose comme « Variable $ non définie ». Cela peut se produire même si vous avez ajouté les deux <script>s au DOM en même temps , que je serais prêt à parier jQuery ou Prototype sont plus grandes que vous JS de demande êtes la (si la demande de données prend plus long). De toute façon, sans un certain type de limitation, vous laissant cette place au hasard.

Alors, le choix est vraiment à vous. Si vous pouvez correctement segmenter vos dépendances -. À savoir mettre les choses dont vous avez besoin avant et paresseusement charger les autres choses plus tard, il va entraîner dans le temps plus rapidement l'ensemble jusqu'à ce que vous atteignez le DOM être prêt

Cependant, si vous utilisez une bibliothèque monolithique comme jQuery ou qu'attend l'utilisateur pour être en mesure de voir quelque chose impliquant l'animation JS ou de style tout de suite , inline pourrait être mieux pour vous.

Autres conseils

En termes de facilité d'utilisation, vous ne devriez certainement pas le faire avec tout ce que l'utilisateur attend une réponse rapide comme ayant un bouton faire double comme déclencheur de charge en plus de ses autres fonctions.

remplacement pagination par le chargement en continu la page que l'utilisateur fait défiler est une très bonne idée. Je ne trouve une distraction lorsque la gâchette de charge est vers la fin de la page, il vaut mieux le mettre 1/2 à 3/4 du chemin vers le bas.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top