jquery 性能优化与实践

Posted 2020-07-19 xqr_scl

一.使用jQuery对象缓存

1.所谓对象缓存，就是在使用jQuery对象时，先尽量使用变量保存对象名，然后，通过变量进行相应的方法操作。

2.无论是局部还是全局性的变量，为了避免与其他变量名称冲突，原则上，请尽量使用"$"符号进行命名；

3.如果在同一个DOM对象中有多个对象的操作，应尽量采用链接式的写法优化调用的代码；

二.选择器中含有特殊符号

1.<div id=“div#2#"></div>        $("#div\\#2\\#");

通过采用在特殊字符前添加转义符"\\"的方法，可以正确获取这些元素。

三.事件中的target方法优化冒泡现象

例子：在一个表单form中，有3个input输入框，为了使每个输入框获取焦点时改变原有的样式，通过事件中的target方法，获取文本框的父级元素，并为该元素绑定一个事件，从而实现文本框改变样式的需求。

<form id="form">
      <label>姓名：<input type="text"></label>
      <label>性别：<input type="text"></label>
      <label>年龄：<input type="text"></label>
</form>

<script>
    $("#form").bind("click",function(e){
        $objChild = $(e.target);//捕捉触发事件的元素
        $objChild.addClass("txt");//增加元素的样式
    })
</script>

四.使用data()方法在元素上存取移除数据

1.根据元素中的名称定义或返回存储的数据，其调用格式为：data([name]);

2.根据元素中的名称在元素上存储或设置数据，其调用格式为：data(name,value);

3.除了定义和存储数据外，还可以移除元素中存放的数据，其调用格式为：removeData(name).

五.减少对DOM元素直接操作

DOM元素操作的原理是：先在内存中创建DOM结构，然后，更新现有的DOM结构。如果直接对DOM进行操作，那么其性能是很低的，因此，为了减少这种对DOM元素直接操作的次数，有必要在操作前完善大部分的DOM操作，最后通过一次直接操作，更新其DOM结构。

例子：向ul元素里面动态插入4个li元素。

 

<script>
    $(function(){
        var arrList = ["1","2","3","4"];
        var initList = "";//初始化字符
        $.each(arrList,function(index){
            //遍历后累加数组元素
            initList += "<li>" + arrList[index] + "</li>";
        })
        //一次性完成DOM元素的添加
        $("ul").append(initList);
    })
</script>

 

六.jQuery对象与DOM对象的类型转换

jQuery中提供的[index]与get(index)方法既可将jQuery对象转换成DOM对象。DOM对象只要通过jQuery方法$()进行包装，就可以转换成jQury对象。