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


Posted in Javascript onDecember 05, 2015

确定要放在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库,做到万无一失了。

Javascript 相关文章推荐
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
深入浅出es6模板字符串
Aug 26 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 #Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 #Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 #Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 #Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 #Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 #Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 #Javascript
You might like
ip签名探针
2006/10/09 PHP
最简单的PHP程序--记数器
2006/10/09 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP内置加密函数详解
2016/11/20 PHP
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
常用jQuery代码分享
2015/07/14 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
js获取Get值的方法
2016/09/29 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python使用socket远程连接错误处理方法
2015/04/29 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
大学生专业个人学习的自我评价
2013/10/26 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
学历公证委托书
2014/04/09 职场文书
党支部活动策划方案
2014/08/18 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
Python学习之异常中的finally使用详解
2022/03/16 Python