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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
在JavaScript中使用timer示例
May 08 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 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
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
php二维数组转成字符串示例
2014/02/17 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Python_LDA实现方法详解
2017/10/25 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
python3实现微型的web服务器
2019/09/03 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
用 python 进行微信好友信息分析
2020/11/28 Python
用python计算文件的MD5值
2020/12/23 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
高中生打架检讨书1000字
2015/02/17 职场文书
《检阅》教学反思
2016/02/22 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers