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

Pregunta:

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 se carga más rápido? ¿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?

Respuesta:

Debe poner su código JS en un archivo separado porque esto hace que sea más fácil de probar y desarrollar. La cuestión de cómo se entrega el código es un asunto 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 los 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, desea invalidar las cachés del cliente. Un método consiste en 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 hizo referencia a él en su página HTML o porque alguien quiere descargarlo directamente. Sin embargo, puede usar cookies y negarse a atender 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 separada para el JS, esta estrategia carga la página más rápido, al menos por primera vez, pero hay un punto de equilibrio en el que el almacenamiento en caché es mejor. Puede incluir el JS, por ejemplo, a través de PHP.

    Aquí, el cliente no necesita un 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 ahorrar 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 el número 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 en (des) comprimir suele ser menor que el tiempo empleado en transmitir los datos sin comprimir. La compresión suele ser gestionada de forma transparente por el software del servidor.

Estas técnicas también se aplican a otros recursos como 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 aumenta 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 se utilizan realmente 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.

Leave a Comment

Your email address will not be published.

Scroll to Top

istanbul avukat

-

web tasarım