Where do you include the jQuery library from Google JSAPI CDN

Question

There are a few ways to include jQuery and jQuery UI and I m wondering what people are using    Google JSAPI jQuery s site your own site server another CDN   I have recently been using Google JSAPI  but have found that it takes a long time to setup an SSL connection or even only to resolve google com  I have been using the following for Google    lt script src  https   www google com jsapi  gt  lt  script gt   lt script gt  google load  jquery    1 3 1     lt  script gt    I like the idea of using Google so it s cached when visiting other sites and to save bandwidth from our server  but if it keeps being the slow portion of the site  I may change the include   What do you use  Have you had any issues   Edit  Just visited jQuery s site and they use the following method    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 jquery min js  gt  lt  script gt    Edit2  Here s how I ve been including jQuery without any problems for the last year    lt script src    ajax googleapis com ajax libs jquery 1 4 3 jquery min js  gt  lt  script gt    The difference is the removal of http   By removing this  you don t need to worry about switching between http and https

User · Answer

In head      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             End of Body    lt script type  text javascript  gt  google load  jquery    version     lt  script gt

User · Answer

If you want to use Google  the direct link may be more responsive   Each library has the path listed for the direct file   This is the jQuery path   lt script src  http   ajax googleapis com ajax libs jquery 1 3 1 jquery min js  gt  lt  script gt    Just reread your question  is there a reason your are using https   This is the script tag Google lists in their example   lt script src  http   www google com jsapi  gt  lt  script gt

User · Answer

Without a doubt I choose to have JQuery served by Google API servers   I didn t go with the jsapi method since I don t leverage any other Google API s  however if that ever changed then I would consider it     First  The Google api servers are distributed across the world instead of my single server location   Closer servers usually means faster response times for the visitor   Second  Many people choose to have JQuery hosted on Google  so when a visitor comes to my site they may already have the JQuery script in their local cache   Pre-cached content usually means faster load times for the visitor   Third  My web hosting company charges me for the bandwidth used   No sense consuming 18k per user session if the visitor can get the same file elsewhere   I understand that I place a portion of trust on Google to serve the correct script file  and to be online and available   Up to this point I haven t been disappointed with using Google and will continue this configuration until it makes sense not to   One thing worth pointing out    If you have a mixture of secure and insecure pages on your site you might want to dynamically change the Google source to avoid the usual warning you see when loading insecure content in a secure page   Here s what I came up with    lt script type  text javascript  gt      document write              lt script src               https      document location protocol     https        http               ajax googleapis com ajax libs jquery 1 2 6 jquery min js  type  text javascript  gt   lt   script gt          join        lt  script gt    UPDATE 9 8 2010 - Some suggestions have been made to reduce the complexity of the code by removing the HTTP and HTTPS and simply use the following syntax    lt script type  text javascript  gt      document write    lt script src    ajax googleapis com ajax libs jquery 1 2 6 jquery min js  type  text javascript  gt   lt   script gt      lt  script gt    In addition you could also change the url to reflect the jQuery major number if you wanted to make sure that the latest Major version of the jQuery libraries were loaded    lt script type  text javascript  gt      document write    lt script src    ajax googleapis com ajax libs jquery 1 jquery min js  type  text javascript  gt   lt   script gt      lt  script gt    Finally  if you don t want to use Google and would prefer jQuery you could use the following source path  keep in mind that jQuery doesn t support SSL connections     lt script type  text javascript  gt      document write    lt script src  http   code jquery com jquery-latest min js  type  text javascript  gt   lt   script gt      lt  script gt

User · Answer

I might be old-school about this  but I still frown on hotlinking   Maybe Google is the exception  but in general  it s really just good manners to host the files on your own server

User · Answer

I wouldn t want any public site that I developed to depend on any external site  and thus  I d host jQuery myself   Are you willing to have an outage on your site when the other  Google  jquery com  etc   goes down   Less dependencies is the key

User · Answer

I just include the latest version from the jQuery site  http   code jquery com jquery-latest pack js  It suits my needs and I never have to worry about updating   EDIT For a major web app  certainly control it  download it and serve it yourself  But for my personal site  I could not care less  Things don t magically disappear  they are usually deprecated first  I keep up with it enough to know what to change for future releases

User · Answer

There are a few issues here   Firstly  the async load method you specified    lt script type  text javascript  src  https   www google com jsapi  gt  lt  script gt   lt script type  text javascript  gt    google load  jquery    1 3 1      google setOnLoadCallback function            do stuff        lt  script gt    has a couple of issues   Script tags pause the page load while they are retrieved  if necessary    Now if they re slow to load this is bad but jQuery is small   The real problem with the above method is that because the jquery js load happens independently for many pages  they will finish loading and render before jquery has loaded so any jquery styling you do will be a visible change for the user   The other way is    lt script src  http   ajax googleapis com ajax libs jquery 1 3 1 jquery min js  gt  lt  script gt    Try some simple examples like  have a simple table and change the background of the cells to yellow with the setOnLoadCallback   method vs   document  ready   with a static jquery min js load   The second method will have no noticeable flicker   The first will   Personally I think that s not a good user experience   As an example run this    lt html gt   lt head gt     lt title gt Layout lt  title gt     lt style type  text css  gt       odd   background-color  yellow       lt  style gt   lt  head gt   lt body gt   lt table gt     lt tr gt  lt th gt One lt  th gt  lt th gt Two lt  th gt  lt  tr gt     lt tr gt  lt td gt Three lt  td gt  lt td gt Four lt  td gt  lt  tr gt     lt tr gt  lt td gt Five lt  td gt  lt td gt Six lt  td gt  lt  tr gt     lt tr gt  lt td gt Seven lt  td gt  lt td gt Nine lt  td gt  lt  tr gt     lt tr gt  lt td gt Nine lt  td gt  lt td gt Ten lt  td gt  lt  tr gt   lt  table gt    lt script src  http   www google com jsapi  gt  lt  script gt   lt script gt    google load  jquery    1 3 1      google setOnLoadCallback function           function              tr odd   addClass  odd                   lt  script gt   lt  body gt   lt  html gt    You  should  see the table appear and then the rows go yellow   The second problem with the google load   method is that it only hosts a limited range of files   This is a problem for jquery since it is extremely plug-in dependent   If you try and include a jquery plugin with a  lt script src       gt  tag and google load   the plug-in will probably fail with messages of  jQuery is not defined  because it hasn t loaded yet   I don t really see a way around this   The third problem  with either method  is that they are one external load   Assuming you have some plugins and your own Javascript code you re up to a minimum of two external requests to load your Javascript   You re probably better off getting jquery  all relevant plug-ins and your own code and putting it into one minified file   From Should You Use Google s Ajax Libraries API for Hosting       As to load times  you re actually   loading two scripts - the jsapi script   and the mootools script  the   compressed version from above   So   that is two connections  rather than   one  In my experience  I found that   the load time was actually 2-3 times   slower than loading from my own   personal shared server  even though it   was coming from Google  and my version   of the compressed file was a couple of   K larger than Google s  This  even   after the file had loaded and    presumably  cached  So for me  since   the bandwidth doesn t matter much    isn t going to matter    Lastly you have the potential problem of a paranoid browser flagging the request as some sort of XSS attempt   It s not typically a problem with default settings but on corporate networks where the user may not have control over which browser they use let alone the security settings you may have a problem   So in the end I can t really see me using the Google AJAX API for jQuery at least  the more  complete  APIs are a different story in some ways  much except to post examples here

User · Answer

If I am responsible for the  live  site I better be aware of everything that is going on and into my site  For that reason I host the jquery-min version myself either on the same server or a static external server but either way a location where only I  or my program proxy  can update the library after having verified tested every change

User · Answer

I will add this as a reason to locally host these files     Recently a node in Southern California on TWC has not been able to resolve the ajax googleapis com domain  for users with IPv4  only so we are not getting the external files   This has been intermittant up until yesterday  now it is persistant   Because it was intermittant  I was having tons of problems troubleshooting SaaS user issues   Spent countless hours trying to track why some users were having no issues with the software  and others were tanking   In my usual debugging process I m not in the habit of asking a user if they have IPv6 turned off     I stumbled on the issue because I myself was using this particular  route  to the file and also am using only IPV4   I discovered the issue with developers tools telling me jquery wasn t loading  then started doing traceroutes etc    to find the real issue    After this  I will most likely never go back to externally hosted files because   google doesn t have to go down for this to become a problem  and    any one of these nodes can be compromised with DNS hijacking and deliver malicious js instead of the actual file   Always thought I was safe in that a google domain would never go down  now I know any node in between a user and the host can be a fail point

User · Answer

Here some useful resource  hope can help you to chose your CDN  MS has recently add a new domain for delivery Libraries trough their CDN   Old Format  http   ajax microsoft com ajax jQuery jquery-1 5 1 js New Format  http   ajax aspnetcdn com ajax jQuery jquery-1 5 1 js  This should not send all cookies for microsoft com  http   www asp net ajaxlibrary cdn ashx Using jQuery from the CDN 11  Here some statistics about most popular technology used on the web across all technology  http   trends builtwith com   Hope can help you to choose

User · Answer

In addition to people who advices to host it on own server  I d proposed to keep it on separate domain  e g  static website com  to allow browsers to load it into separate from other content thread  This tip also works for all static stuff  say images and css

User · Answer

One reason you might want to host on an external server is to work around the browser limitations of concurent connections to particular server   However  given that the jQuery file you are using will likely not change very often  the browser cache will kick in and make that point moot for the most part   Second reason to host it on external server is to lower the traffic to your own server   However  given the size of jQuery  chances are it will be a small part of your traffic  You should probably try to optimize your actual content

User · Answer

Pros  Host on Google has benefits   Probably faster  their servers are more optimised  They handle the caching correctly - 1 year  we struggle to be allowed to make the changes to get the headers right on our servers  Users who have already had a link to the Google-hosted version on another domain already have the file in their cache   Cons    Some browsers may see it as XSS cross-domain and disallow the file  Particularly users running the NoScript plugin for Firefox   I wonder if you can INCLUDE from Google  and then check the presence of some Global variable  or somesuch  and if absence load from your server

User · Answer

I have to vote -1 for the libraries hosted on Google   They are collecting data  google analytics style  with their wrappers around these libraries   At a minimum  I don t want a client browser doing more than I m asking it to do  much less anything else on the page   At worse  this is Google s  new version  of not being evil -- using unobtrusive javascript to gather more usage data   Note  if they ve changed this practice  super   But the last time I considered using their hosted libraries  I monitored the outbound http traffic on my site  and the periodic calls out to google servers were not something I expected to see

User · Answer

jQuery 1 3 1 min is only 18k in size  I don t think that s too much of a hit to ask on the initial page load  It ll be cached after that  As a result  I host it myself

User · Answer

I host it with my other js files on my own server  and  that s that point  combine and minify them  with django-compresser  here  but that s not the point  to be served as just one js file  with everything the site needs put into it  You ll need to serve your own js files anyway  so I see no reason to not add the extra jquery bytes there too - some more kbs are much more cheaper to transfer  than more requests to be made  You are not dependent to anyone  and as soon as your minified js is cached  you re super fast as well   On first load  a CDN based solution might win  because you must load the additional jquery kilobytes from your own server  but  without an additional request   I doubt the difference is noticable  though  And then  on a first load with cleared cache  your own hosted solution will probably always be much faster  because of more requests  and DNS lookups  needed  to fetch the CDN jquery   I wonder how this point is almost never mentioned  and how CDNs seem to take over the world

[javascript] Where do you include the jQuery library from? Google JSAPI? CDN?

Examples related to javascript

Examples related to jquery

Examples related to ssl

Examples related to google-ajax-libraries