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 相关文章推荐
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
js实现select跳转功能代码
Oct 22 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
vue实现一拉到底的滑动验证
Jul 25 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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
zend framework文件上传功能实例代码
2013/12/25 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
品质主管的岗位职责
2013/12/04 职场文书
关于人生的感言
2014/01/17 职场文书
运动会稿件200字
2014/02/07 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
农村党员一句话承诺
2014/05/30 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
大学生就业自荐书
2014/06/16 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
mysql查询的控制语句图文详解
2021/04/11 MySQL
python读取mat文件生成h5文件的实现
2022/07/15 Python