对于jQuery性能的一些优化建议

不要每次都在循环中访问数组的 length 属性,应在循环开始之前就将其缓存:

var myLength = myArray.length;

for (var i = 0; i < myLength; i++) {
  // do stuff
}

在循环外执行 append 操作

直接操作 DOM 是非常耗费性能的,尤其不要在循环中直接操作 DOM:

// 这样性能很差
$.each(myArray, function(i, item) {
  var newListItem = '<li>' + item + '</li>';
  $('#ballers').append(newListItem);
});

// 这样性能较好var frag = document.createDocumentFragment();

$.each(myArray, function(i, item) {    var newListItem = '<li>' + item + '</li>';    frag.appendChild(newListItem);});$('#ballers')[0].appendChild(frag);

// 这样也很好var myHtml = '';

$.each(myArray, function(i, item) {    html += '<li>' + item + '</li>';});$('#ballers').html(myHtml);

代码要保持精炼

避免做重复的事情。如果你一直在做重复的事情,那么就可能出问题了:

// 丑
if ($eventfade.data('currently') != 'showing') {
  $eventfade.stop();
}

if ($eventhover.data('currently') != 'showing') {
  $eventhover.stop();
}

if ($spans.data('currently') != 'showing') {
  $spans.stop();
}

// 漂亮!!
var $elems = [$eventfade, $eventhover, $spans];
$.each($elems, function(i,elem) {
  if (elem.data('currently') != 'showing') {
    elem.stop();
  }
});

警惕匿名函数

匿名函数满天飞是很痛苦的事情,它们难以调试、维护、测试或者复用,应尽可能的对函数命名并将其封装在对象中,实施有效的管理:

// 不好
$(document).ready(function() {
  $('#magic').click(function(e) {
    $('#yayeffects').slideUp(function() {
      // ...
    });
  });

  $('#happiness').load(url + ' #unicorns', function() {
    // ...
  });
});

// 好
var PI = {
  onReady : function() {
    $('#magic').click(PI.candyMtn);
    $('#happiness').load(PI.url + ' #unicorns', PI.unicornCb);
  },

  candyMtn : function(e) {
    $('#yayeffects').slideUp(PI.slideCb);
  },

  slideCb : function() { ... },

  unicornCb : function() { ... }
};

$(document).ready(PI.onReady);

选择器的优化

随着越来越多的浏览器支持 document.querySelectorAll(),选择器的重担已经慢慢转移给浏览器了,但还是有一些技巧需要注意:

优先并尽可能地使用 ID 选择器:

// 快
$('#container div.robotarm');

// 相当快
$('#container').find('div.robotarm');

使用 $.fn.find 的方式更快,因为在 $.fn.find 之前的选择器并没有使用 jQuery 自带的 Sizzle 选择器引擎,而是使用了浏览器 document.getElementById() 方法,浏览器原生的方法自然更快。

使用组合选择器时,尽可能使右端更明确,而左端不尽量不明确:

// 未优化
$('div.data .gonzalez');

// 已优化
$('.data td.gonzalez');

尽量在选择器右端使用 tag.class,而左端尽可能只使用 tag 或者 .class。

避免过度具体:

$('.data table.attendees td.gonzalez');

// 在不影响结果的情况下尽量删掉中间多余部分
$('.data td.gonzalez');

简洁的 DOM 结构也有助于提升选择器的性能,因为选择器可能少走几层弯路去寻找那些元素。

尽量避免使用通配符,任何显式或隐式的使用通配符,都会降低选择器的性能:

$('.buttons > *');    // 极慢
$('.buttons').children(); // 好多了

$('.gender :radio');   // 隐式地使用通配符,慢
$('.gender *:radio');   // 显式地使用通配符,同上,慢
$('.gender input:radio'); // 嗯,快多了

使用事件代理

事件代理允许将一个事件绑定到某个容器上(例如一个无序列表 ul),而不是绑定到容器内所有元素上(例如列表元素 li)。虽说 $.fn.live 和 $.fn.delegate 都是将事件绑定到容器上,但是应尽可能是用 $.fn.delegate,毕竟其明确的上下文(相较于 $.fn.live 的上下文是 document)要小得多,避免了很多不必要的过滤。

除了性能方面的提升,如果给绑定了事件的容器内添加新元素,那么这些新元素就无须再次绑定事件了,这也是个优点。

// 不好 (如果列表元素非常多,你就悲剧了)
$('li.trigger').click(handlerFn);

// 好些:使用 $.fn.live 进行事件代理
$('li.trigger').live('click', handlerFn);

// 最好:使用 $.fn.delegate 进行事件代理
// 因为这样可以明确的指定一个上下文
$('#myList').delegate('li.trigger', 'click', handlerFn);

将元素从 DOM 卸载出来再操作

DOM 操作是比较慢的,所以应尽量避免直接操作 DOM。jQuery 在其 1.4 版中引入了 $.fn.detach 方法,可以将元素从 DOM 中卸载出来然后进行操作,操作好了之后再添加到 DOM 中:

var $table = $('#myTable');
var $parent = $table.parent();

$table.detach();
// ... 例如这里给表格添加了很多很多行
$parent.append(table);

使用外部样式表为大量元素修改样式

当使用 $.fn.css 为超过 20 个元素修改样式时,应考虑直接在页面中添加 style 标签,据说性能可提升 60%。

// 当元素少于 20 个时使用这个方法,多余 20 个时,速度就慢了
$('a.swedberg').css('color', '#asd123');

// 多余 20 个元素时,应考虑直接在页面中添加 style 标签
$('<style type="text/css">a.swedberg { color : #asd123 }</style>')
  .appendTo('head');

使用 $.data 替代 $.fn.data

将 $.data 应用于 DOM 元素上,比直接在选择器上调用 $.fn.data 要快 10 倍。当然,前提是要先明白 DOM 元素和 jQuery 结果集之间的区别。

// 速度一般
$(elem).data(key,value);

// 速度提升 10 倍
$.data(elem,key,value);

别在空元素上浪费时间

jQuery 不会主动告诉你,你正在一个空白的结果集上运行代码 – 而且执行过程中并未出错。所以有时候再执行代码之前,需要先判断一下结果集是否为空:

// 不好:执行了三个函数之后
// 才发现结果集上没有任何元素
$('#nosuchthing').slideUp();

// 好
var $mySelection = $('#nosuchthing');
if ($mySelection.length) { $mySelection.slideUp(); }

// 最好:增加一个 doOnce 插件
jQuery.fn.doOnce = function(func){
  this.length && func.apply(this);
  return this;
}

$('li.cartitems').doOnce(function(){
  // 这里可以确保结果集不是空的
});

这种方法特别适用于 jQuery UI 方面,因为即使结果集中不包含任何元素,其开销也会很大。
变量的定义

可以在一条语句中定义多个变量:

// 老掉牙的写法
var test = 1;
var test2 = function() { ... };
var test3 = test2(test);

// 新写法
var test = 1,
  test2 = function() { ... },
  test3 = test2(test);

在自执行函数中,变量甚至可以不用定义:

(function(foo, bar) { ... })(1, 2);

条件判断

// 土方法
if (type == 'foo' || type == 'bar') { ... }

// 较先进的方法
if (/^(foo|bar)$/.test(type)) { ... }

// 使用对象查找
if (({ foo : 1, bar : 1 })[type]) { ... }
(0)

相关推荐

  • Jquery优化效率 提升性能解决方案

    例如有一段HTML代码: 1.总是从ID选择器开始继承 以下是引用片段:<div id="content">  <form method="post" action="#">  <h2>交通信号灯</h2>  <ul id="traffic_light">  <li><input type="radio" class="

  • JQuery for与each性能比较分析

    最近在做一个性能优化方面的工作,遇到很多细节问题,现在一一把遇到的问题记录下来分享给大家,废话就不多谢,我直接贴代码. 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>for与each性能比较</title> <script src="../Cks/jquery-1.7.1.min.j

  • 打造基于jQuery的高性能TreeView(asp.net)

    根据我的项目实践情况,主要是几个关键点: 1:支持静态的树,即一次性将全部数据加载到客户端.2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据.3:Checkbox树(可能是静态树也可能是异步树),用于选择(如选择组织机构,选择数据字典项)等,最好是能够支持节点级联(这个是难点)4:能够承载大数据量,并性能表现优异5:能够在主流浏览器中运行良好 那我要打造的TreeView就是为了实现这个5个主要指标的. 先来看下效果图 上图是中国行政区域的数据树,总共得节点是3500+. 那么我

  • 对于jQuery性能的一些优化建议

    不要每次都在循环中访问数组的 length 属性,应在循环开始之前就将其缓存: var myLength = myArray.length; for (var i = 0; i < myLength; i++) { // do stuff } 在循环外执行 append 操作 直接操作 DOM 是非常耗费性能的,尤其不要在循环中直接操作 DOM: // 这样性能很差 $.each(myArray, function(i, item) { var newListItem = '<li>'

  • JQuery性能优化的几点建议

    针对jquery性能优化这个主题,想必大家都有所了解.下面是我搜集点一点资料关于jquery性能优化,大家可以参考参考. 一.选择器性能优化建议 1. 总是从#id选择器来继承:这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了: 2. 在class前面使用tag:jQuery中第二快的选择器就是tag选择器(如$('head')),因为它和直接来自于原生的Javascript方法getElementByTagName().所以最好总是用tag来修饰cla

  • jQuery性能优化28条建议你值得借鉴

    jQuery性能优化28条建议 一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景. 一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. 复制代码 代码如下: $('#content').hide(); 或者从ID选择器继承来选

  • 提高jQuery性能优化的技巧

    下面把提高jQuery性能优化技巧给大家分享如下: 缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码 代码如下: // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // 建议 $element = $('#element'); h = $element.height(); $element.css('height',h-20); 避免全局变量 jQuery与javascript一样,一般来说

  • jQuery性能优化技巧分析

    本文较为详细分析了jQuery性能优化技巧.分享给大家供大家参考.具体分析如下: 一.使用最新版本的jQuery类库 jQuery新版本会较上个版本进行Bug修复和一些优化,不过需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的. 二.使用合适的选择器 jQuery选择器性能最佳到最差方式如下: id选择器,如$('#id', context) 标签选择器,如$('p', context) class选择器,如$('.class', context) 属性选择器,如

  • jQuery 性能优化指南(3)

    8,尽量使用ID代替Class. 前面性能优化已经说过,ID选择器的速度是最快的.所以在HTML代码中,能使用ID的尽量使用ID来代替class.看下面的一个例子: // 创建一个list var $myList = $('#myList'); var myListItems = '<ul>'; for (i = 0; i < 1000; i++) { myListItems += '<li class="listItem' + i + '">This i

  • jQuery 性能优化指南 (1)

    1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: 复制代码 代码如下: <div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"&

  • jquery性能优化高级技巧

    有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题. 因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷.更流畅的运行效果. jquery性能优化高级技巧,下面主要从七个方面对jquery性能优化做介绍: 1.通过CDN(Content Delivery Network)引入jQuery库 2.减少DOM操作 3.适当使用原生JS 4.选择器优化 5.缓

  • Jquery性能优化详解

    寻寻觅觅,觅觅寻寻终于找到了一些关于jquery性能优化的文章,小编果断收藏当然不能忘了加上自己的一些总结及理解. 首先,之前文章中的jquery链式操作就是jquery性能优化方式中的一种,具体实现及优势在这里就不重复了哈.其次,jquery的优化与web优化中的某些方法是一样的. a.压缩js.使用代码压缩技术,减小文件体积.(使用jsmin.YUI Compressor等). b. 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理.把事件注册上提到父节点上,这 样就不需要为每

  • jQuery 性能优化指南(2)

    4,对直接的DOM操作进行限制 这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM . 这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 .直接的DOM操作速度很慢. 例如,你想动态的创建一组列表元素,千万不要这样做,如下所示: var top_100_list = [...], // 假设这里是100个独一无二的字符串 $mylist = $("#mylist"); // jQuery 选择到 <ul> 元素 for (var i=0,

随机推荐