Ponga javascript en un archivo .js o divídalo en varios archivos .js?

Question

Mi aplicación web utiliza jQuery y algunos complementos jQuery (por ejemplo, validación, autocompletar). Me preguntaba si debería pegarlos en un solo archivo .js para que pueda guardarlos en caché más fácilmente o separarlos en archivos separados y solo incluir los que necesito para una página determinada.

Debo mencionar también que mi preocupación no es solo el tiempo que lleva descargar los archivos .js sino también cuánto se ralentiza la página según el contenido del archivo .js cargado. Por ejemplo, agregar el complemento de autocompletar tiende a ralentizar el tiempo de respuesta en 100 ms más o menos desde mis pruebas básicas, incluso cuando está en caché. Supongo que tiene que escanear los elementos en el DOM que causa esta demora.

Answer 1

Si las personas van a visitar más de una página en su sitio, probablemente sea mejor colocarlas todas en un solo archivo para que puedan almacenarse en caché. Tomarán un hit por adelantado, pero eso será todo el tiempo que pasen en su sitio.

Answer 2

Al final del día depende de usted.

Sin embargo, mientras menos información contenga cada página web, más rápido será descargada por el visor final.

Si sólo incluye los archivos js requeridos para cada página, parece más probable que su sitio web será más eficiente y racionalizado

Answer 3

común pero relevante respuesta:

Depende del proyecto .

Si tiene un sitio web bastante limitado donde la mayor parte de la funcionalidad se reutiliza en varias secciones del sitio, tiene sentido colocar todas las secuencias de comandos en un solo archivo.

En varios proyectos web grandes en los que he trabajado, sin embargo, tiene más sentido poner la funcionalidad común de todo el sitio en un solo archivo y poner la funcionalidad más específica de la sección en sus propios archivos. (Estamos hablando de archivos de script grandes aquí, para el comportamiento de varias aplicaciones web distintas, todas servidas bajo el mismo dominio).

El beneficio de dividir el script en archivos separados, es que no tiene que brinde a los usuarios contenido innecesario y ancho de banda que no están usando. (Por ejemplo, si nunca visitan la "Aplicación A" en el sitio web, nunca necesitarán los 100K de script para la sección "App A". Pero necesitarían la funcionalidad común de todo el sitio).

El beneficio mantener la secuencia de comandos bajo un archivo es simplicidad. Menos visitas al servidor Menos descargas para el usuario.

Como siempre, sin embargo, YMMV. No hay una regla rígida. Haga lo que tenga más sentido para sus usuarios según su uso y según la estructura de su proyecto.

Answer 4

Si los archivos son necesarios en cada página, colóquelos en un solo archivo. Esto reducirá el número de solicitudes HTTP y mejorará el tiempo de respuesta (para muchas visitas).

Ver Yahoo best practice para otros consejos

Answer 5

Si te gusta el código en archivos separados para el desarrollo siempre se puede escribir una escritura rápida para concatenar en un único archivo antes de minimización.

Un archivo grande es mejor para reducir las solicitudes HTTP como lo han indicado otros carteles.

Answer 6

También creo que debería ir por la ruta de un solo archivo, como los otros han sugerido. Sin embargo, para su punto en complementos consumiendo ciclos simplemente incluyéndolo en su archivo js grande:

Antes de ejecutar una operación costosa, use algunas comprobaciones para asegurarse de que está incluso en una página que necesita las operaciones. Quizás pueda detectar la presencia (o ausencia) de un nodo dom antes de ejecutar el complemento de autocompletar, y solo inicializar el complemento cuando sea necesario. No hay necesidad de desperdiciar los gastos generales de dom crossing en páginas o secciones que nunca necesitarán cierta funcionalidad.

Un simple condicional antes de un trozo de código caro le dará los beneficios de ambos enfoques que está decidiendo.

Answer 7

Estoy bastante de acuerdo con lo que dice bigmattyh, no depende.

Como regla general, trato de agregar los archivos de script tanto como sea posible, pero si tiene algunos scripts que solo se usan en algunas áreas del sitio, especialmente aquellos que realizan recorridos DOM grandes en carga, tendría sentido dejarlos en archivos separados.
p. Si solo usa la validación en su página de contacto, ¿por qué cargarla en su página de inicio?

Como nota aparte, a veces puede colar estos archivos en páginas intersticiales, donde no sucede mucho más, por lo que cuando un usuario aterriza en una página bastante pesada que lo necesita, ya debe estar en caché: use con precaución - pero puede ser un truco útil cuando tienes a alguien como punto de referencia.

Por lo tanto, el menor número de archivos de script posible, dentro de lo razonable.

Si está enviando un monolito de 100K, pero solo utilizando 20K de este para el 80% de las páginas, considere dividirlo.

Answer 8

Depende bastante de la forma en que los usuarios interactúan con su sitio.

Algunas preguntas que debe considerar:

• ¿Cuán importante es que su primera carga de la página sea muy rápido?
• ¿Los usuarios suelen pasar la mayor parte del tiempo en distintas secciones del sitio con subconjuntos de funcionalidad?
• ¿Necesita todos los guiones listos en el momento en que la página está lista, o puede cargar algunos después de cargar la página insertando elementos <script> en la página?

Tener una buena idea de cómo los usuarios usan su sitio, y lo que quiere optimizar es una buena idea si realmente busca impulsar el rendimiento.

Sin embargo, mi método predeterminado es simplemente concatenar y minificar mi javascript en un solo archivo. jQuery y jQuery.ui son pequeños y tienen una sobrecarga muy baja. Si los complementos que está utilizando tienen un efecto de 100 ms en el tiempo de carga de la página, entonces algo podría estar mal.

Algunas cosas a comprobar:

• Se gzipping habilitado en su servidor HTTP?
• ¿Está generando archivos estáticos con nombres únicos como parte de su implementación?
• ¿Está sirviendo archivos estáticos con expiraciones de caché interminables?
• ¿Está incluyendo su CSS en la parte superior de la página y sus scripts en la parte inferior?
• ¿Hay un plugin jQuery mejor (más pequeño, más rápido) que hace lo mismo?

Answer 9

Creo que depende de la frecuencia con la que cambien. Vamos a tomar este ejemplo:

• JQuery: el cambio una vez al año
• plugins 3 ª parte: cambiar cada 6 meses
• el código personalizado: cambiar todas las semanas

Si el código personalizado representa sólo 10% del código total, no desea que los usuarios descarguen el otro 90% cada semana. Se dividiría en al menos 2 js: los complementos JQuery + y su código personalizado. Ahora, si su código personalizado representa el 90% del tamaño completo, tiene más sentido poner todo en un solo archivo.

Al elegir cómo combinar archivos JS (y lo mismo para CSS), equilibro:

• tamaño relativo del archivo
• número de cambios espera