位置: 编程技术 - 正文
使用CDN和AJAX加速WordPress中jQuery的加载(cdn ajax)
编辑：rootadmin推荐整理分享使用CDN和AJAX加速WordPress中jQuery的加载(cdn ajax)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:cdn引入js,cdn用法,cdn使用例子,cdn ajax,cdn实现,cdn引入js,cdn ajax,cdn引入js,内容如对您有帮助，希望把文章链接给更多的朋友！
确定要放在Head部分 &#;
事实上最好的情况是，js文件都不要在<head>部分进行加载，否则会影响到head部分的载入速度，直接导致网站的内容（body）载入延迟。如果你确定你不需要在head部分载入jQuery，请将载入代码移动到</body>前，准确的说是第一个会用到jQuery函数的javascript代码前。
当然，如果你需要head部分加载jquery，也请确保所有的js文件，包括jquery，都要放在调用CSS文件的代码之后，来实现同步下载。这也是Google官方给出的建议。例如下面的加载不推荐：
而是应该使用:
确定不要异步加载 &#;
异步加载不会阻塞网页的载入，而非异步加载则会在加载本身js之前短暂阻塞浏览器的网页载入。这可能影响浏览体验。
如果你的加载代码是
那么你需要知道这可不是异步加载的方式，这是一种同步加载。如果你不需要在页面加载后及时的调用jquery函数，你完全可以用异步加载的方式，使得网页onload之前才加载jquery，大大加快载入速度。这样的代码看起来像是Google Analytics的代码。
但是经我观察，大多数的时候我们需要同步加载，尤其是你还需要引入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库：
当然，百度在国内的访问速度是不可小视的：
新浪的CDN同样速度飞快：
不跟风，你也可以选择微软的jquery CDN：
你可以直接更改上面出现的版本号来选择不同的版本。哪一个最快呢？如何选择呢？
如果你的网站访客来自海外的不少，建议选用Google，如果主要访客是国内，选择百度也没问题。但是百度在海外的访问速度可不及Google。
而且因为大多数的网站选择了Google的CDN，由于缓存原理，来访你的网站，可能google的CDN更快。
如果你不是确定自己的网站下载速度飞快，我建议最好选用上述的公开CDN来节省加载时间，同时也节省了流量。
真的要用jQuery吗？
如果你的网站只是需要用带jquery一个很小的函数，为什么要下载这么大的文件呢？为什么不可以jquery-free？
例如你可以考虑zepto.js，其设计目标“以最小的体积，做到最大兼容jQuery的API”。它在gzip压缩后仅仅为KB。
另外，jQuery有着模块设计，可以选择自己只是需要的模块。你可以参考jquery builder。
加载jQuery的正确方式
说了那么多，加载jquery的正确方式是什么？
首先选好哪个CDN，或者你自己的网站托管js文件，并确定调用的位置在头部还是body，下面以Google的jquery库为例，普通的加载方式是
然而Google的服务在国内间歇性中断，所以我可以照顾一下国内访客，这么写：
这样子即可实现如果jQuery未能加载成功，则自动加载百度的jquery库，做到万无一失了。
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效 需求：子结点选中，父节点随之选中，父节点取消，子节点随之取消代码：!DOCTYPEhtmlhtmlxmlns="
小巧强大的jquery layer弹窗弹层插件 先去官网下载最新的
基于jQuey实现鼠标滑过变色(整行变色) 在很多网站都有这样的效果，那就是当鼠标放在新闻列表一行上的时候，整行就会变色，虽然使用CSS也能够实现此种功能，但是由于众多浏览器版本对
标签: cdn ajax
本文链接地址:https://www.jiuchutong.com/biancheng/376217.html 转载请保留说明！上一篇：浅析jQuery移动开发中内联按钮和分组按钮的编写(jquery开发)
下一篇：使用jQuery+EasyUI实现CheckBoxTree的级联选中特效(使用二氧化碳灭火器时人应该站在什么位置)
