JQuery加速小点

1. 选择器的使用

最快的选择器:id和元素标签选择器

较慢的选择器:class选择器

最慢的选择器:伪类和属性选择器   $(':hidden')       $('[attribute=value]')

3. 父元素和子元素的关系:

$parent.find('.child') > $('#parent > .child') > $('#parent .child')

4. 不要过度使用jQuery

jQuery速度再快,也无法与原生的js方法相比,所以有原生方法可以使用的场合尽量避免使用jQuery   

5. 做好缓存

选中一个网页元素是开销很大的步骤,所以使用选中器的次数应该越少越好,并尽可能缓存选中的结果,便于以后反复使用。

6. 使用链式写法      

$('div').find('h3').eq(2).html('hello');

7. 事件委托

js的事件模型采用'冒泡'模式,子元素的事件会逐级向上'冒泡'成为父元素的事件。

$('td').on('click', function(e){console.log(e);});

$('table').on('click',function(e){console.log(e);});

$('table').off('click', 'td');

8. 少改动DOM结构

改动DOM结构开销很大,因此不要频繁使用append,insertBefore,insertAfter可以先合并在插入

如果要对一个DOM元素进行大量处理,应该先detach,处理完后再插入

如果要在DOM上存储数据$.data($('elem'),key,value);

插入html代码时,使用浏览器原生的innerHtml

9. 正确处理循环

循环总是一种比较耗时的操作,如果可以使用复杂的选择器直接选中元素就不要使用循环

js原生循环方法for和while,要比jquery的each快

10. 尽量少生成jquery对象

使用一次选择器就会产生一个jquery对象,它是一个很庞大的对象带有很多属性和方法。

var $text = $('#text'); var $ts = $text.text();

var $text = $('#text'); var $ts = $.text($text);  快

11. 使用作用域最短的方法

方法读取全局变量没有读取方法内的局部变量快

调用对象的方法的时候,closure模式要比prototype模式更快

12. 使用Pub/Sub模式管理事件

当发生某个事件后,如果要连续执行多个操作可以使用事件触发的形式

 

 

 

 

 

posted @ 2013-11-13 14:24  海边菩提  阅读(359)  评论(0编辑  收藏  举报