Question

Si vous utilisez un seul fichier javascript pour contenir tous les scripts, où placez-vous les scripts pour une seule page?

Contexte

Cela peut être une question d'opinion ou de "meilleure pratique" mais je suis intéressé par les opinions des autres:

J'utilise la html5 Boilerplate sur un projet. Ils recommandent de placer tout le javascript dans un seul fichier {{X0} } pour la vitesse et la cohérence. Semble raisonnable.

Cependant, j'ai un peu de script de géolocalisation qui ne concerne qu'une seule page, et pas d'autres. Dois-je rompre la convention et simplement mettre ce script sur la page sous mes appels aux bibliothèques javascript dont il dépend? Il suffit de passer des appels aux fonctions pertinentes (situées dans le fichier script.js), sous les liens vers les bibliothèques dont elles dépendent?

Merci!

6
Jeff 20 déc. 2011 à 23:08

4 réponses

Meilleure réponse

Les bons employés de html5 passe-partout recommandent de mettre tout votre javascript dans script.js pour que le navigateur n'ait qu'à charger ce fichier (ainsi que les autres que h5bp utilise) et pour permettre la mise en cache de ce fichier.

L'idée n'est pas de se laisser prendre au «recommandé» et de penser aux choses liées à ses propres applications.

  • Ce fichier de géolocalisation ne sera utilisé que sur cette seule page, non? Il ne sera jamais utilisé ailleurs.
  • Le fichier script.js sera utilisé sur plusieurs pages.

Eh bien, cela n'aurait aucun sens de mettre un "script entier" qui ne sera nécessaire que sur une seule page du fichier script.js. Vous devez rendre le fichier externe et l'appeler séparément sur la page dont il a besoin. Cela vous évitera de gonfler le fichier script.js pour des fonctionnalités qui pourraient ne jamais être utilisées par cet utilisateur.

Cependant, si votre "script entier" pour la fonctionnalité de géolocalisation est assez petit, alors incluez-le dans script.js. Si cela n'ajoute pas à la vitesse de téléchargement de ce fichier, il est logique de l'inclure ici.

L'essentiel de tout cela est, Quel est le meilleur compromis pour mon application?

Ces choses que nous savons être vraies:

  • les fichiers js mis en cache sont bons
  • moins de fichiers à télécharger sont bons
  • les petits fichiers à télécharger sont bons
  • l'entretien est important

Une fois que vous pensez à ces choses en termes de votre demande, la prise de décision devient un peu plus facile. Et rappelez-vous, les décisions qui font des compromis en millisecondes ne feront pas beaucoup de différence dans la «perception» de votre utilisateur de la vitesse de votre page.

5
swatkins 20 déc. 2011 à 19:27

Je pense que vous devriez le mettre dans un fichier séparé. Le fait de placer tous les scripts dans un seul fichier peut entraîner des comportements et des conflits inattendus. J'aime avoir un fichier de script pour le javascript que toutes les pages utiliseront contenant des plugins, des fonctions d'assistance, des fonctions de formatage, etc. Et puis créer un fichier js distinct pour tout ce qui est pertinent uniquement pour chaque page.

Si vous souhaitez toujours n'avoir qu'un seul fichier js dans le navigateur, vous pouvez profiter de l'un de ces utilitaires qui combinent plusieurs fichiers js en un seul.

0
epignosisx 20 déc. 2011 à 19:17

Le navigateur ne téléchargera les fichiers .js qu'une seule fois (sauf si quelque chose se produit pour décourager le navigateur de mettre en cache). Donc, si vous vous attendez à ce que tous vos utilisateurs accèdent à la seule page qui utilise la géolocalisation au cours de leur session, vous pouvez tout aussi bien la leur donner tôt. Si vous vous attendez à ce qu'un petit pourcentage de vos utilisateurs atteigne finalement la page de géolocalisation, vous souhaiterez peut-être les diviser.

1
MatthewMartin 20 déc. 2011 à 19:12

Divisez-le en un fichier .js distinct afin qu'il puisse être mis en cache. Référencez ensuite les deux fichiers .js externes à partir de votre page.

0
Mike Hofer 20 déc. 2011 à 19:15
8580644