管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jquery提升性能最佳实践小结

　　将jquery对象缓存起来在

　　for循环中，不要每次都要访问数组的length属性，我们应该先将对象缓存进一个变量然后再操作，如下所示：

　　

复制代码 代码如下:

　　var myLength = myArray.length;

　　for (var i = 0; i < myLength; i++) {

　　// 要做的事

　　}

　　在循环外使用append

　　进行DOM操作是有代价的，如果需要往DOM中添加大量元素，你应该一次批量完成，而不是一次一个。

　　

复制代码 代码如下:

　　// 别这样

　　$.each(reallyLongArray, function(count, item) {

　　var newLI = '<li>' + item + '</li>';

　　$('#ballers').append(newLI);

　　});

　　//较好的做法

　　var frag = document.createDocumentFragment();

　　$.each(reallyLongArray, function(count, item) {

　　var newLI = '<li>' + item + '</li>';

　　frag.appendChild(newLI[0]);

　　});

　　$('#ballers')[0].appendChild(frag);不要在each()里用$('#id')的选择器，会有多次遍历查找dom元素，效率极低用document.createDocumentFragment()来减少页面的DOM结构改变的次数、刷新的次数

　　// 或者这样

　　var myHtml = '';

　　$.each(myArray, function(i, item) {

　　html += '<li>' + item + '</li>';

　　});

　　$('#ballers').html(myHtml);

　　保持简洁风格

　　

复制代码 代码如下:

　　// 不理想

　　if ($ventfade.data('currently') != 'showing') {

　　$ventfade.stop();

　　}

　　if ($venthover.data('currently') != 'showing') {

　　$venthover.stop();

　　}

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

　　$spans.stop();

　　}

　　// 较好的

　　var elems = [$ventfade, $venthover, $spans];

　　$.each(elems, function(k, v) {

　　if (v.data('currently') != 'showing') {

　　v.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(url + ' #unicorns', PI.unicornCb);

　　},

　　candyMtn: function(e) {

　　$('#yayeffects').slideUp(PI.slideCb);

　　},

　　slideCb: function() {...

　　},

　　unicornCb: function() {...

　　}

　　}

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

　　优化选择器

　　节点选择和DOM操作, 根据给定的ID匹配一个元素总是使用#id去寻找element

　　

复制代码 代码如下:

　　// 非常快

　　$('#container div.robotarm');

　　// 超级快

　　$('#container').find('div.robotarm');使用$.fn.find方法更快一些，因为第一个选择器是无须经过选择器引擎处理，在jquery中最快的选择器是ID选择器.因为它直接来自于Javascript的getElementById()方法，这是非常快，因为它是原产于浏览器。如果你需要选择多个元素，这必然会涉及到DOM遍历和循环，为了提高性能，建议从最近的ID开始继承。

　　具体指定选择器的右侧部分应该尽可能具体，左侧则不需要那么具体。

　　

复制代码 代码如下:

　　// 未优化

　　$('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'); // 这样 好很多

　　使用事件委派

　　事件委派允许你为一个容器元素（例如，一个无序列表）绑定一个事件处理程序，而不需给容器内每个元素（例如，列表项）都去绑定。jQuery提供$.fn.live和$.fn.delegate。如果可能的话，你应该使用$.fn.delegate而不是$.fn.live，因为它省去了不必要的选择需要，其明确的情况下（对$.fn.live的文档的上下文），减少了大约80 % 的开销。除了有性能提升的好处，事件委派也使你在往容器里添加新元素时无需重新绑定事件，因为已经有了。

　　通过事件委派一次绑定多种事件，以减少事件冗余

　　

复制代码 代码如下:

　　// 不好的 (如果列表里面元素很多)

　　$('li.trigger').click(handlerFn);

　　// 较好的: event delegation with $.fn.live

　　$('li.trigger').live('click', handlerFn);

　　// 最优的: $.fn.delegate

　　$('#myList').delegate('li.trigger', 'click', handlerFn);

　　移除元素

　　DOM操作是慢的，你应该尽量避免去操作它。jQuery在1.4版引入了

　　$.fn.detach从DOM中去掉所有匹配的元素。

　　

复制代码 代码如下:

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

　　var $parent = table.parent();

　　$table.detach();

　　// ... 添加大量的行到表格中

　　$parent.append(table);

　　.detach()和.remove()一样, 除了.detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。

　　当大量元素修改CSS，应该使用样式表

　　如果你在用$.fn.css给多于20个元素修改CSS，考虑一下添加一个style标签，这样可以速度可以提升60 % 。

　　

复制代码 代码如下:

　　// 多于20个 明显慢

　　$('a.swedberg').css('color', '#asd123');

　　$('<style type="text/css">a.swedberg { color : #asd123 }</style>').appendTo('head');

　　使用$.data而不是$.fn.data将$.data应用于DOM元素比直接调用jQuery选择结果的$.fn.data要快上10倍.虽然，这要先确定你是理解DOM元素与jQuery选择结果之间的区别的。

　　

复制代码 代码如下:

　　// 常用

　　$(elem).data(key, value);

　　// 快十倍

　　$.data(elem, key, value);

　　别费时间在空白的选择结果上了

　　

　　jQuery将不会告诉你，如果你想运行的代码在一个空选择上，它会继续运行，好像没有什么错。影响性能。

　　

复制代码 代码如下:

　　//太遭了，执行了三个方法后才意识到里面是空的

　　$('#nosuchthing').slideUp();

　　// 较好

　　var $mySelection = $('#nosuchthing');

　　if ($mySelection.length) {

　　mySelection.slideUp();

　　}

　　// 最佳: add a doOnce plugin

　　jQuery.fn.doOnce = function(func) {

　　this.length && func.apply(this);

　　return this;

　　}

　　$('li.cartitems').doOnce(function() {

　　// make it ajax! \o/

　　});这层保护是适用于jQuery UI widget，因为即使操作的元素为空其开销也不少。

　　定义变量

　　变量可以定义一个声明而不是几个

　　

复制代码 代码如下:

　　// 老套写法

　　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]) {...

　　}

　　作者：曾祥展

　　出处：学无止境 （http://www.cnblogs.com/zengxiangzhan/）

教程首页 更多教程