首页 > 代码库 > 提升效率的JQUERY（转）
提升效率的JQUERY（转）
摘要
本文部分整理了JQuery性能提升的一些方法，内容综合自artzstudio，viralpatel，htmlgoodies等网站，希望对大家有所帮助。这些规则虽然简单，但如果不遵循就会影响程序执行效率，增加浏览器的负担。
1 优先使用ID选择器和以ID开头的选择器
//ID选择器性能最佳$("#myDiv")//以ID开头，提高效率$("#myDiv .red")
2 类选择之前加元素选择提高效率
//元素(tag)选择器效率仅次于ID选择器，优于类(class)选择器$("#myList li.active")
3 缓存JQuery对象
//错误，做了两次选择$("#myList li").css(‘border‘,‘3px‘);$("#myList li").css(‘color‘,‘red‘);//缓存对象，提高效率var $li = $("#myList li")$li.css(‘border‘,‘3px‘);$li.css(‘color‘,‘red‘);
4 利用链式命令，减少代码量
//链式命令，减少代码量$("#myList li").css(‘border‘,‘3px‘) .css(‘color‘,‘red‘);
5 使用子查询
//一次全局查找加两次子查询优于两次全局查找var $list = $("#myList");var $actives = $list.find(‘li.active‘);var $in_actives = $list.find(‘li.in_active‘);
6 减少DOM的操作次数(DOM操作很慢)
//操作一次DOM，而不要操作100次var lis = ""; for (var i=0, i<100; i++) { lis += ‘<li>‘ + i + ‘</li>‘;}$(‘#myList‘).html(lis);
7 许多节点调用相同的函数时，利用事件委托
//效率较低$(‘#myList li‘).bind(‘click‘, function(){});//效率较高$(‘#myList‘).bind(‘click‘, function(e){ if ($(e.target).nodeName === ‘LI‘) { }});
8 把不重要的功能（如拖放，效果等）放在$(window).load执行
//不要把所有都放在$(document).ready中$(window).load(function(){ // 在页面所有对象加载完执行});
9 较长的字符串拼接不要使用concat()，要使用join()
//join()比concat()效率更好var list_items = [];for (var i=0; i<=10; i++) { list_items[i] = ‘<li>Item ‘+i+‘</li>‘;}$(‘#myList‘).html(list_items.join(‘‘));
10 使用for循环，不要使用$.each循环
//js原生方法效率更好var js_array = new Array ();for (var i=0; i<10000; i++) { js_array[i] = i;}
11使用元素前，先检查其是否存在
//检查id为myDiv的元素是否存在if($("#myDiv").length) {}
12 函数总是返回false
$(‘#myDiv‘).click (function () { return false;});
13 使用html5的data属性
//<div id="myDiv" data-value="http://www.mamicode.com/111"></div>$("#myDiv").data("value");
14 使用最新的版本及CDN
15 压缩你的JS代码
16 保持代码规范整洁
提升效率的JQUERY（转）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。