[置顶] jQuery 性能优化

PHP爱好者 2016-12-22 23:32

1. 尽量使用最新版本的jQuery 类库。

jQuery 每一个新的版本都会较上一版本进行bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能。不过更换新版本之后,不要忘记测试代码的兼容性。

2. 使用合适的选择器

1.$(“#id”) 使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery 底层将直接调用JavaScript的原生方法document.getElementById()。此外选择元素时,应该尽量缩小DOM的查找范围。例如在某个id下查找div.$("#id").find("div");这样也能提高查找效率。

2.使用标签选择器 $("div") $("input")

使用标签选择器将会直接调用javascript的document.getElementsByTagName()方法来定位DOM元素。

3.使用类选择器 $(".class")。

使用类选择器,如果浏览器支持javascript的document.getElementsByClassName()方法,则直接使用该方法,否则就逐个遍历DOM元素。

4.使用属性选择器 $("[attribute=value]")

较新的浏览器可能支持document.querySelectorAll()方法,但是有的浏览器可能不支持,这在于他们的内核不一样。使用这种方式来查找DOM元素,性能并不理想,在开发中应该尽量避免使用。

5.使用伪选择器 $(":hidden")

和上面的属性选择器是同一类,javascript并没有对这类的实现,只有通过逐个遍历DOM元素来查找满足要求的元素,这个尽量不要使用。如果必须查找,则尽量缩小范围,从其父元素来进行搜索。例如:$("#id").find(":hidden");$("div.div").filter(":hidden")等。

上面的选择器性能自上而下依次下降,如果对上面有所疑问,可以自己在页面上进行测试。

3.缓存对象

如果在jQuery开发中经常使用一个对象,建议进行对其缓存,否则你每次使用$()这种方式都会创建一个jQuery对象。

例如有的人喜欢这样写:

$("#btn").bind("click",function(){});

$("#btn").css("border","1px");

$("#btn").css("backgroud-color","red");

$("#btn")....

这样最终会使jQuery创建很多的$(“#btn”)对象,而且在创建之前都必须进行DOM 查找一次。所以建议使用缓存对象或者链式的方式。

//缓存对象

$btn=$("#btn");

$btn.bind("click",function(){});

btn.css("border","1px");

btn.css("backgroud-color","red");

btn....

//链式操作

$("#btn").bind("click",function(){})

.css("border","1px")

.css("backgroud-color","red")

....；

//如果像上面有相同的方法可以进行合并

$("#btn").bind("click",function(){})

.css({"border":"1px"},

{"backgroud-color":"red"})

....；

如果某个对象经常使用也可以添加到全局函数中

window.myCustomGlob={

head:$("head"),

title:$("title"),

btn:$("#btn")

};

记住：永远不要让相同的选择器在代码里面出现多次。

4.循环时的DOM操作

例如:

$ulList=$("#ulList");//ul列表集合

for(var i=0;i<10;i++)

{

$ulList.append("<li>"+i+"</li>");

}

上面代码将每一个新的li元素添加到ul中,实际上jQuery操作消耗的性能也不低,因为上面对DOM操作了10次,最好是在插入之前把li创建好。

$ulList=$("#ulList");//ul列表集合

var li="";

for(var i=0;i<10;i++)

{

li+="<li>"+i+"</li>";

}

$ulList.append(li);

5.使用js数组的join()方法来拼接字符串

上面使用+号拼接的li字符串,但是现在可以使用数组来转换字符串,性能比+号拼接微好些了,尤其是处理长字符串。

$ulList=$("#ulList");//ul列表集合

var liArr=[];

for(var i=0;i<10;i++)

{

liArr[i]="<li>"+i+"</li>";

}

$ulList.append(liArr.join(''));

我自己大概测试了一下,

数量+数组

10010

100074

100005349

但是在循环100000的情况下,+号大部分比数组的时间稍微小一些。这两个性能可以自行选择。

6.数组方式使用jQuery对象

使用jQuery选择器获取的结果是一个jQuery对象。jQuery类库会让你感觉正在使用一个定义了索引和长度数组。在性能方面,建议使用for或者while循环处理,而不是使用$.each()。这样使你的代码更快。

$.each(array,function(i){

});

可以使用for代替each方法,代码如下:

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

{

}

另外,检查长度也是检查一个jQuery对象是否存在的方式。

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

if($btn)//总是true

{};

if($btn.length)//元素存在才返回true

{}

7.事件代理

每一个JavaScript事件（click,mousedown）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。比如,给一个表格绑定点击td后,背景色设置为红色。代码如下:

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

$(this).css("background","red");

});

如果table中有100个td,在使用上面的方式时,就绑定了100个事件,这将带来负面的性能影响。代替这种效率很差的多元素事件监听的方法是,只需要向它们的父节点绑定一次事件,然后通过event.target获取当前点击的元素即可。

$("#table").click(function (event) {

var $td = $(event.target);//捕捉触发的目标元素

if ($td[0].nodeName == "TD") {

$td.css("background", "red");

}

});

在改进的代码中,你只为一个元素绑定了1个事件,这种方式的性能要优于之前那种。

在jQuery1.7以后的版本中提供了一个新的方式on()，来帮助将整个事件监听封装到一个更加便利的方法中,如下:

$("#table").on("click",'td',function(){

$(this).css("background","red");

});

宇晨PHP高端培训：

http://blog.163.com/yong5123@126/blog/static/4551606220161122111938984/

本文为头条号作者发布，不代表今日头条立场。