前端性能优化jQuery性能优化

Posted 2020-09-22 兔子先生

一、使用合适的选择器

$("#id");

1.使用id来定位DOM元素无疑是最佳提高性能的方式，因为jQuery底层将直接调用本地方法document.getElementById();如果这个 方式不能直接找到你需要的元素，那么你可以考虑调用find()方法，代码如下：

$("#domo").find("div");

使用以上代码可以有效的缩小你定位的DOM元素。

2.标签选择器的性能也是不错的，它是性能优化的第二选择。

 

二、缓存对象

在写代码时，我们一般喜欢这样写：

$("#domo p").bind("click",function(){.....});
$("#domo p").css("color","green");
$("#domo p").fadeIn(1000);

但是这样写的后果是：jQuery会在创建每一个选择器的过程中，查找DOM，创建多个jQuery对象。

比较好的书写方式如下：

 1 var $yuki=$("#domo p");//缓存变量
 2 $yuki.bind("click",function(){......});
 3 $yuki.css("color","green");
 4 $yuki.fadeIn(1000);
 5 
 6 //上面的代码还可以改善一下，如下
 7 
 8 var $yuki=$("#domo p");
 9 $yuki.bind("click",function(){
10     //...
11 }).css("color","green").fadeIn(1000);

 

三、循环时的DOM操作

我们来看一段代码：

1 var yuki=[...];//假设这里是100个独一无二的字符串
2 var $mylist=$("#mylist");//jQuery选择到<ul>元素
3 for(var i=0;i<$mylist.length;i++){
4     $mylist.append("<li>"+yuki[i]+"</li>");
5 }

以上代码，我们将每一个新添加的标签元素作为一个节点添加到容器ID中，每一次循环，都会调用到$mylist

所以更好的方式是尽可能的减少DOM操作，代码如下：

var yuki=[...];
var $mylist=$("#mylist");
var result="";
for(var i=0;i<$mylist.length;i++){
   result+="<li>"+yuki[i]+"</li>";
}
//我们将整个元素字符串在插入DOM元素(ul)之前全部创建好，这样大大的减少了DOM操作
$mylist.html(result);

 

四、事件代理

每一个javascript事件都会冒泡到父级节点。当我们需要给多个元素调用同一个函数时这点会很有用。比如，我们要为一个表格绑定这样的行为：点击td后，把背景色设置为红色，代码如下：

$("#myTable td").click(function(){
   $(this).css("background","red");
})

假设有100个td元素，在使用以上方式的时候，你绑定了100个事件，这将带来很负面的性能影响，有没有什么更好的方式呢？

代替这种效率很差的元素事件监听的方法就是：你只需向它们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素。

代码如下：

1 $("#myTable").click(function(e){
2    var $clicked=$(e.target);//e.target捕捉到触发的目标元素
3    $clicked.css("background","red");
4 })

还有一种方式是使用on() ，代码如下：

$("#myTable").on("click","td",function(){
   $(this).css("background","red");
})