Using CDN and Ajax to speed up the loading of jquery in WordPress _jquery

Are you sure you want to put it in the head section?

In fact, the best case is, JS files do not load in the

Of course, if you need the head section to load jquery, make sure all the JS files, including jquery, are placed in the code that calls the CSS file to implement the sync download. This is also Google's official advice. For example, the following loading is not recommended:

<script src=jquery.js></script>

<link href= "Style.css" .../>

Instead, you should use:

<link href= "Style.css" .../>

<script src=jquery.js></script>

Are you sure you don't want to load asynchronously?

Asynchronous loading does not block the loading of the Web page, but asynchronous loading will temporarily block the browser's Web page before loading itself JS. This may affect the browsing experience.

If your load code is

<script type= "Text/javascript" src= "Jquery.js" ></script>

So you need to know that this is not the way to load asynchronously, this is a synchronous load. If you don't need to call the jquery function in time after the page is loaded, you can simply load it asynchronously before you load jquery into the Web page, which will greatly speed up loading. This code looks like Google Analytics code.

(function (doc) {

var J =doc.createelement ("script");

J.type = "Text/javascript"; J.async = true; J.SRC = "Jquery.js";

var s = doc.getelementsbytagname ("script") [0];

S.parentnode.insertbefore (J, s);

}) (document);

But as I've observed, most of the time we need to load synchronously, especially when you need to introduce jquery plug-ins.

Which version of jquery is used?

WordPress always comes with the latest jquery library, each version of the use of the method is always slightly different. The more new jquery version, the higher the performance increase. However, some jquery plug-ins may not be very compatible with too-new plug-ins, and it has not rolled out its own updates. Perhaps some of the method functions you will use, to the new version of the discovery has been changed, has been able to work now is not. In this case, you should follow the principle of using the new jquery library as much as possible while ensuring compatibility.

For example, you used the 1.6.2 version of jquery, and now you find that 2.X some of the functions have changed, you do not want to change the code, it is best to debug one after another, for example, you find 1.7.2 compatibility is good. This time you can discard the 1.6.2, you can use the 1.7.2 version of jquery to replace the 2.X new version.

Which jquery CDN library do you use?

jquery is too big! If your site is not fast, jquery will definitely affect your page loading speed. Fortunately, Baidu, Sina, Microsoft, Google and other companies have launched a public JS library, convenient website keynote to shorten the download time, and they themselves have an ultra fast CDN server, saving the download time.

The most common use of this is the jquery library available at Google:

<script type= "Text/javascript" src= "//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></ Script>

Of course, the speed of Baidu's domestic access is not negligible:

<script type= "Text/javascript" src= "//libs.baidu.com/jquery/2.0.3/jquery.min.js" ></script>

Sina's CDN is just as fast:

<script type= "Text/javascript" src= "//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script>

If you don't follow suit, you can also choose Microsoft's jquery CDN:

<script type= "Text/javascript" src= "//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.3.min.js" ></script>

You can choose a different version by directly changing the version number that appears above. Which one is the quickest? How do you choose?

If your site visitors from a lot of overseas, suggest the use of Google, if the main visitors are domestic, the choice of Baidu is no problem. But Baidu's visit abroad can be less than Google's.

And because most sites choose Google's Cdn, because of the caching principle, visiting your site, Google's CDN may be faster.

If you are not sure that your site is fast to download, I suggest it is best to use the above open CDN to save load time, while also saving traffic.

Do you really want to use jquery?

If your site just needs to use a small function with jquery, why download such a large file? Why can't you jquery-free?

For example, you might consider Zepto.js, whose design objective is "to maximize the jquery-compatible API with minimal volume." It is only 10KB after gzip compression.

In addition, jquery has a modular design that allows you to select only the modules you need. You can refer to the jquery builder.

The right way to load jquery

So much, what's the right way to load jquery?

First choose which CDN, or your own site hosting JS files, and determine the location of the call in the head or body, the following Google's jquery library for example, the ordinary loading method is

<script type= "Text/javascript" src= "//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></ Script>

However, Google's services in the domestic intermittent interruption, so I can take care of the domestic visitors, so write:

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

<script type= "Text/javascript" >

window.jquery | | document.write (unescape ('%3Cscript% 20type%3d%22text/javascript%22%20src%3d%22//libs.baidu.com/jquery/2.0.3/jquery.min.js%22%3e%3c/script%3e '));

</script>

This way can be achieved if the jquery failed to load successfully, then automatically loaded Baidu's jquery library, do a foolproof.