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文件,将下载次数保持到最少

时间: 2024-11-05 17:32:59

jQuery性能优化的一些参考建议的相关文章

jQuery性能优化的38个建议

一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的 二.请使用一个var来定义变量 如果你使用多个变量的话,请如下方式定义: .代码如下: varpage = 0, $loading = $('#loading'), $body = $('body'); 不要给每一个变量都添

jquery 性能优化的28个建议[整理]

一.选择器性能优化建议  1.总是从#id选择器来继承这是jquery选择器的一条黄金法则.jquery选择一个元素最快的方法就是用ID来选择. $('#content').hide(); 或者从ID选择器继承来选择多个元素: $('#content p').hide(); 2. 在class前面使用tag jQuery中第二快的选择器就是tag选择器(如$(‘head’)),因为它和直接来自于原生的Javascript方 法getElementByTagName().所以最好总是用tag来修饰

必看的 jQuery性能优化的38个建议 (转)

一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的 二.请使用一个var来定义变量 如果你使用多个变量的话,请如下方式定义: .代码如下: varpage = 0,    $loading = $('#loading'),    $body = $('body'); 不要给每

jquery性能优化的十种方法

jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题. 因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷.更流畅的运行效果. 在这里整理了十种jquery优化的方法,如下: 1,总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法.例如

jQuery性能优化指南(转载)

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了jQuery Performance Rules这篇文章, 简单的摘译了一下: 1.总是从ID选择器开始继承2.在class前使用tag3.将jquery对象缓存起来4.掌握强大的链式操作 5.使用子查询6.对直接的DOM操作进行限制7.冒泡8

jQuery性能优化--循环时的DOM操作

使用jQuery可以很方便的添加,删除或者修改DOM节点,但在一些循环,例如for(),while()或者$.each()中处理节点时,下边有个实例,值得注意: var top_list=[--]; //假设这里是100个字符串 $mylist=$("#mylist"); //jQuery选择器ul for(var i=0,i=top_list.length;i<1;i++){ $mylist.append("<li>" + top_list[i]

jQuery性能优化38建议---最引人注目的用户体验!

一.需要注意的是的定义jQuery当变量被添加varkeyword 然而,这并不jQuery.整个javascript开发过程,所有需要注意,一定不要将其定义为下面的示例: $loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了同样的变量名,就会郁闷至死的 二.请使用一个var来定义变量 假设你使用多个变量的话,请例如以下方式定义: .代码例如以下: varpage = 0, $loading = $('#loading'), $body = $('bo

jQuery性能优化

1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: <div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"> <li&

jQuery 性能优化和技巧

我们将介绍在书写代码时,应该需要注意的几个性能问题,希望对于大家在书写高性能的Web应用中有所帮助. 1.使用最新版本的 jQuery 类库 jQuery 每一个新的版本都会较上一版进行 Bug 修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的 jQuery 来提高性能.不过你需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的. 2.使用合适的选择器 jQuery 提供给开发人员非常丰富的手段来使用选择器定位 DOM 元素,它是开发人员最常使用的功能,但