¿Es mejor poner el código JS en el archivo html o en un archivo externo?

16

Si estoy diseñando un sitio web de una página, ¿es mejor crear un archivo externo para mi código JS, o simplemente ponerlo en el código html? ¿Ponerlo en la página es más rápido de cargar? ¿Puedo cambiar los permisos para denegar las solicitudes de los usuarios para el código, pero la página html aún puede llamar al código?

AqeelAT
fuente

Respuestas:

26

Debe poner su código JS en un archivo separado porque esto facilita la prueba y el desarrollo. La cuestión de cómo sirve el código es una cuestión diferente.

  • Servir el HTML y el JS por separado tiene la ventaja de que un cliente puede almacenar en caché el JS. Esto requiere que envíe encabezados apropiados para que el cliente no emita una nueva solicitud cada vez. El almacenamiento en caché es problemático si desea realizar una actualización y, por lo tanto, invalidar las memorias caché del cliente. Un método es incluir un número de versión en el nombre del archivo, por ejemplo /static/mylibrary-1.12.2.js.

    Si el JS está en un archivo separado, no puede restringir el acceso a él: es difícil (técnicamente: imposible) saber si se realizó una solicitud a un archivo JS porque lo hizo referencia en su página HTML o porque alguien quiere descargarlo directamente. Sin embargo, puede usar cookies y negarse a servir a los clientes que no transmiten ciertas cookies (pero eso sería una tontería).

  • Servir el JS dentro del HTML aumenta el tamaño de cada página, pero esto está bien si es poco probable que un cliente vea varias páginas. Debido a que el cliente no emite una solicitud por separado para el JS, esta estrategia carga la página más rápido, al menos por primera vez, pero hay un punto de equilibrio donde el almacenamiento en caché es mejor. Puede incluir el JS, por ejemplo, a través de PHP.

    Aquí el cliente no necesita acceso separado al archivo JS, que puede ocultarse si lo desea. Pero cualquiera puede ver el código JS dentro del HTML.

Otras estrategias para minimizar los tiempos de carga incluyen

  • Minificación JS que reduce el tamaño del archivo JS que sirve. Como la minificación solo ocurre una vez al implementar el código, este es un método muy eficiente para guardar bytes. OTOH esto hace que su código sea más difícil de entender para los visitantes interesados.

    Relacionado con la minificación está la práctica de combinar todos sus archivos JS en un solo archivo. Esto reduce la cantidad de solicitudes necesarias.

  • Compresión, que agrega una sobrecarga computacional para cada solicitud tanto en el cliente como en el servidor. Sin embargo, el tiempo empleado (des) comprimir suele ser menor que el tiempo dedicado a transmitir los datos sin comprimir. La compresión generalmente se maneja de manera transparente por el software del servidor.

Estas técnicas también se aplican a otros recursos como las imágenes.

  • Las imágenes se pueden insertar en HTML o CSS con URL de datos. Esto solo es práctico para imágenes pequeñas y simples, ya que la codificación base64 infla el tamaño. Esto aún puede ser más rápido que otra solicitud.
  • Se pueden combinar varias imágenes pequeñas (iconos, botones) en una sola imagen y luego extraerlas como sprites.
  • El servidor puede reducir las imágenes al tamaño en el que realmente se usan en el sitio web, lo que ahorra ancho de banda. Compara imágenes en miniatura.
  • Para algunos gráficos, las imágenes basadas en texto como SVG pueden ser mucho más pequeñas.
amon
fuente
"Prueba y desarrollo más fáciles", no estoy seguro de que siempre sea útil tener JS en su propio archivo para este propósito. En un proyecto utilizo archivos HTML muy pequeños, y en realidad está más organizado para incluirlos con el HTML. En cuanto al almacenamiento en caché, puede mejorar las velocidades en múltiples visitas (tal vez), pero para la primera carga de la página siempre será más rápido incluir el JavaScript directamente en el HTML.
YungGun
5

Estoy diseñando un sitio web de una página

Si literalmente solo tiene una página, entonces sí, es mejor (desde el punto de vista del rendimiento) servir todo en un solo archivo ... hojas de estilo, JavaScript e incluso imágenes (imágenes pequeñas alineadas con URI de datos). Esto elimina las solicitudes HTTP adicionales necesarias para recuperar recursos externos que son relativamente lentos.

El archivo resultante se debe comprimir antes de servir, lo que reducirá enormemente el tamaño de la respuesta de todo el texto.

Todavía debe considerar tener imágenes grandes externas a la página, ya que existen límites para el tamaño de los URI de datos y la compatibilidad del navegador. (por ejemplo, IE8 tiene un límite de 32 KB, lo que equivale a un tamaño de archivo real de aproximadamente 23 KB debido a la naturaleza de la codificación base64).

¿Puedo cambiar los permisos para denegar las solicitudes de los usuarios para el código, pero la página html aún puede llamar al código?

No. En el mejor de los casos, el código puede ofuscarse para "ocultarlo" al observador casual, pero no ofrece protección real.

Señor White
fuente
1
¿Por qué el voto negativo? Si bien es mejor que los sitios de desarrollo y de páginas múltiples tengan archivos separados / externos, el OP en este caso pregunta específicamente sobre un "sitio web de una página" y si es "más rápido de cargar". Minimizar las solicitudes HTTP debería ser una prioridad en esta instancia. Puede (y debe) seguir desarrollándose con varios archivos, pero esa no es la pregunta que se hace.
MrWhite
Al colocar js, css e imágenes en archivos separados, permite que el navegador almacene en caché los archivos. Entonces, si el contenido de la página cambia, solo el html tendrá que volver a cargarse.
Thierry J.
@ThierryJ. De acuerdo, puede almacenar en caché los archivos, pero en la carga de la primera página (que es muy importante para adquirir nuevos usuarios) todavía es mucho más rápido incluir todos los archivos ya que el almacenamiento en caché no está en vigor. Además, la computadora todavía tiene que cargar el archivo en caché, un paso que se omite por completo si incluye el archivo en el HTML. Probablemente va a ser más rápido tener el archivo incluido en el HTML en primer lugar en casi todos los casos. Tendrá que volver a cargar el HTML de todos modos, y la porción de JavaScript no puede ser más de cien kB, es insignificante.
YungGun
4

El navegador debe ver el código JS del lado del cliente (es decir, si la página necesita usar JS directamente), eso significa que debe ser descargado por el navegador.

No puede hacer que un navegador use JS en la página si no puede descargarlo.

En ese sentido, no hace una gran diferencia si inserta el JS o lo coloca en un archivo, aunque la práctica común es usar un archivo JS (separación de preocupaciones para uno).

Si tiene un código que no desea exponer al navegador, deberá usar el código del lado del servidor (por ejemplo, node.js, php, perl, asp.net, jsp; hay muchas opciones) e interactuar con él. desde el navegador, ya sea en la carga de la página inicial o usando AJAX .

Oded
fuente
2

Bueno, depende de la cantidad de código y de qué tan serio es usted acerca de ser un programador / ingeniero de software en lugar de solo un codificador. Trabajé con un montón de diseñadores que pusieron fragmentos cortos de código directamente en HTML, y mientras me encogía, realmente funcionó.

Aunque no es algo que yo haría yo mismo, y si desea conocer las mejores prácticas de desarrollo de software, le recomiendo encarecidamente que lo almacene todo en un *.jsarchivo externo y lo cargue mediante <script>etiquetas.

Con respecto a su segundo punto, no, no puede negarle al usuario o al navegador que vea su código, hay algo llamado obfuscationque hará que su código sea más difícil de leer, sin embargo, el rendimiento se degradará.

David Sergey
fuente
1

¿Es mejor crear un archivo externo para mi código JS, o simplemente ponerlo en el código html?

Es mejor crear un archivo externo para su código JS. También es mejor tener uno o dos archivos que sirva al cliente. Sin embargo, es también mejor tener su división de código JS a través de archivos múltiples para los problemas de mantenimiento. Para poder hacer esto, puede usar preprocesadores como Gulp que combinarán sus diferentes archivos JS en un solo archivo.

Servir menos archivos es mejor ya que el cliente tendrá menos solicitudes HTTP para manejar.

¿Ponerlo en la página es más rápido de cargar?

Sí, obviamente es más rápido ya que solo hace una solicitud para el HTML, mientras que haría muchas solicitudes (al menos 2) con su código JS como externo. Esto es solo si su código JS no está minimizado en ninguno de los lados, y esto no tiene en cuenta lo difícil que será mantener su código si todo está en una sola página HTML.

¿Puedo cambiar los permisos para denegar las solicitudes de los usuarios para el código, pero la página html aún puede llamar al código?

No, no puedes. El código JS, como el código CSS y el código HTML, es contenido estático. Eso significa que una vez que está en el navegador, el cliente puede descargarlo y su contenido por completo. Todos los archivos, imágenes y guiones están abiertos para ser descargados. Pero , puede minificar / uglificar su código para que sea más difícil para un ser humano usarlo. Eso es solo una consecuencia de la uglificación, que se hizo primero para el rendimiento.

Steve Chamaillard
fuente
0

Muchos beneficios de separar el contenido html y javascript en archivos separados:

  • aumenta la legibilidad de archivos individuales por supuesto
  • Como el código JavaScript ya no está confinado en un archivo html, los otros archivos o bibliotecas html y javascript pueden usar su código javascript
  • de manera similar, el código javascript colocado en un archivo separado puede usar fácilmente otros archivos y bibliotecas avanzadas para hacer cálculos complejos (aprendizaje automático, gráficos 3D, marcos, etc.)
  • JavaScript se puede almacenar en caché en el lado del cliente y, a través de eso, solo el contenido html debe volver a cargarse en la actualización de la página
  • las prácticas de ingeniería de software buenas / modernas se pueden aplicar más fácilmente a un archivo / módulo / biblioteca javascript separado (patrones de diseño, leer sobre mecanografiado / babel, etc.)
  • El código JavaScript se puede ofuscar u ocultar fácilmente a los visitantes de la página web mediante minificación / uglificación
  • los archivos javascript se pueden agrupar en un solo archivo / módulo a través de gulp, webpack, etc.
shubham agarwal
fuente
1
Esto no parece ofrecer nada sustancial sobre los puntos hechos y explicados en las 6 respuestas anteriores
mosquito