一、使用最新版本的jquery类库
jquery新版本会较上个版本进行bug修复和一些优化,不过需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的。
二、使用合适的选择器
jquery选择器性能最佳到最差方式如下:
id选择器,如$('#id', context)
标签选择器,如$('p', context)
class选择器,如$('.class', context)
属性选择器,如$('[attribute=value]', context)
伪类选择器,如$(':hidden', context)
补充及注意事项:
尽量给选择器指定上下文context,可以缩小定位元素的范围
避免id重复修饰id,错误代码:var $el = $('#list #item1')
避免标签或class修饰id,错误代码: var $el = $('ul #item1')
如果使用属性选择器,尽量指定所属的标签选择器,这样可以加快访问速度,正确代码:var $el = $('a[title=link]')
三、缓存对象
下面是性能不好的方式:
$('#home').css(...);$('#home').bind('click', function() {});$('#home').addclass(...);
说明:jquery会在创建每个选择器的过程中,查找dom,消耗时间与性能。
比较好的方式:
var $homelink = $('#home', context);$homelink.css(...);$homelink.bind('click', function() {});$homelink.addclass(...);
说明:永远不要让相同的选择器在你的代码里出现多次。
四、循环时的dom操作
使用jquery可以很方便的添加,删除或者修改dom节点,但是在一些循环中,例如for(),while()或者$.each()中处理节点时,下面有个实例值得大家注意:
var $list = $('#list');for(var i = 0; i < 100; i++) { $list.append('' + i + '');}
说明:循环添加li节点100次,这种操作消耗的性能不低,所以更好的方式是将要添加的节点在插入dom树之前全部创建好,再一次性添加到dom树中。更好的方式:
var $list = $('#list'), fragment = '';for(var i = 0; i < 100; i++) { fragment += '' + i + '';}$list.append(fragment);
五、数组方式使用jquery对象
使用jquery选择器获取结果是一个jquery对象。在性能方面,建议使用简单for或者while循环来处理,而不是$.each(),这样能使你的代码更快。
另外注意:检查长度是一个检查jquery对象是否存在的方式。
var $list = $('#list');if($list) { //总是true //do something}if($list.length) { //拥有元素才返回true //do something}
六、事件代理
每一个javascript事件(如click,mouseover)都会冒泡到父级节点。当我们需要给多个元素调用同一个函数时,这点会很有用。
... ......var $item1 = $('#item1'), $item2 = $('#item2'), $item3 = $('#item3'); ...$item1.click(function() {...});$item2.click(function() {...});$item3.click(function() {...});...
说明:这种方式,如果有100个li,要绑定100个事件。显然,不科学,性能损耗很多。
更好的方式是:只需向li的父节点ul绑定一次事件,然后通过event.target获取到点击的当前元素。
var $list = $('#list');$list.click(function(e) { var $currentitem = $(e.target); //e.target捕捉到当前触发事件的目标元素 ...});
七、将你的代码转化成jquery插件
如果每次都花时间去写类似的jquery代码,那么可以考虑将这部分类似的代码变成插件,它能够使你的代码有更好的重用性,并且能够有效的帮助你组织代码。
八、使用javascript数组join()来拼接字符串
处理长字符串的时候,使用join()方法有助于优化性能。
var arr = [];for(var i = 0; i < 100; i++){ arr[i] = '' + i + '';}$list.html(arr.join(''));
九、合理利用html5的data属性
html5的data属性可以帮助我们插入数据,特别是前后端的数据交换。jquery的data()方法,有效的利用html5的属性,来自动得到数据。
......var $infolink = $('#info');var infoindex = $infolink.data('info-index');var type = $infolink.data('linkinfo');
十、尽量使用原生的javascript方法
如:
$(this).css('color': 'blue');
优化成:
this.style.color = 'blue';
如:
$('
');
优化成:
$(document.createelement('p'));
十一、压缩javascript
使用压缩工具压缩javascript文件。
发布项目时,应使用“压缩版”javascript文件。
希望本文所述对大家的jquery程序设计有所帮助。
