Hacer referencia a javascript externo frente a alojar mi propia copia

Digamos que tengo una aplicación web que usa jQuery. ¿Es una mejor práctica alojar los archivos javascript necesarios en mis propios servidores junto con los archivos de mi sitio web, o hacer referencia a ellos en el CDN de jQuery (ejemplo: http://code.jquery.com/jquery-1.7.1.min.js ) ?

Puedo ver profesionales para ambos lados:

• Si está en mis servidores, esa es una dependencia externa menos; Si jQuery dejó de funcionar o cambió su estructura de alojamiento o algo así, entonces mi aplicación falla. Pero siento que eso no sucederá a menudo; debe haber muchos sitios pequeños haciendo esto, y el equipo de jQuery querrá evitar romperlos.
• Si está en mis servidores, esa es una referencia externa menos que alguien podría llamar un problema de seguridad
• Si se hace referencia externamente, entonces no tengo que preocuparme por el ancho de banda para servir los archivos (aunque sé que no es tanto).
• Si se hace referencia externamente y estoy implementando este sitio web en muchos servidores que necesitan tener sus propias copias de todos los archivos, entonces es un archivo menos que debo recordar copiar / actualizar.

Debes hacer ambas cosas:

Comience con el alojamiento de un CDN como el de Google porque probablemente tendrá un mayor tiempo de actividad que su propio sitio y estará configurado para el tiempo de respuesta más rápido. Además, cualquiera que haya visitado una página que enlaza con el CDN usará su copia en caché del archivo, por lo que ni siquiera tendrá que volver a descargar una copia, lo que hará que la carga inicial sea aún más rápida.

Luego, agregue una referencia alternativa a su propio servidor en caso de que el CDN esté inactivo (no es probable, pero seguro es seguro). Los fallbacks son relativamente fáciles de entender, pero deben personalizarse para adaptarse al script que se utiliza:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
    if (!window.jQuery) document.write('<script src="/path/to/jquery-ver.sion.min.js"><\/script>');
</script>

Asegúrese de no escribir en </script>ningún lugar dentro de un <script>elemento, ya que cerrará el elemento HTML y hará que el script falle. La solución simple es utilizar una barra invertida como una vía de escape: <\/script>.

_{Una razón más para hacer ambas cosas:}

Si elige un CDN popular, es muy poco probable que alguna vez tenga algún tiempo de inactividad, sin embargo, en el futuro lejano (~ 18 meses a partir de ahora, según la ley de Moore ) cuando cambie el formato de alojamiento, o se ajuste la dirección, o el la red se coloca detrás de un muro de pago, o cualquier otra cosa, es posible que su enlace ya no funcione como está. Si usa una reserva, entonces le dará un poco de tiempo para adaptarse a cualquier formato nuevo de alojamiento antes de tener que volver a visitar todos los sitios web que haya creado y cambiar los enlaces de CDN.

_{Otra razón para hacer ambas cosas:}

Recientemente he sido golpeado con una serie de cortes de Internet. Pude seguir trabajando localmente en proyectos donde había vinculado copias locales de recursos de script, y rápidamente descubrí que había una serie de proyectos que necesitaban vincular copias locales.

Tenía la misma pregunta, luego leí este artículo y me convenció la idea de dejar que Google alojara mi biblioteca jQuery.

El artículo establece los principales beneficios de permitir que sus bibliotecas sean alojadas por la Red de entrega de contenido (CDN) de Google:

• Disminución de la latencia : los usuarios que no estén físicamente cerca de su servidor podrán descargar jQuery más rápido de Google que si los obliga a descargarlo desde su servidor ubicado arbitrariamente.
• Paralelismo aumentado : los navegadores limitan el número de conexiones que se pueden realizar simultáneamente. Dependiendo de qué navegador, este límite puede ser tan bajo como dos conexiones por nombre de host. El uso de las bibliotecas de Google AJAX CDN elimina una solicitud a su sitio, permitiendo que más contenido local se descargue en paralelo.
• Mejor almacenamiento en caché : al utilizar las bibliotecas AJAX de Google, es posible que sus usuarios no necesiten descargar jQuery. Por otro lado, si aloja jQuery localmente, sus usuarios deben descargarlo al menos una vez. Es probable que cada uno de sus usuarios ya tenga docenas de copias idénticas de jQuery en la memoria caché de su navegador, pero esas copias de jQuery se ignoran cuando visitan su sitio.

En cuanto a los dos puntos que enumeró como profesionales para alojar su propia biblioteca, recuerde que es Google el que aloja la versión en la nube, y Google sabe lo que están haciendo y se puede confiar en cuanto a disponibilidad y seguridad. Sin embargo, @zzzzBov hace un muy buen punto en su respuesta a esta pregunta, donde recomienda también almacenar una copia local de la biblioteca y omitirla en el improbable caso de que no se pueda acceder a la versión CDN por ningún motivo.

Personalmente, tomo un ejemplo de http://html5boilerplate.com/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="includes/js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>

Esto extrae el archivo jQuery principal de Google, pero si por alguna razón no se carga, la siguiente línea lo carga desde su propio servidor.

Es una mejor práctica usar un CDN, y si ese CDN resulta ser Google, mucho mejor, como lo han notado @CFL_Jeff y @Morons.

Estoy agregando esta respuesta para señalar algo que a menudo se pasa por alto al señalar en otro lugar, lo que evita la advertencia de contenido mixto . Considere el uso de URL sin protocolo, por ejemplo:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript">
</script>

Todavía hay algunos problemas de soporte al usar URL sin protocolo, así que también eche un vistazo a las respuestas en ¿Puedo cambiar todos mis enlaces http: // a solo //? en SO, pero al menos trate de manejar posibles advertencias de contenido mixto de alguna manera.

Debe hacer referencia a la Biblioteca de API de Google .

La razón principal de esto es acelerar las cargas de su página . Si su usuario ya ha visitado otro sitio que hace referencia a la misma biblioteca, ya estará almacenado en la memoria caché del navegador y no será necesario descargarlo .

Podría estar equivocado, pero la implementación de document.write sobrescribe todo lo que tiene el DOM. Dado que es una buena práctica colocar archivos JavaScript al final del cuerpo,

Propongo el siguiente método basado en respuestas anteriores:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

if(!window.jQuery)
{
    //Creates the script element
    var script = document.createElement('script'); 
    //Adds the type attribute with "text/javascript" value
        script.setAttribute('type', 'text/javascript'); 
    //Adds the source attribute and populates it
        script.setAttribute('src', 'Put_The_Relative_Path_To_Your_JavaScript_File_Here'); 
    //Adds it to the end of the body, as it is good practice, to prevent render-blocking.  
    document.body.appendChild(script);

}

//Note that there's no need for you to verify with an onload function, since all scripts
//must be loaded before going to the next one! 

</script>

Me gustaría agregar que alojar una copia local es una práctica recomendada porque ninguna de las anteriores indica nada relacionado con una postura segura por la cual la ubicación geográfica y el listado blanco estricto son imprescindibles. No alojar ese archivo localmente supone impulsar una postura de seguridad reducida en sus clientes.