使用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 相关文章推荐
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
JavaScript中的 new 命令
May 22 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
PHP 读取文件的正确方法
2009/04/29 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
分享Python字符串关键点
2015/12/13 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python文件选择对话框的操作方法
2019/06/27 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
中间件分为哪几类
2012/03/14 面试题
先进单位事迹材料
2014/12/25 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js