2016.12.12 锋利的jQueryCH11--性能优化和技巧

第十一章 jQuery的性能优化和技巧

1、使用id定位DOM是最佳提高性能的方式，将id与find相结合；

2、使用类定位性能不佳，使用属性选择器$("[attribute=value]")、伪选择器($(“：selector”))性能更差，尽量不用。如果必须使用，先用ID定位确定上下文，在使用上述选择器；

3、将重复使用的选择器对象缓存到变量中调用，如果多个对象使用同一个缓存对象，将此对象缓存到全局对象中：

$(function(){
    var my={
        title:$("head"),
        changeColorID:$("#id")
    }
    $("#btn").click(funciton(){
        my.title.csss("background","red")
    })
});

4、减少循环中对DOM的操作次数，在向DOM插入字符串的循环时，现将字符串通过循环拼接好，然后一次性插入DOM中；

5、从性能角度考虑，用for或while循环代替.each()；

6、使用length检查jq对象是否存在，因为$(“”)对象永远都是ture；

7、$(“ul li”).click()，如果li由100个子元素的li，那么久绑定了100个事件，为了优化性能，应该将事件绑定到父元素，通过时间冒泡和e.target捕捉触发的目标元素，下面的两种方式都是可行的：

$("ul").click(function(e){
    var $a= $(e.target);//e.target捕捉触发事件的元素
    //对触发事件的元素操作
})

$("ul").on(click,"li",function(){
    //对li操作
})

on用来代替bind、delegate、live，off代替unbind、undelegate、die；

8、将常用的函数封装成插件：

//使用$.extend封装全局函数
(function($){
    $.extend({
        functionA:function(value){
            //编写函数A
        }
        functionB:function(value){
            //编写函数B
        }
    })
})(jQuery)

//使用$.fn.extend封装对象方法
(function($){
    $.fn.extend({
        "color":function(value){
            //编写代码
            return this//返回this，使方法可链
        }
    })
})(jQuery)

9、在小数据量的字符串接连操作时，”+=”和”array.join”的性能相差无几，在操作大数据量的字符串连接时（>= 10000），使用”array.join”的性能优势遍体现出来了。

10、attr获取不变的状态信息，prop获取动态状态信息及布尔属性

<input value="ab" checked>//用户手动输入cd

prop(value)得到cd，attr(value)得到ab

prop(checked)得到true，attr(value)得到空字符串

11、适当利用html的data属性来嵌入自定义数据，在利用jq的.data方法可以便捷的获得相应的数据

<ul>
    <li data-a-type="bird" data-role="hero" data-options="{'name':'jay'}">Owl</li>
</ul>

$("li").data("role");//获得hero
$("li").data("options").name;//获得jay
$("li").data("aType").name;//改为驼峰式，获得bird

12、多用原生方法：

$("li").is(":checked");//性能较差
$("li").checked;//性能更好

13、压缩文件(gulp)，压缩css(gulp-clean-css）和js(gulp.uglify)；