1.使用最新的jQuery版本

2.用对选择器.
   2.1 jquery最快的选择器是ID选择器:来源于js的getElementById()方法

注释:需要选择多个元素,必然涉及到Dom遍历和循环,为了提交性能,建议从最近的ID开始继承
   例如:<div id="div"><ul id="ul"><li class="on">1</li><li class="off">2</li></ul></div>  var ul=$("#ul")

2.2 第二快的选择器是tag(标签)选择器,它是来自原生getElementsByTagName()方法
    如上例子:var light=$("#ul input.on")
    
    2.3 较慢的选择器 class 选择器
    $('.className')的性能,取决于不同的浏览器 moz webkit safari o 浏览器都有原生方法:getElementByClassName()所以速度并不慢
    但是IE5-IE8都没有会相当慢

2.4 最慢的选择器:伪类选择器和属性选择器:原因:因为没有针对他们的原生方法,但是一些新的浏览器版本有:queryselector()和

queryselectorAll()放来提高性能
     伪类选择器:$(':hidden')
     属性选择器:$('attribute=value')  attribute:属性名:id、name、class... value 值   例如:id='ss'
3.理解子元素和父元素的关系
   var list=$("#list");
  【1.$('.child', $parent)2.$parent.find('.child')3.$parent.children('.child')4.$('#parent > .child')5.$('#parent .child')6.

$('.child', $('#parent'))】
   语句:  $('.child', $parent)
   解释:这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child'),这会导致一定

的性能损失。它比最快的形式慢了5%-10%。
   转化:$('.child',$('.ss').parent)=$('.child', $parent)[.child与.ss是同级]
     $('.child', $parent)=$('.child', list)
   
   语句:$parent.find('.child')
   解释:这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName等等),所以速

度较快。
   转化: $parent.find('.child')=  $(list).find('.test');

语句:$parent.children('.child')
   解释:这条语句在jQuery内部,会使用$.sibling()和javascript的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%。
   转化: $parent.children('.child') =$test = $(list).children('.test');

语句:$('#parent > .child')
   解释:jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父

元素#parent,这导致它比最快的形式大约慢70%。
   转化:$('#parent > .child')=var $test = $('#list > .test');

语句:$('#parent .child')
   解释:这条语句与上一条是同样的情况。但是,(上一条只选择直接的子元素,这一条可以于选择多级子元素),所以它的速度更慢,大概比最

快的         形式慢了77%。
   转化:var $test = $('#list .test');

语句:$('.child', $('#parent'))
   解释;jQuery内部会将这条语句转成$('#parent').find('.child'),比最快的形式慢了23%。
   转化:var $test = $('#list').find('.test');
总结:除了优先级后,很重要的一个原因是是否 缓存了。
      同时,多级和chidren的使用也会有导致很大的影响

4.不要过度的使用jQuery
  最简单的语句 js至少比$(快10多倍)

5.做好缓存(很重要)
   var cached=jQuery('#top')
   根据测试,缓存比不缓存快了2-3倍
      5.1.将jQuery对象缓存起来:永远不要让相同的选择器在你的代码里出现多次
      错误的写法:
      例如:$("#traffic_light input.on").bind("click", function(){ ... });
      $("#traffic_light input.on").css("border", "1px dashed yellow");
      正确的写法:
      例如:var $active_light = $("#traffic_light input.on");
      $active_light.bind("click", function(){ ... });
      $active_light.css("border", "1px dashed yellow"); 
      更高效的写法,链式写法
      $active_light.bind("click", function(){ ... }).css("border", "1px dashed yellow") 
      如果打算在其他函数中使用Jquery对象,则必须把它们缓存到全局环境中
      例如:window.$my={window.$my = {  head : $("head"),  traffic_light : $("#traffic_light"),  traffic_button :

$("#traffic_button")  };  function do_something(){  }
            当在函数内部时,可以继续将查询存入到全局对象中去$my.cool_results = $("#some_ul li");  
            将全局函数作为一个普通的jq对象去使用
            $my.other_results.css("border-color", "red");

6.使用链式写法
  $('div').find('h3').eq(2).html('Hello'); 
  采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。根据测试,链式写法比(不使用缓存的)非链式写法,大约快了25%。

7.事件的委托处理(冒泡)
  初级:每个每个格子绑定一个点击事件
  $("td").on("click", function(){
      alert(“司法所地方”)
   });
  初级优化:原理:这个事件只需要在父元素绑定1次即可,而不需要在子元素上绑定100次,从而大大提高性能。这就叫事件的”委托处理”,也就

是子元素”委托”父元素处理这个事件
  $(“table”).delegate(“td”, “click”, function(){
       alert("斯蒂芬森飞洒")
   });
  更好的写法,则是把事件绑定在document对象上面。
  $(document).on("click", "td", function(){ $(this).toggleClass("click"); });document=指定的id或class

8.少改动DOM结构
  (1)改动DOM结构开销很大,因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。
    如果要插入多个元素,就先把它们合并,然后再一次性插入。根据测试,合并插入比不合并插入,快了将近10倍。
  (2)如果你要对一个DOM元素进行大量处理,应该先用.detach()方法,把这个元素从DOM中取出来,处理完毕以后,再重新插回文档。根据测试,

使用.detach()方法比不使用时,快了60%。
  (3)如果你要在DOM元素上储存数据,不要写成下面这样:
    var elem = $(‘#elem');
    elem.data(key,value);

9.正确处理循环
  循环总是一种比较耗时的操作,如果可以使用复杂的选择器直接选中元素,就不要使用循环,去一个个辨认元素。
  javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。

网站:http://www.jb51.net/article/25530.htm
      http://caibaojian.com/jquery-performance-optimization.html
      http://www.2cto.com/kf/201308/238441.html

JQuery 的优先级的更多相关文章

  1. CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别

    在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  2. CSS优先级

    一.CSS代码出现的几个位置 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下:(外部样式)Extern ...

  3. Python 【第八章】:JavaScript 、Dom、jQuery

    JavaScript 放置位置 body内部最下面,这样可以避免javascript链接失效时,长时间加载不到页面html内容 变量: var a =123 局部变量 a = 123 全局变量 作用域 ...

  4. (function($){...}) (jQuery)

    这里实际上是匿名函数 function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(funct ...

  5. jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别

    $(document).ready(function(){ // 在这里写你的代码... }); 在DOM加载完成时运行的代码 可以简写成 jQuery(function(){ // 在这里写你的代码 ...

  6. jquery样式篇

    1.jquery: 1.1简介 jquery是一个轻量级的javascript库.版本号分1.x版本和2.x版本,2.x版本不再支持IE6 7 8,而更好的支 持移动端开发. 每一个版本分为开发版和压 ...

  7. jquery事件核心源码分析

    我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...

  8. Jquery中的(function($){...})(jQuery)

    当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子.时过境迁,对于现在无比倚重Jquery的 ...

  9. 解密jQuery事件核心 - 委托设计(二)

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

随机推荐

  1. 一个机器绑两个IP可能存在的问题

    1.同一网段两个ip 无法绑到一个机器上. 因为会生成两条该网段路由,两个路由用于同网段报文相应,而实际ip选路时只会选择其中一条路由(估计会选择前面那一条)从一个网卡走.这样不管哪个网卡来的局域网内 ...

  2. Quartz Configuration Reference

    Quartz Configuration Reference Choose a topic: Main Configuration (configuration of primary schedule ...

  3. Java基础 return 退出main方法的示例

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  4. C/C++如何监测内存泄漏

    C/C++如何监测内存泄漏 C/C++内存泄漏及检测 内存溢出就是内存越界.内存越界有一种很常见的情况是调用栈溢出(即stackoverflow),虽然这种情况可以看成是栈内存不足的一种体现.例如:递 ...

  5. Influxdb修改数据保留策略

    retention policy: 存储策略,用于设置数据保留的时间,每个数据库刚开始会自动创建一个默认的存储策略 autogen,数据保留时间为永久,之后用户可以自己设置,例如保留最近2小时的数据. ...

  6. 算法习题---5.8Unix ls命令(Uva400)

    一:题目 输入正整数n以及n个文件名,将这n个文件名按照ASCII优先升序排列,按列优先方式左对齐输出. 注意:文件名最长的为M,那么最右列字符串长度为M,其他列的长度为M+2 注意:一列最多允许出现 ...

  7. 报错:java.lang.AbstractMethodError: nl.techop.kafka.KafkaHttpMetricsReporter.logger()Lcom/typesafe/scalalogging/Logger;

    报错背景: CDH启动kafka的时候出现报错情况,并且报错的节点挂掉. 报错现象: Exiting Kafka due to fatal exception java.lang.AbstractMe ...

  8. 【ML】京东人工智能设计神器「羚珑」

    https://www.uisdc.com/linglong 文后的彩蛋说的特别好,让设计师发挥更高阶的价值.

  9. MongoDB学习笔记一:MongoDB基础

    目录 MongoDB是什么? 学了有什么用? MongoDB入门 安装 修改数据库位置 MongoDB的启动方式 MongoDB的图形化工具 MongoDB基本命令 增 查询 更新 删除 排序 投影 ...

  10. vue-cli3使用vue-router 使用动态路由,在刷新页面时报错

    刚发现的一个问题,在使用vue-cli3创建项目之后,使用动=动态路由,demo: { path: '/aa/:id', name: 'aa', component: aa }, 编程式路由: thi ...