Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best way to link to jQuery files [duplicate]

Tags:

jquery

Is it better, in terms of site performance/speed, to link out to jquery, like this:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

or to put the files on the server and link to them from there instead, like this:

<script src="js/jquery-1.9.1.js"></script>
like image 342
Michael Sebastian Avatar asked Sep 09 '13 16:09

Michael Sebastian


People also ask

How to link jQuery to HTML page?

In this article, we will discuss how to link jQuery to the HTML page. There are two ways through which you can include the jQuery file in HTML code: Downloading the jQuery Library: In this method, we directly download the library through the website on our system. Basically, there are two versions to download:-

How to include jQuery file in HTML code?

There are two ways through which you can include the jQuery file in HTML code: Downloading the jQuery Library: In this method, we directly download the library through the website on our system. Basically, there are two versions to download:- Production Version – It is a compressed version used mainly for your live website.

How do I download a jQuery file?

If you directly click the jQuery download link, on some web browsers, the download menu will not appear, but the contents of the jQuery file will appear. If you directly click the jQuery download link, on some web browsers, the download menu will not appear, but the contents of the jQuery file will appear.

How to install jQuery in HTML?

For Local Installation, download jQuery library on your local machine and include it in your HTML code. The following are the steps: Go to the jQuery website to download the latest version available. Now put downloaded jquery-3.2.1.min.js file in a directory of your website, e.g. /jquery.


3 Answers

It depends who has the faster server, right? :)

There are a few advantages with code.jquery.com:

  1. It's very common. Users are likely to already have that file cached if they've been to another site that uses that file.

  2. It's probably geographically load balanced. It could load faster for users who are far away from your web server.

like image 198
Mike Christensen Avatar answered Oct 05 '22 13:10

Mike Christensen


As someone else mentioned, a local fallback is always a good idea, but you should also set the IE vs non-IE versions appropriately. Something simple like this should do the trick:

<!--[if lt IE 9]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js""></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!--<![endif]-->

<script>
    if (!window.jQuery) {
        document.write('<script src="/path/to/your/jquery"><\/script>');
    }
</script>

The first part is the conditional if for jQuery built with workarounds for older IE vs the faster, more efficient jQuery 2.0 version. This uses the Google CDN since that has both http and https versions, whereas code.jquery.com only has http. If https is not a concern, though, the code.jquery.com CDN is usually faster.

The second piece is checking if window.jQuery was created, and if not, use the local version.

The benefit to using a CDN version vs local version is just speed. Not only is their server bandwidth likely much (MUCH) larger than yours, most browsers have accessed that version before and have it stored in cache so the browser doesn't need to redownload it.

like image 21
PlantTheIdea Avatar answered Oct 05 '22 12:10

PlantTheIdea


The best way to attach jQuery (or any library that google cdn is sharing) is:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

This code links jQuery from CDN (this way is better because user could ALREADY HAVE this jQuery ver. in browser cache). After that code checks is jQuery successfully loaded (maybe CDN was down or something...) and if it's not it attaches the local version of jQuery lib to your page.

This code is used in html5 boilerplate.

like image 45
Michael Malinovskij Avatar answered Oct 05 '22 14:10

Michael Malinovskij