当前位置:首页 >> 网络编程

使用CDN和AJAX加速WordPress中jQuery的加载

确定要放在Head部分 "htmlcode">

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

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

而是应该使用:

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

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

确定不要异步加载 "htmlcode">

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

那么你需要知道这可不是异步加载的方式,这是一种同步加载。如果你不需要在页面加载后及时的调用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 "htmlcode">

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

当然,百度在国内的访问速度是不可小视的:

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

新浪的CDN同样速度飞快:

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

不跟风,你也可以选择微软的jquery CDN:

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-2.0.3.min.js">

你可以直接更改上面出现的版本号来选择不同的版本。哪一个最快呢?如何选择呢?

如果你的网站访客来自海外的不少,建议选用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="/UploadFiles/2021-04-02/jquery.min.js">

然而Google的服务在国内间歇性中断,所以我可以照顾一下国内访客,这么写:

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

这样子即可实现如果jQuery未能加载成功,则自动加载百度的jquery库,做到万无一失了。