zoukankan      html  css  js  c++  java
  • jQuery性能优化的一些参考建议

    JQ3.1 文档下载地址:https://pan.baidu.com/s/1c2vMQdy

    一、注意定义jQuery变量的时候添加var关键字

      这个不仅仅是JQ,在JS中都是必须的

    二、如果有多个变量可以使用一个var

      eg:var index=0,$main=$(".main");

    三、定义jQuery变量是添加$符号

      eg:var $main=$(".main");利于代码的阅读性

    四、DOM操作请务必记住缓存(cache)

      DOM操作是非常耗费资源和性能的,一般大部分人喜欢直接这样:

      $(".main").html("结束");

      $(".main").show();

      更好的是:

      var $main=$(".main");

      再去操作

    五、使用链式操作

      上面的可以更简化:

      var $main=$(".main");

      $main.html("结束").show();

    六、精简jQuery代码

      尽量把一些代码整合到一起,如下面

      $btn.click(function(){

        $main.css('width','80%');

        $main.css('display','block');

      });

      应该这样:

      

      $btn.click(function(){

        $main.css({

          "width":"80%",

          "display":"block"

        })

      });

    七、避免使用全局类型的选择器

      请勿如下方式书写:$('.something> *');
      这样书写更好:$('.something').children();

    八、不要叠加多个ID

      请勿如下书写:$('#something#children');
      这样就够了:$('#children');

    九、多用逻辑判断||或者&&来提速

      请勿如下书写:

      if(!$something) {
          $something = $('#something ');
      }

      这样书写性能更好:

      $something=$something|| $('#something');

    十、尽量使用更少的代码

      与其这样书写:if(string.length> 0){..}
      不如这样书写:if(string.length){..}

    十一、尽量使用.on方法

      如果你使用比较新版本的jQuery类库的话,请使用.on,其它任何方法都是最终使用.on来实现的。

    十二、尽量使用最新版本的jQuery

      最新版本的jQuery拥有更好的性能,但是最新的版本可能不支持ie6/7/8,所以大家需要自己针对实际情况选择。

    十三、尽量使用原生的Javascript

      如果使用原生的Javascript也可以实现jQuery提供的功能的话,推荐使用原生的javascript来实现。

      eg:for in

    十四、总是从#id选择器来继承

      这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。

      或者从ID选择器继承来选择多个元素:

      eg:$('#main p').hide();

    十五、在class前面使用tag

      jQuery中第二快的选择器就是tag选择器(如$(‘head')),因为它和直接来自于原生的Javascript方法         

      getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID)

      jQuery中class选择器是最慢的,因为在IE浏览器下它会遍历所有的DOM节点。尽量避免使用class选择器。也不要用tag来修饰ID。下面的例子会遍历所有的div元素来查找id为'content'的那个节点

    十六、使用子查询

      将父对象缓存起来以备将来的使用

    十七、 优化选择器以适用Sizzle的“从右至左”模型

      自版本1.3之后,jQuery采用了Sizzle库,与之前的版本在选择器引擎上的表现形式有很大的不同。它用“从左至右”的模型代替了“从右至左”的模型。确保最右的选择器具体些,而左边的选择器选择范围较宽泛些:

      var $linkContacts = $('.contact-links div.side-wrapper');

    十八、 采用find(),而不使用上下文查找

      .find()函数的确快些。但是如果一个页面有许多DOM节点时,需要来回查找时,可能需要更多时间:

      var $divs = $('#pageBody').find('.testdiv'); 

      

    二十、 缓存jQuery对象

      将你经常用的元素缓存起来:

      eg:

      var $header = $('#header');
      var $divs = header.find('div');
      var $forms = header.find('form');

      当要进行DOM插入时,将所有元素封装成一个元素

    二十一、直接的DOM操作很慢。尽可能少的去更改HTML结构。

      

    var menu = '<ul id="menu">';
    for (var i = 1; i < 100; i++) {
        menu += '<li>' + i + '</li>';
    }
    menu += '</ul>';
    $('#header').prepend(menu);
    // 千万不要这样做:
    $('#header').prepend('<ul id="menu"></ul>');
    for (var i = 1; i < 100; i++) {
        $('#menu').append('<li>' + i + '</li>');
    }

    二十二、 尽管jQuery不会抛出异常,但开发者也应该检查对象

      尽管jQuery不会抛出大量的异常给用户,但是开发者也不要依赖于此。jQuery通常会执行了一大堆没用的函数之后才确定一个对象是否存在。所以在对一个作一系列引用之前,应先检查一下这个对象存不存在。

    二十三. 使用直接函数,而不要使用与与之等同的函数

      为了获得更好的性能,你应该使用直接函数如$.ajax(),而不要使用$.get(),$.getJSON(),$.post(),因为后面的几个将会调用$.ajax()。

    二十四、 使用jQuery utility函数

      不要忘了简单实用的jQuery的utility函数。我最喜欢的是$.isFunction(), $isArray()和$.each()。

    二十五、推迟到$(window).load

      有时候采用$(window).load()比$(document).ready()更快,因为后者不等所有的DOM元素都下载完之前执行。你应该在使用它之前测试它。

    二十六、如果给15个以上的元素加样式时,直接给DOM元素添加style标签

      $('<style type="text/css"> div.class { color: red; }</style>')
    .appendTo('head');

    二十七、压缩成一个主JS文件,将下载次数保持到最少

  • 相关阅读:
    websocketpp相关
    大地水准面、大地基准面
    ubuntu18.04 和 qt 5.13.1 安装
    高斯——克吕格投影反算
    高斯——克吕格投影正算
    缓和曲线10麦克康奈尔
    vsCode 需安装的扩展
    显示windows电脑上已连接过的wifi密码
    linux Java项目CPU内存占用高故障排查
    tcpdump常用参数说明及常见操作
  • 原文地址:https://www.cnblogs.com/-walker/p/6768113.html
Copyright © 2011-2022 走看看