zoukankan      html  css  js  c++  java
  • 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模式管理事件

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

  • 相关阅读:
    mybatis框架查询用户表中的记录数
    文件的上传和下载
    怎样在一条sql语句中将第一列和第二列加和的值作为第三列的值
    [OS] 进程的虚地址空间
    [网络] TCP/IP协议族各层的协议汇总
    [面试] C++ 虚函数表解析
    [OS] 堆栈、堆、数据段、代码段
    [算法] 并查集概念及其实现
    [OS] 我与大牛的对话!
    [C] int *p[4]与int (*q)[4]的区别
  • 原文地址:https://www.cnblogs.com/lindsayzhao103011/p/3421345.html
Copyright © 2011-2022 走看看