¿Desde dónde se incluye la biblioteca jQuery? ¿Google JSAPI? ¿CDN?
Hay algunas maneras de incluir jQuery y jQuery UI y me pregunto qué está utilizando la gente?
- Google JSAPI
- Sitio de jQuery
- su propio sitio / servidor
- otro CDN
Recientemente he estado usando Google JSAPI, pero he encontrado que se necesita mucho tiempo para configurar una conexión SSL o incluso solo para resolver google.com. He estado utilizando lo siguiente para Google:
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>
Me gusta la idea de usar Google para que se almacene en caché al visitar otros sitios y para ahorrar ancho de banda de nuestro servidor, pero si sigue siendo la parte lenta del sitio, puedo cambiar el incluir.
¿Qué usas? ¿Has tenido algún problema?
Edit: Acaba de visitar el sitio de jQuery y utilizan el siguiente método:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Edit2: Así es como he estado incluyendo jQuery sin ningún problema durante el último año:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
La diferencia es la eliminación de http:. Al eliminar esto, no necesita preocuparse por cambiar entre http y https.
16 answers
Sin duda elijo tener jQuery servido por servidores API de Google. No fui con el método jsapi ya que no aprovecho ninguna otra API de Google, sin embargo, si eso alguna vez cambió, entonces lo consideraría...
Primero: Los servidores de la api de Google se distribuyen por todo el mundo en lugar de mi ubicación de servidor único: Los servidores más cercanos generalmente significan tiempos de respuesta más rápidos para el visitante.
Segundo: Muchas personas eligen tener jQuery alojado en Google, por lo que cuando un el visitante que llega a mi sitio puede que ya tenga el script jQuery en su caché local. El contenido precalentado generalmente significa tiempos de carga más rápidos para el visitante.
Tercero: Mi empresa de alojamiento web me cobra por el ancho de banda utilizado. No tiene sentido consumir 18k por sesión de usuario si el visitante puede obtener el mismo archivo en otro lugar.
Entiendo que pongo una porción de confianza en Google para servir el archivo de script correcto, y para estar en línea y disponible. Hasta este punto no he sido decepcionado con el uso de Google y continuará esta configuración hasta que tenga sentido no hacerlo.
Una cosa que vale la pena señalar... Si tiene una mezcla de páginas seguras e inseguras en su sitio, es posible que desee cambiar dinámicamente la fuente de Google para evitar la advertencia habitual que se ve al cargar contenido inseguro en una página segura:
Esto es lo que se me ocurrió:
<script type="text/javascript">
document.write([
"\<script src='",
("https:" == document.location.protocol) ? "https://" : "http://",
"ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>"
].join(''));
</script>
ACTUALIZACIÓN 9/8/2010 - Se han hecho algunas sugerencias para reducir la complejidad de la el código mediante la eliminación de HTTP y HTTPS y simplemente utilizar la siguiente sintaxis:
<script type="text/javascript">
document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>");
</script>
Además, también puede cambiar la url para reflejar el número principal de jQuery si desea asegurarse de que se cargó la última versión principal de las bibliotecas de jQuery:
<script type="text/javascript">
document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");
</script>
Finalmente, si no desea usar Google y prefiere jQuery, puede usar la siguiente ruta de origen (tenga en cuenta que jQuery no admite conexiones SSL):
<script type="text/javascript">
document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-08 20:45:05
Una de las razones por las que es posible que desee hospedarse en un servidor externo es para evitar las limitaciones del navegador de las conexiones concurrentes a un servidor en particular.
Sin embargo, dado que el archivo jQuery que está utilizando probablemente no cambiará muy a menudo, la caché del navegador se activará y hará que ese punto sea discutible en su mayor parte.
La segunda razón para hospedarlo en un servidor externo es reducir el tráfico a su propio servidor.
Sin embargo, dado el tamaño de jQuery, es probable que sea un pequeño parte de tu tráfico. Probablemente deberías intentar optimizar tu contenido real.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-13 19:58:21
JQuery 1.3.1 min tiene solo 18k de tamaño. No creo que eso sea demasiado de un éxito para preguntar en la carga inicial de la página. Estará en caché después de eso. Como resultado, yo mismo lo organizo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-13 19:47:42
Si desea utilizar Google, el enlace directo puede ser más sensible. Cada biblioteca tiene la ruta listada para el archivo direct. Esta es la ruta de jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Simplemente vuelva a leer su pregunta, ¿hay alguna razón por la que está utilizando https? Esta es la etiqueta de script que Google lista en su ejemplo
<script src="http://www.google.com/jsapi"></script>
<script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-13 19:57:46
No quiero que ningún sitio público que desarrollé dependa de ningún sitio externo, y por lo tanto, yo mismo alojaría jQuery.
¿Está dispuesto a tener un corte en su sitio cuando el otro (Google, jquery.com, etc.) va hacia abajo? Menos dependencias es la clave.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-13 23:07:43
Pros: Host en Google tiene beneficios
- Probablemente más rápido (sus servidores están más optimizados)
- Manejan el almacenamiento en caché correctamente - 1 año (nos cuesta que se nos permita hacer los cambios para obtener los encabezados correctos en nuestros servidores)
- Los usuarios que ya han tenido un enlace a la versión alojada en Google en otro dominio ya tienen el archivo en su caché
Contras:
- Algunos navegadores pueden verlo como XSS cross-domain y no permitir el file.
- En particular los usuarios que ejecutan el plugin NoScript para Firefox
Me pregunto si puede incluir de Google, y luego comprobar la presencia de alguna variable global, o somesuch, y si la carga de ausencia de su servidor?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-13 20:36:23
Hay algunas cuestiones aquí. En primer lugar, el método de carga asíncrona que especificó:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.3.1');
google.setOnLoadCallback(function() {
// do stuff
});
</script>
Tiene un par de problemas. Las etiquetas de script pausan la carga de la página mientras se recuperan (si es necesario). Ahora si son lentos para cargar esto es malo, pero jQuery es pequeño. El verdadero problema con el método anterior es que debido a la jquery.la carga de js ocurre independientemente para muchas páginas, terminarán de cargarse y renderizarse antes de que jquery se haya cargado, por lo que cualquier estilo de jquery que realice será un cambio visible para el usuario.
La otra manera es:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Pruebe algunos ejemplos simples como, tener una tabla simple y cambiar el fondo de las celdas a amarillo con el método setOnLoadCallback() vs document(document).ready() con una jquery estática.min.js carga. El segundo método no tendrá parpadeo notable. La primera voluntad. Personalmente creo que no es una buena experiencia de usuario.
Como ejemplo ejecute esto:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.odd { background-color: yellow; }
</style>
</head>
<body>
<table>
<tr><th>One</th><th>Two</th></tr>
<tr><td>Three</td><td>Four</td></tr>
<tr><td>Five</td><td>Six</td></tr>
<tr><td>Seven</td><td>Nine</td></tr>
<tr><td>Nine</td><td>Ten</td></tr>
</table>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function() {
$(function() {
$("tr:odd").addClass("odd");
});
});
</script>
</body>
</html>
Usted (debería) ver la tabla aparecer y luego las filas ir amarillo.
El segundo problema con Google.el método load () es que solo aloja un rango limitado de archivos. Esto es un problema para jquery ya que es extremadamente dependiente de plug-in. Si intenta incluir un plugin de jquery con una etiqueta <script src="..."> y google.load() el plugin probablemente fallará con mensajes de "jQuery no está definido" porque aún no se ha cargado. Realmente no veo una manera de evitar esto.
El tercer problema (con cualquiera de los métodos) es que son una carga externa. Asumiendo que tienes algunos plugins y tu propio código Javascript tienes hasta un mínimo de dos solicitudes externas para cargar tu Javascript. Probablemente sea mejor obtener jquery, todos los complementos relevantes y su propio código y ponerlo en un archivo minificado.
Desde ¿Debería Usar la API de Bibliotecas Ajax de Google para el Alojamiento?:
En cuanto a los tiempos de carga, en realidad estás cargando dos scripts - el script jsapi y la escritura de mootools (el versión comprimida desde arriba). Tan que es dos conexiones, en lugar de una. En mi experiencia, encontré que el tiempo de carga fue en realidad 2-3 veces más lento que cargar desde mi propio servidor personal compartido, a pesar de que venía de Google, y mi versión del archivo comprimido era un par de K más grande que Google. Esto, incluso después de cargar el archivo y (presumiblemente) en caché. Así que para mí, ya que el ancho de banda no importa mucho, no va a importar.
Por último, usted tiene el problema potencial de un navegador paranoico marcando la solicitud como una especie de intento XSS. Por lo general, no es un problema con la configuración predeterminada, pero en las redes corporativas, donde el usuario puede no tener control sobre qué navegador utilizan y mucho menos la configuración de seguridad que puede tener un problema.
Así que al final realmente no puedo verme usando la API de Google AJAX para jQuery al menos (las API más "completas" son una historia diferente en algunos aspectos), excepto para publicar ejemplos aquí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-13 22:56:50
Además de las personas que aconsejan alojarlo en su propio servidor, propuse mantenerlo en un dominio separado (p. ej. static.website.com) para permitir que los navegadores lo carguen en un hilo separado de otro contenido. Este consejo también funciona para todas las cosas estáticas, por ejemplo, imágenes y CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-13 20:22:44
Tengo que votar -1 por las bibliotecas alojadas en Google. Están recopilando datos, al estilo de Google Analytics, con sus envoltorios alrededor de estas bibliotecas. Como mínimo, no quiero que un navegador cliente haga más de lo que le estoy pidiendo, y mucho menos cualquier otra cosa en la página. Peor aún, esta es la "nueva versión" de Google de no ser malvado using usando javascript discreto para recopilar más datos de uso.
Nota: si han cambiado esta práctica, super. Pero la última vez que consideré usar su alojé bibliotecas, supervisé el tráfico http saliente en mi sitio y las llamadas periódicas a los servidores de Google no eran algo que esperaba ver.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-13 20:30:48
Podría ser de la vieja escuela sobre esto, pero todavía frunzo el ceño en hotlinking. Tal vez Google es la excepción, pero en general, es realmente una buena manera de alojar los archivos en su propio servidor.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-13 21:37:52
Agregaré esto como una razón para alojar localmente estos archivos.
Recientemente un nodo en el sur de California en TWC no ha sido capaz de resolver el ajax.googleapis.com dominio (para usuarios con IPv4) solo por lo que no estamos recibiendo los archivos externos. Esto ha sido intermitente hasta ayer (ahora es persistente.) Debido a que era intermitente, estaba teniendo toneladas de problemas para solucionar problemas de usuarios de SaaS. Pasé incontables horas tratando de rastrear por qué algunos usuarios no tenían problemas con el software, y otros se estaban hundiendo. En mi proceso de depuración habitual no tengo la costumbre de preguntar a un usuario si tiene IPv6 desactivado.
Me topé con el problema porque yo mismo estaba usando esta "ruta" particular al archivo y también estoy usando solo IPV4. Descubrí el problema con las herramientas de los desarrolladores diciéndome que jquery no se estaba cargando, luego comencé a hacer traceroutes, etc... para encontrar el verdadero problema.
Después de esto, lo más probable es que nunca vuelva a los archivos alojados externamente porque: Google no tiene que caer para que esto se convierta en un problema, y... cualquiera de estos nodos puede verse comprometido con el secuestro de DNS y entregar js maliciosos en lugar del archivo real. Siempre pensé que estaba seguro de que un dominio de Google nunca caería, ahora sé que cualquier nodo entre un usuario y el host puede ser un punto de falla.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-26 19:44:49
Solo incluyo la última versión del sitio jQuery: http://code.jquery.com/jquery-latest.pack.js Se adapta a mis necesidades y nunca tengo que preocuparme por la actualización.
EDITAR:Para una aplicación web importante, sin duda controlarlo; descargarlo y servirlo usted mismo. Pero para mi sitio personal, no podría importarme menos. Las cosas no desaparecen mágicamente, por lo general son obsoletas primero. Me mantengo al día lo suficiente como para saber qué cambiar para futuros lanzamientos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-13 20:10:59
Aquí un recurso útil, hope puede ayudarlo a elegir su CDN. MS ha añadido recientemente un nuevo dominio para las bibliotecas de entrega a través de su CDN.
Formato antiguo: http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.1.js Nuevo Formato: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js
Esto no debería enviar todas las cookies para microsoft.com. http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_11
Aquí algunas estadísticas sobre la mayoría tecnología popular utilizada en la web en toda la tecnología. http://trends.builtwith.com /
Hope puede ayudarte a elegir.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-29 11:54:56
Si soy responsable del sitio 'en vivo', será mejor que esté al tanto de todo lo que va en y en mi sitio. Por esa razón yo mismo alojo la versión de jquery-min en el mismo servidor o en un servidor estático/externo, pero de cualquier manera una ubicación donde solo yo (o mi programa/proxy) puedo actualizar la biblioteca después de haber verificado/probado cada cambio
En la cabeza:
(function() {
var jsapi = document.createElement('script'); jsapi.type = 'text/javascript'; jsapi.async = true;
jsapi.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.google.com/jsapi?key=YOUR KEY';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('head')[0]).appendChild(jsapi);
})();
Fin del cuerpo:
<script type="text/javascript">
google.load("jquery", "version");
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-16 12:28:39
Lo alojo con mis otros archivos js en mi propio servidor, y, ese es el punto, combinarlos y minificarlos (con django-compresser, aquí, pero ese no es el punto) para que se sirvan como un solo archivo js, con todo lo que el sitio necesita poner en él. De todos modos, tendrá que servir sus propios archivos js, por lo que no veo ninguna razón para no agregar los bytes jquery adicionales allí también - algunos kbs más son mucho más baratos de transferir, que más solicitudes que hacer. Usted no es dependiente de nadie, y tan pronto como su js minificado está en caché, eres súper rápido también.
En la primera carga, una solución basada en CDN puede ganar, porque debe cargar los kilobytes jquery adicionales desde su propio servidor (pero, sin una solicitud adicional). Aunque dudo que la diferencia sea notoria. Y luego, en una primera carga con caché desactivada, su propia solución alojada probablemente siempre será mucho más rápida, debido a más solicitudes (y búsquedas de DNS) necesarias, para obtener el CDN jquery.
Me pregunto cómo este punto es casi nunca mencionado, y cómo las CDN parecen apoderarse del mundo :)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-21 15:14:27