• jQuery最佳实践


    1. 使用最新版本的jQuery

    2. 用对选择器

    (1) 最快的选择器:id选择器和标签选择器

    (2) 较慢的选择器:class选择器

    (3) 最慢的选择器:伪类选择器和属性选择器

    3. 理解子元素和父元素的关系

    $('.child', $parent)

    $parent.find('.child') 最快

    $parent.children('.child')

    $('#parent > .child')

    jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父元素#parent,这导致它比最快的形式大约慢70%。

    $('#parent .child') 最慢

    $('.child', $('#parent'))

    4. 不要过度使用jQuery

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

    5. 做好缓存

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

    6. 使用链式写法

    采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。

    7. 事件的委托处理(Event Delegation)

    大大简化事件的绑定。

    8. 少改动DOM结构

    (1) 改动DOM结构开销很大,因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。如果要插入多个元素,就先把它们合并,然后再一次性插入。根据测试,合并插入比不合并插入,快了将近10倍。

    (2) 如果你要对一个DOM元素进行大量处理,应该先用.detach()方法,把这个元素从DOM中取出来,处理完毕以后,再重新插回文档。根据测试,使用.detach()方法比不使用时快了60%。

    (3) 如果你要在DOM元素上储存数据,不要写成下面这样:elem.data(key,value); 而要写成$.data(elem[0],key,value);

    (4) 插入html代码的时候,浏览器原生的innterHTML()方法比jQuery对象的html()更快。

    9. 正确处理循环

    javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。

    10.尽量少生成jQuery对象

    每当你使用一次选择器(比如$('#id')),就会生成一个jQuery对象。jQuery对象是一个很庞大的对象,带有很多属性和方法,会占用不少资源。所以,尽量少生成jQuery对象。

    举例来说,许多jQuery方法都有两个版本,一个是供jQuery对象使用的版本,另一个是供jQuery函数使用的版本。由于后一种针对jQuery函数的版本不通过jQuery对象操作,所以相对开销较小,速度比较快。

    来源:http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html

  • 相关阅读:
    CSS 整形与优化工具
    下面是小图,点一下上面就会出现大图
    javascript技巧大全
    div实现flash的遮照效果
    表格动态添加删除行
    云计算新模式将终结传统外包模式[转]
    源码过瑞星
    批处理创建、访问、重命名、删除畸形文件/文件夹
    //过360云查杀的代码
    NC反弹提权教程
  • 原文地址:https://www.cnblogs.com/mackxu/p/jquery-better.html
Copyright © 2020-2023  润新知