码迷,mamicode.com
首页 > Web开发 > 详细

提升效率的JQUERY(转)

时间:2017-05-14 12:16:43      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:利用   dom   优先   length   事件   综合   cdn   val   []   

摘要

本文部分整理了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");

 

14 使用最新的版本及CDN

15 压缩你的JS代码

16 保持代码规范整洁

提升效率的JQUERY(转)

标签:利用   dom   优先   length   事件   综合   cdn   val   []   

原文地址:http://www.cnblogs.com/acuier/p/6851785.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!