锋利的jQuery读书笔记-第11章 jQuery性能优化和技巧

一、性能优化

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

2.使用最合适的选择器

      $("#id") 是最高效的选择器，为了提高查询效率，如果不知道id的情况可以用find函数来缩小选择范围。

      利用属性来定位DOM元素 $("[attribute=value]")方式性能非常糟糕，尽量避免使用这种选择器。

      总的来说，越模糊的选择器对性能消耗越大。

      尽量选择ID选择器， 尽量给选择器指定上下文范围。

3.缓存对象

将需要多次操作的对象用变量保存，而不是每次操作时都重新获取一次。 这个概念与Java中不要随意创建对象是一样的，每一个对象都会消耗性能。

4.循环时的DOM操作

        循环时，注意循环体内如非必要，尽量不要获取对象，也不要操作DOM对象。

举个差代码的例子：

for(i=0;i<100;i++){    var $myList = $("#myList");    $myList.append('This is list :' + i);}

5.数组方式使用jQuery

    在性能方面考虑，建议使用for和while来循环便利而不是使用$.ecah()；

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

    

var $content = $("#content");if($content)//总是true{    // Do something}if($content.length)// 拥有元素才返回true{    // Do something}

6.事件代理

实际上是利用了事件冒泡的原理，比如说你有100个td 每一个都绑定点击事件，肯定不如给它的父元素绑定一个事件来的性能高

7.将代码转换为jQuery插件

8.使用join()拼接字符串

join()比 + 拼接字符串性能消耗更小

9.利用HTML5的Date属性

10.尽量使用原生的JS方法

比如将$(this).css("color","red"); 改写为 this.style.color="red"; 这样性能更加。   简单操作上原生JS性能优于jQuery（越底层，性能越佳~）

11.压缩js

很多工具使用，推荐使用UglifyJS。 实际就是将js代码中的空格等等进行删除和压缩，减少了js本身的大小，从而提高加载速度。