应用CDN和AJAX减速WordPress中jQuery的加载

2022-04-02 收藏 0 点赞 0 图文教程

确定要放在Head局部 ?

现实上最好的状况是，js文件都不要在<head>局部进行加载，否则会影响到head局部的载入速度，间接招致网站的内容（body）载入提早。假如你确定你不需求在head局部载入jQuery，请将载入代码挪动到</body>前，精确的说是**个会用到jQuery函数的javascript代码前。

当然，假如你需求head局部加载jquery，也请确保一切的js文件，包括jquery，都要放在调用CSS文件的代码之后，来完成同步下载。这也是Google民间给出的倡议。例如上面的加载不推荐：

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

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

而是应该应用:

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

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

确定不要异步加载 ?

异步加载不会阻塞网页的载入，而非异步加载则会在加载自身js之前长久阻塞阅读器的网页载入。这可能影响阅读体验。

假如你的加载代码是

<script type="text/javascript" src="jquery.js"></script>

那么你需求晓得这可不是异步加载的形式，这是一种同步加载。假如你不需求在页面加载后及时的调用jquery函数，你齐全能够用异步加载的形式，使得网页onload之前才加载jquery，大大放慢载入速度。这样的代码看起来像是Google Analytics的代码。

(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);

然而经我察看，大少数的时分咱们需求同步加载，尤其是你还需求引入jQuery插件的时分。

应用哪个版本的jQuery ?

wordpress总是自带**的jQuery库，每一个版本的应用办法总有纤细的不同。越新的jQuery版本，功能晋升也越高。不过，某些jquery插件可能不太兼容太新的插件，而它本人也没有推出更新。兴许有些你会应用的办法函数，到了新版本发现曾经被扭转，已经能工作的如今曾经不能了。关于这种状况，应该服从这样的准则，那就是在确保兼容性的同时，做到应用尽可能新的jQuery库。

例如你以前应用1.6.2版本的jquery，到了如今你发现2.X某些函数有扭转，你又不情愿去变卦代码，就最好一一调试，例如你发现1.7.2的兼容性就不错。这个时分就能够丢弃1.6.2，能够用1.7.2版本的jQuery去交换掉2.X的新版。

应用哪个jQuery CDN库 ?

jQuery真实是太大了！假如你的网站速度不是飞快，jquery一定会影响到你的页面加载速度。好在百度、新浪、微软、Google等公司都推出了公共js库，不便网站主调用来缩短下载工夫，而它们自身有着超快的CDN效劳器，节约了下载工夫。

目前用的比拟普遍的是Google提供的jquery库：

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

当然，百度在国际的拜访速度是不可小视的：

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

新浪的CDN同样速度飞快：

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

不跟风，你也能够抉择微软的jquery CDN：

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

你能够间接更改下面呈现的版本号来抉择不同的版本。哪一个最快呢？如何抉择呢？

假如你的网站访客来自海内的不少，倡议选用Google，假如次要访客是国际，抉择百度也没成绩。然而百度在海内的拜访速度可不迭Google。

而且由于大少数的网站抉择了Google的CDN，因为缓存原理，来访你的网站，可能google的CDN更快。

假如你不是确定本人的网站下载速度飞快，我倡议最好选用上述的地下CDN来节省加载工夫，同时也节省了流量。

真的要用jQuery吗？

假如你的网站只是需求用带jquery一个很小的函数，为什么要下载这么大的文件呢？为什么不能够jquery-free？

例如你能够思考zepto.js，其设计指标“以最小的体积，做到**兼容jQuery的API”。它在gzip紧缩后仅仅为10KB。

另外，jQuery有着模块设计，能够抉择本人只是需求的模块。你能够参考jquery builder。

加载jQuery的正确形式

说了那么多，加载jquery的正确形式是什么？

首先选好哪个CDN，或许你本人的网站托管js文件，并确定调用的地位在头部还是body，上面以Google的jquery库为例，一般的加载形式是

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

但是Google的效劳在国际间歇性中缀，所以我能够关照一下国际访客，这么写：

<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>

这样子即可完成假如jQuery未能加载胜利，则主动加载百度的jquery库，做到十拿九稳了。

以上就是安达网络工作室关于《使用CDN和AJAX加速WordPress中jQuery的加载》的一些看法。更多内容请查看本栏目更多内容！

打赏