Cargando jQuery con RequireJS - ¿Qué es mejor, una versión local o una CDN?

Question

editado para aclarar:

En términos de rendimiento (aunque eso es todavía un término salvaje, lo sé), que es mejor - la carga de una versión local, o una versión de CDN de jQuery, sobre RequireJS?

Para el registro, RequireJS online doc contiene algún pasaje que parece desalentar CDN usando, aunque no estoy muy seguro de 100% sobre lo que significa:

No mezcle CDN de carga con configuración de cuña en una generación. Escenario de ejemplo: carga jQuery desde el CDN pero usa la configuración shim para cargar algo como la versión original de Backbone que depende de jQuery. Cuando realice la compilación, asegúrese de alinear jQuery en el archivo generado y no lo cargue desde el CDN. De lo contrario, Backbone se insertará en el archivo creado y se ejecutará antes de que se cargue la jQuery cargada con CDN. Esto es porque la configuración shim solo demora la carga de los archivos hasta que se carguen las dependencias , pero no realiza ningún ajuste automático de definir. Después de una compilación, las dependencias ya están en línea, la configuración shim no puede retrasar la ejecución del código no definido() 'd hasta más adelante. define() 'd módulos funcionan con código CDN cargado después de una compilación porque envuelven adecuadamente su origen en la función de definición de fábrica que no se ejecutará hasta que se carguen las dependencias. Entonces, la lección: shim config es una medida provisional para código no modular, código heredado. define() 'd los módulos son mejores.

Theoratically, utilizando un archivo de jQuery CDN resultaría en más de 1 solicitud HTTP (no puede ser combinado con otros archivos JS utilizando r.js), pero tiene la ventaja potencial de que sus visitantes pueden ya han almacenado en caché la CDN versión de otros sitios que han visitado.

Sin embargo, si lo tengo derecho de la información buscado en Google, que todavía necesario ofrecer un local de jQuery copiar a r.js, como el archivo JS minified resultante seguiría siendo necesario para contener una copia de la jQuery módulo para garantizar la consistencia de la dependencia. Eso daría como resultado cargar jQuery tanto en local como en CDN. (Espero que tenga esta parte, ¿verdad?)

Entonces, ¿qué camino es mejor?

Answer 1

No es solo el hecho de que las personas hayan guardado en caché el archivo. los agentes de usuario solo pueden cargar un par de archivos del mismo dominio al mismo tiempo. Por lo tanto, cargar el archivo JS desde un CDN garantiza que el archivo se cargue simultáneamente.

Esto viene junto a la ventaja de que los usuarios ya tengan una versión en caché del archivo. Por lo tanto, para archivos populares (por ejemplo, el javascript de jQuery), siempre lo cargaba desde un CDN.

Siempre puede agregar una alternativa a una versión local en caso de que el CDN se caiga por alguna razón.

Nota

Aunque el RFC establece que los agentes de usuario deberían hacer un número máximo de peticiones simultáneas 2 la mayoría de los agentes de usuario ignoran esta especificación en la actualidad. También vea this old (2009) question en SO.Tenga en cuenta que no me sorprendería que los usuarios-agentes actualmente hagan aún más solicitudes.

Answer 2

Respuesta corta: Evitar la petición HTTP extra y búsqueda de DNS

Lo más probable es mejor usar su propia copia y dejar RequireJS combinar los archivos. En otras palabras, diría que es más valioso evitar esa solicitud HTTP adicional y la búsqueda DNS.

Si bien es cierto que un usuario puede tener ese archivo en su caché desde otro sitio, es muy probable que no lo haga. Incluso si hubieran estado en otro sitio recientemente, los tamaños de caché generalmente son lo suficientemente pequeños como para que durante el transcurso de una o dos sesiones de navegación normales, un usuario pueda llenar fácilmente su caché, en cuyo caso se descartarán los archivos más antiguos.

Creo que solo estaría hablando del 1% de su tráfico, como máximo, que ya tiene el archivo CDN en el caché, por lo que solo el 1% de sus usuarios se están beneficiando. Sin embargo, al combinar esos recursos y evitar la solicitud HTTP adicional, está beneficiando al 99% de sus usuarios. Por el contrario, estarías lastimando al 99% de los usuarios al no combinar. Solo otra forma de ver esto.

Otra consideración son los usuarios de dispositivos móviles ... los usuarios de dispositivos móviles tienen una latencia terrible, por lo que el RTT para la búsqueda http adicional y la búsqueda de dns tienen un costo mayor.

Answer 3

Su cita doc requirejs es específicamente sobre el uso de scripts que tienen una configuración shim para jQuery. La carga dinámica de una dependencia base desde un CDN de un tercero está bien si todos los scripts son módulos AMD.

Los hits de caché no son tan altos como se podría pensar (Yahoo creo que hizo un estudio sobre caché vs estado no en caché), y ahora significa que ahora tiene que depender de otro dominio para cargar.

Los beneficios probablemente dependen de la aplicación, la creación de perfiles dará lugar a la mejor respuesta. Por ejemplo, si se trata de un sitio con muchas imágenes, la estrategia para jquery importa menos, ya que la carga de la imagen probablemente sea el problema de rendimiento más notable.

Empezaría con la optimización de jQuery en el archivo construido y el uso de módulos AMD para todo, por lo que si deseo delegar en el CDN puedo hacerlo. Sin embargo, si usa requirejs y la configuración shim, las dependencias base deben estar insertadas en el archivo generado porque las bibliotecas shimmed no llaman a define(): no esperan que se carguen las dependencias, sino que quieren que estén disponibles de inmediato.