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?
Respuestas:
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.
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.
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 .
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á.
¿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.
Muchos beneficios de separar el contenido html y javascript en archivos separados: