jquery性能优化高级技巧


Posted in Javascript onAugust 24, 2015

有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题。

因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷、更流畅的运行效果。

jquery性能优化高级技巧,下面主要从七个方面对jquery性能优化做介绍:

1.通过CDN(Content Delivery Network)引入jQuery库

2.减少DOM操作

3.适当使用原生JS

4.选择器优化

5.缓存jQuery对象

6.定义一个可以复用的函数

7.用数组方式来遍历jQuery 对象集合

下面详解每一个方法的具体说明:

通过CDN(Content Delivery Network)引入jQuery库

 要提升网站中javascript的性能的最简单的一步就是引入最新版本的jQuery库,新发布的版本通常在性能上会有更好的提升而且也修复了一下bug。或者通过CDN引入也是很好的选择,通过CDN引入能够减少网站的加载时间。

以下是一些CDN服务:

<!-- Case 1 - jQuery CDN -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script>
<!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<!-- Case 3 - requesting the latest minor 1.10.x version (only cached for an hour) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js" ></script>
<!-- Case 4 - requesting the absolute latest jQuery version (use with caution) -->
<script src="http://code.jquery.com/jquery.min.js" ></script>

一些国内的CDN服务:

http://www.bootcdn.cn/jquery/
<!--新浪 CDN-->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!--百度 CDN-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--Bootstrap CDN-->
http://www.bootcdn.cn/jquery/

减少DOM操作

虽然javascript性能上有了很大的提升,但是DOM操作还是很耗费资源的,需要减少对DOM操作。当在一个页面中插入大量的元素的时候,尤其重要。

例如:

<div id="elem" ></div>

// 不好的方式
//var elem = $('#elem');
//for(var i = 0; i < 100; i++){
// elem.append('<li>element '+i+'</li>');
//}
// 好的方式
var elem = $('#elem' ),
arr = [];
for(var i = 0; i < 100; i++){
arr. push('<li>element ' +i+'</li>' );
}
elem. append(arr. join('' ));

将所有的元素缓存起来一次插入性能上会有所提升,因为只触发页面一次重绘。对于CSS样式属性也是同样的道理。

更多阅读: 前端页面卡顿?可能是DOM操作惹的祸,你需要优化代码

适当使用原生JS

创建jQuery对象会带来一些开销。所以,如果比较注重性能的话,尽可能使用原生的javascript。在某些方面可能会更容易理解和写更少的代码。例如:

// 打印list中的li的id
$('#colors li' ). each(function(){
//将$(this).attr('id')方法替换为直接通过ID属性访问
console. log(this. id);
})

选择器优化

如果你需要更好的性能,但是仍然要用到jQuery,你可以在jQuery选择器优化做一些尝试。以下是一个测试程序,通过浏览器的控制台console.time 和console.timeEnd 方法来记录不同选择器执行时间。

HTML:

<div id="peanutButter" >
<div id="jelly" class=".jellyTime" ></div>
</div>
JS:

//测试程序
var iterations = 10000,
  i;
//--------------------------------------------
//Case 1: 很慢
console.time('Fancy');
for (i = 0; i < iterations; i++) {
  $('#peanutButter div:first');
}
console.timeEnd('Fancy');
//--------------------------------------------
//Case 2: 比较好,但仍然很慢
console.time('Parent-child');
for (i = 0; i < iterations; i++) {
  $('#peanutButter div');
}
console.timeEnd('Parent-child');
//--------------------------------------------
//Case 3: 一些浏览器会比较快
console.time('Parent-child by class');
for (i = 0; i < iterations; i++) {
  // 通过后代Class选择器
  $('#peanutButter .jellyTime');
}
console.timeEnd('Parent-child by class');
//--------------------------------------------
//Case 4: 更好的方式 
console.time('By class name');
21
for (i = 0; i < iterations; i++) {
  // 直接通过Class选择器
  $('.jellyTime');
}
console.timeEnd('By class name');
//--------------------------------------------
//Case 5: 推荐的方式 ID选择器
console.time('By id');
for (i = 0; i < iterations; i++) {
  $('#jelly');
}
console.timeEnd('By id');

执行结果:

jquery性能优化高级技巧

缓存jQuery对象

每次通过选择器构建一个新的jQuery对象时,jQuery的核心部分的Sizzle引擎会遍历DOM然后通过对应的选择器来匹配真正的dom元素。这种方式比较低效,在现代浏览器中可以通过document.querySelector方法通过传入对应的Class参数来匹配对应的元素,不过IE8以下版本不支持此方法。一个提高性能的实践是通过变量缓存jQuery对象。例如:

<ul id="pancakes" >
     <li>first</li>
     <li>second</li>
     <li>third</li>
     <li>fourth</li>
     <li>fifth</li>
</ul>

JS:

// 不好的方式:
// $('#pancakes li').eq(0).remove();
// $('#pancakes li').eq(1).remove();
// $('#pancakes li').eq(2).remove();
// ------------------------------------
// 推荐的方式:
var pancakes = $('#pancakes li');
pancakes.eq(0).remove();
pancakes.eq(1).remove();
pancakes.eq(2).remove();
// ------------------------------------
// 或者:
// pancakes.eq(0).remove().end()
// .eq(1).remove().end()
// .eq(2).remove().end();

定义一个可以复用的函数

直接上例子:

HTML:
<button id="menuButton" >Show Menu!</button>
<a href="#" id="menuLink" >Show Menu!</a>

JS:

//Bad: 
//这个会导致多个回调函数的副本占用内存
$('#menuButton, #menuLink' ). click(function(){
// ...
});
//----------------------------------------------
//Better
function showMenu(){
alert('Showing menu!' );
// Doing something complex here
}
$('#menuButton' ). click(showMenu);
$('#menuLink' ). click(showMenu);

如果定义一个内联(inline)回调函数同时这个包含多个元素的jQuery对象(正如上面所说的第一个例子),对于这个集合中的每个元素都会在内存中保存一个回调函数的副本。

用数组方式来遍历jQuery 对象集合

你或许没有注意到,但是在性能方面,对于jQuery each方法这种优雅实现是有代价的。有一个办法能够更快地遍历一个jQuery对象。就是通过数组来实现,jQuery对象集合就是一个类数组,具有length和value属性。可以通过程序来测试一下性能:

HTML:

<ul id="testList" >
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li> 
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <!-- add 50 more -->
</ul>

JS:

var arr = $('li'),
  iterations = 100000;
//------------------------------
// Array实现:  
console.time('Native Loop');
for (var z = 0; z < iterations; z++) {
  var length = arr.length;
  for (var i = 0; i < length; i++) {
    arr[i];
  }
}
console.timeEnd('Native Loop');
//------------------------------
// each实现:  
console.time('jQuery Each');
for (z = 0; z < iterations; z++) {
  arr.each(function(i, val) {
    this;
  });
}
console.timeEnd('jQuery Each');

结果:

jquery性能优化高级技巧

可以看到通过数组实现方式遍历,执行效率更高。

//-------------------------------------------------------持续更新...

以上是一些搜集知识的总结,如有任何建议或疑问,欢迎留言讨论。

Javascript 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
多种方式实现js图片预览
Dec 12 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
TS 类型兼容教程示例详解
Sep 23 Javascript
javascript实现支持移动设备画廊
Aug 24 #Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 #Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 #Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 #Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 #Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 #Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 #Javascript
You might like
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
php中请求url的五种方法总结
2017/07/13 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
Python实现购物车购物小程序
2018/04/18 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
python生成随机红包的实例写法
2019/09/02 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
python列表的逆序遍历实现
2020/04/20 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
三年级小学生评语
2014/04/22 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
办理护照工作证明
2014/10/10 职场文书
户外亲子活动总结
2015/05/08 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python