JQuery 性能优化

一、合适的选择器

JQuery 选择器提供丰富的选择器来定位DOM元素,

基本选择器

#id、.class、element、*等;那他们哪个更高效呢?

第一选择:

$("#id")

第二选择:

$("p"),$("div")

第三选择(选择性使用) :

$(".class")

第四选择

$("[attribute =value"])

第五选择(伪选择器,其属于 JQuery 过滤选择器中的可见性过滤选择器)

$(":hidden")

PS:1、尽量选择Id选择器,

2、给选择器指定上下文

其类似于CSS选择器,CSS选择器中三大特性 --特殊性、继承、层叠中的特殊性:

1、对于选择器给定的各个ID属性值(#id):加上  0,1,0,0

2、对于选择器给定的各个类属性值(.class、属性选择、伪类如:visited、:link ) :  加上0,0,1,0

3、对于选择器给定的各个元素(element): 加上0,0,0,1

例子:html >body table tr[td="totals"] td ul > li 则为0,0,0,7+ 0,0,1,0 =  0,0,1,7;

li #answer 则为0,0,0,1 + 0,1,0,0 = 0,1,0,1

根据这种运算可以得出胜出规则:

比如:0,1,0,1 大于 0,0,1,7 ,则其特殊性越高。选择的优先级越高。

* 属于通配选择器,其是 0 特殊性

二、数组方式使用JQuery对象

在性能方面,建议使用for 或者 while 来处理,而不是$.each()

如:

$.each(array ,function (i)) {

array[i] = i ;

}

改为:

var array = new Array ();

for (var i = 0 ;i< array.length ;i++) {

array[i] = i;

}

三、事件代理

例子: 单击单元格,单元格变色

$(‘#table td").click(function()) {

$(this).css("backgroud","blue") ;

}

如果表格有100个td单元格,那么就绑定了100个事件,性能会很差。

可以使用事件代理:

$(‘#table").click(function(e)) {

var $clicked = $(e.target); // e.target 得到触发的目标元素

$clicked.css("backgroud","blue") ;

}

其只绑定一个事件,性能提高

四、join 拼接字符串

将数组转换为字符串

一般在长字符串时,这个性能提升才会明显

var array = [] ;

for(var i = 0 ; i< 100; i++){

array[i] = ‘<li>‘+i+‘</li>‘;

}

$("#list").html(array.join(‘ ‘));

可以联系Java中StringUtils 的Join(), 以及StringBulider,StringBuffer的用法比较使用。

五、使用原生的JS方法

常用判断一个多选框是否选中:

var $ck = $("#ck");

$ck.click(function()) {

if($ck.is(":checked")) {

alert("checked");

}

})

改为:

var $ck = $("#ck");

var  ck = $ck.get(0); // JQuery 对象转化为DOM对象,其有2种方式 JQuert.get(0)或者JQuery[0]

$ck.click(function()) {

if(ck.checked)) {

alert("checked");

}

})

六、尽量使用JQuery优雅的链式操作

其可以减少对象的随意创建,也可以创建一个对象到全局环境,让其他函数function调用。

时间: 2024-10-17 03:03:53

JQuery 性能优化的相关文章

jQuery性能优化指南(转载)

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了jQuery Performance Rules这篇文章, 简单的摘译了一下: 1.总是从ID选择器开始继承2.在class前使用tag3.将jquery对象缓存起来4.掌握强大的链式操作 5.使用子查询6.对直接的DOM操作进行限制7.冒泡8

jQuery性能优化的38个建议

一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的 二.请使用一个var来定义变量 如果你使用多个变量的话,请如下方式定义: .代码如下: varpage = 0, $loading = $('#loading'), $body = $('body'); 不要给每一个变量都添

jquery性能优化的十种方法

jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题. 因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷.更流畅的运行效果. 在这里整理了十种jquery优化的方法,如下: 1,总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法.例如

jquery 性能优化的28个建议[整理]

一.选择器性能优化建议  1.总是从#id选择器来继承这是jquery选择器的一条黄金法则.jquery选择一个元素最快的方法就是用ID来选择. $('#content').hide(); 或者从ID选择器继承来选择多个元素: $('#content p').hide(); 2. 在class前面使用tag jQuery中第二快的选择器就是tag选择器(如$(‘head’)),因为它和直接来自于原生的Javascript方 法getElementByTagName().所以最好总是用tag来修饰

jQuery性能优化--循环时的DOM操作

使用jQuery可以很方便的添加,删除或者修改DOM节点,但在一些循环,例如for(),while()或者$.each()中处理节点时,下边有个实例,值得注意: var top_list=[--]; //假设这里是100个字符串 $mylist=$("#mylist"); //jQuery选择器ul for(var i=0,i=top_list.length;i<1;i++){ $mylist.append("<li>" + top_list[i]

jQuery性能优化

1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: <div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"> <li&

前端性能优化jQuery性能优化

一.使用合适的选择器 $("#id"); 1.使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById();如果这个 方式不能直接找到你需要的元素,那么你可以考虑调用find()方法,代码如下: $("#domo").find("div"); 使用以上代码可以有效的缩小你定位的DOM元素. 2.标签选择器的性能也是不错的,它是性能优化的第二选择. 二.缓存对象 在写代码

jQuery性能优化38建议---最引人注目的用户体验!

一.需要注意的是的定义jQuery当变量被添加varkeyword 然而,这并不jQuery.整个javascript开发过程,所有需要注意,一定不要将其定义为下面的示例: $loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了同样的变量名,就会郁闷至死的 二.请使用一个var来定义变量 假设你使用多个变量的话,请例如以下方式定义: .代码例如以下: varpage = 0, $loading = $('#loading'), $body = $('bo

前端性能优化:jquery性能优化

jQuery是前端最常用的一个js框架,其实有部分操作也是可以改进的.大部分情况下,封装的后性能是会降低的,如果发现很影响,就可以改为原生的. 另外使用jQuery需要注意一下几点来提高性能: 1不使用each, jQuery 的each循环比原生的for循环性能相差几十倍. 前端性能优化:循环优化 2尽量使用ID,类型,类选择器,避免使用属性选择器 尽量使用ID,类,类型选择器,避免属性选择器.ID,类,类型都有原生的方法,属性选择器需要遍历整个DOM,还需要读取每个节点的属性进行判断,性能很

jQuery 性能优化和技巧

我们将介绍在书写代码时,应该需要注意的几个性能问题,希望对于大家在书写高性能的Web应用中有所帮助. 1.使用最新版本的 jQuery 类库 jQuery 每一个新的版本都会较上一版进行 Bug 修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的 jQuery 来提高性能.不过你需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的. 2.使用合适的选择器 jQuery 提供给开发人员非常丰富的手段来使用选择器定位 DOM 元素,它是开发人员最常使用的功能,但