• 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模式管理事件

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

  • 相关阅读:
    第六周学习总结
    20165227 《Java程序设计》实验一(Java开发环境的熟悉)实验报告
    第五周学习总结
    20165227 20165228结对学习感想
    第四周课堂测试补做
    第四周作业
    20165227第三周学习总结
    第二周学习总结
    20165304《JAVA程序设计》第四周学习总结
    20165304 2017-2018-2 《Java程序设计》第3周学习总结
  • 原文地址:https://www.cnblogs.com/lindsayzhao103011/p/3421345.html
Copyright © 2020-2023  润新知