提升效率的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="111"></div>

$("#myDiv").data("value");

巴特西

提升效率的JQUERY（转）

摘要

1 优先使用ID选择器和以ID开头的选择器

2 类选择之前加元素选择提高效率

3 缓存JQuery对象

4 利用链式命令，减少代码量

5 使用子查询

6 减少DOM的操作次数(DOM操作很慢)

7 许多节点调用相同的函数时，利用事件委托

8 把不重要的功能（如拖放，效果等）放在$(window).load执行

9 较长的字符串拼接不要使用concat()，要使用join()

10 使用for循环，不要使用$.each循环

11使用元素前，先检查其是否存在

12 函数总是返回false

13 使用html5的data属性

14 使用最新的版本及CDN

15 压缩你的JS代码

16 保持代码规范整洁

最新文章

热门文章