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/)

(0)

相关推荐

  • jquery选择器的选择使用及性能介绍

    在写完第一回之后,看到了朋友们的回复,指出了我代码中的一些问题,确实由于时间仓促没有使用IDE,直接搞上了,又由于本人记忆力不好,所以把大小写都忘记了,还好晚上回家,用VS改了一下,呵呵,真是对不住大家了. 从这一讲开始,我们将直正接触一个JQ类库,学习一下JQ的写法,JQ的一些常用的命令等等,今天主要讲的是JQ里的选择器,这也是JQ的一大特点,这从它的名称jQuery中可以看到,主要功力体现在查询上. 前言:对于写在<script></script>中的代码,一般在JS环境,我们

  • js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)

    问题缘由:负责公司的开发平台研发工作,考虑的知识产权的保护工作,必须要考虑java的加密技术和js脚本的加密技术.在目前java加密很容易破解的情况下,还是先搞定js的加密和压缩,一方面可以提高页面加载性能,另外一方面也希望辛苦研发出来的成果得到一定的保护. 研究过程: 1.先强烈鄙视一下哪些随便转载文章的家伙,给我制造了很大的麻烦!!网上很多帖子都不靠谱.. 2.首先想了解jquery使用什么压缩的, 网上找了半天,说法不一样,后来还是在jquery官网的最频繁问题中找到了答案,但这已经是绕了

  • JQuery Tips(4) 一些关于提高JQuery性能的Tips

    在选择时,最好以ID选择符作为开头 我想这个很好理解,因为JQuery内部使用document.getElementByID方法进行ID选择,这种方法比其他所有对DOM选择的方法更快,所以以$("#")开头是最好的,比如: 复制代码 代码如下: <div id="a"> <div class="b"> <div class="c"> <div class="d"&g

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

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

  • JQuery each()函数如何优化循环DOM结构的性能

    如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌. 复制代码 代码如下: $.fn.beautifyTable = function(options) { //定义默认配置项,再用options覆盖 return this.each(function() { var table = $(this), tbody = table.children('tbody'), tr

  • 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的高性能td和input切换并可修改内容实现代码

    在之前的基础上,添加方向键左右支持. 在实际工作中,我们会碰到这样一个情况.在页面中显示着100个数据,同时用户还希望他可以更改其中的数据,普通的方式可能如下, 这种方式会出现一个问题,就是页面显示的时候有点慢,同时如果有滚动条的话,会有些卡.下面给出我的一个解决方法,显示的时候全是td的,没有input标签,如下 当你点击其中一个td时,就会出现下面这样 当你点击td的时候,会在td动态加入一个input同时把td的值赋给input,当你鼠标离开input时,会把input的值赋给td.同时支

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

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

  • 提升jQuery的性能需要做好七件事

    做好七件事帮你提升jQuery的性能,想知道哪几件事情吗? 1. Append Outside of Loops 凡是触及到DOM都是有代价的.如果你向DOM当中附加大量的元素,你会想一次性将它们全部附加进来,而不是分多次进行.当在循环当中附加元素就会产生一个常见的问题. $.each( myArray, function( i, item ) { var newListItem = "<li>" + item + "</li>"; $( &

  • jquery提升性能最佳实践小结

    将jquery对象缓存起来在 for循环中,不要每次都要访问数组的length属性,我们应该先将对象缓存进一个变量然后再操作,如下所示: 复制代码 代码如下: var myLength = myArray.length; for (var i = 0; i < myLength; i++) { // 要做的事 } 在循环外使用append 进行DOM操作是有代价的,如果需要往DOM中添加大量元素,你应该一次批量完成,而不是一次一个. 复制代码 代码如下: // 别这样 $.each(really

  • 了不起的11个JavaScript代码重构最佳实践小结

    模式和重构之间有着一种与生俱来的关系.从某种角度来看,设计模式的目的就是为许多重构行为提供目标. 1.提炼函数 在JavaScript开发中,我们大部分时间都在与函数打交道,所以我们希望这些函数有着良好的命名,函数体内包含的逻辑清晰明了.如果一个函数过长,不得不加上若干注释才能让这个函数显得易读一些,那这些函数就很有必要进行重构. 如果在函数中有一段代码可以被独立出来,那我们最好把这些代码放进另外一个独立的函数中.这是一种很常见的优化工作,这样做的好处主要有以下几点. 避免出现超大函数. 独立出

  • React 条件渲染最佳实践小结(7种)

    在 React 中,条件渲染可以通过多种方式,不同的使用方式场景取决于不同的上下文. 在本文中,我们将讨论所有可用于为 React 中的条件渲染编写更好的代码的方法. 条件渲染在每种编程语言(包括 javascript)中都是的常见功能. 在 javascript 中,我们通常使用if else 语句,switch case语句和三元运算符编写条件渲染. 以上所有这些方法都适用于 React. 但是问题是,我们如何才能有效地使用它们? 像你知道的那样,React 具有 JSX 标记,通常我们需要

  • 构建Vue大型应用的10个最佳实践(小结)

    这些是我构建大型Vue项目得出的最佳实践,这些技巧将帮助你更高效的编码,并且使其更容易维护和协作. 在我今年的自由职业生涯中我有幸开发了一些大型Vue程序.我所说的这些项目使用了大量Vuex stores

  • 关于jquery性能最佳实践的讨论,与求教

    原因是我在测试的时候:带入了错误的变量.具体可以查看图片上的 $(parentID > childClass) 我直接比较两个字符换大小了! 感谢 html5中文网 QQ群中的 "不见丘比特". 其中第三点提到父元素与子元素的关系中提到了 从父元素选择子元素的用例: 复制代码 代码如下: $('.child', $parent) $parent.find('.child') $parent.children('.child') $('#parent > .child') $

  • 15条JavaScript最佳实践小结

    本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深).条目顺序按重要级粗略的从高到低排列. 把外部JavaScript文件放在HTML底部 我们的目标是相同的:为用户尽可能快地显示内容.当载入一个脚本文件的时候,HTML会停止解析,直到脚本载入完毕.因此,用户可能会长时间对着一个空白的屏幕,看上去什么都没有发生.如果你的JavaScript代码只是增加

  • 7个jQuery最佳实践

    随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快速高效的完成一些重复性的工作.这其中最流行的JavaScript库就是jQuery.但是jQuery的大量应用却带来了另外一个问题:在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢? 背景 在这篇文章中,我会给大家介绍在编写.调试和审查JavaScript代码的时候一些好的实践(至少我是这么认为的).事实上,我选择了其中7个最常见

  • jQuery最佳实践完整篇

    上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT<提高jQuery性能的诀窍>(jQuery Proven Performance Tips And Tricks).他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值. ============

随机推荐