1.使用链式写法

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

2.事件的委托处理(Event Delegation)

 javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的事件。

 利用这一点,可以大大简化事件的绑定。比如,有一个表格(table元素),里面有100个格子(td元素),现在

要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次?


$("td").on("click", function(){

$(this).toggleClass("click");

});
回答是不需要,我们只要把这个事件绑定在table元素上面就可以了,因为td元素发生点击事件之后,
这个事件会"冒泡"到父元素table上面,从而被监听到。
因此,这个事件只需要在父元素绑定1次即可,而不需要在子元素上绑定100次,从而大大提高性能。
这就叫事件的"委托处理",也就是子元素"委托"父元素处理这个事件。
$("table").on("click", "td", function(){ $(this).toggleClass("click"); });

3.用对选择器

(1)最快的选择器:id选择器和元素标签选择器

  遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法(比如getElementById()),所以它们的执行速度快。

(2)较慢的选择器:class选择器

  $('.className')的性能,取决于不同的浏览器。

  Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。但是,IE5-IE8都

没有部署这个方法,所以这个选择器在IE中会相当慢。

4.子元素和父元素的关系

$('.child', $parent)

$parent.find('.child')

$parent.children('.child')

$('#parent > .child')

$('#parent .child')

$('.child', $('#parent'))

(1) $('.child', $parent)·

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

这会导致一定的性能损失。它比最快的形式慢了5%-10%。

(2) $parent.find('.child')

  这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName

等等),所以速度较快。

(3) $parent.children('.child')

  这条语句在jQuery内部,会使用$.sibling()和javascript的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%。

(4) $('#parent > .child')

  jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个

个过滤出父元素#parent,这导致它比最快的形式大约慢70%。

(5) $('#parent .child')

  这条语句与上一条是同样的情况。但是,上一条只选择直接的子元素,这一条可以于选择多级子元素,所以它的速度更慢,

大概比最快的形式慢了77%。

(6) $('.child', $('#parent'))

  jQuery内部会将这条语句转成$('#parent').find('.child'),比最快的形式慢了23%。

  所以,最佳选择是$parent.find('.child')。而且,由于$parent往往在前面的操作已经生成,jQuery会进行缓存,所以进一步加

快了执行速度。

 


												

jq优化的更多相关文章

  1. JQ优化性能

    一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:$loading = $('#loading'); / ...

  2. Jquery 多行拖拽图片排序 jq优化

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jq实现点击表格无刷新修改数据,优化版

    <!-------------------修改密码-------------------------- > $("#pwd").live("click&quo ...

  4. animatescroll.min.js ~~~~ jq滚动效果 优化target自定义方法

    $(".meun>div[name='meun_nav']>a").eq(1).on("click",function(){ $("bod ...

  5. 应用r.js来优化你的前端

    r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.要使用 ...

  6. webpack 使用优化指南

    前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos. 为什么要使用Webpack 与react一类模块化开发的框 ...

  7. webpack使用优化(基本篇)

    转自:https://github.com/lcxfs1991/blog/issues/2 前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老 ...

  8. jq 个性的隔行变色

      效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...

  9. jq仿淘宝放大镜插件

    html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...

随机推荐

  1. Math.Round四舍六入五取偶Math.Ceiling只要有小数都加1Math.Floor总是舍去小数

    1.Math.Round:四舍六入五取偶 引用内容 Math.Round(0.0) //0Math.Round(0.1) //0Math.Round(0.2) //0Math.Round(0.3) / ...

  2. c++ 动态判断基类指针指向的子类类型(typeid)

    我们在程序中定义了一个基类,该基类有n个子类,为了方便,我们经常定义一个基类的指针数组,数组中的每一项指向都指向一个子类,那么在程序中我们如何判断这些基类指针是指向哪个子类呢? 本文提供了两种方法 ( ...

  3. 响应式编程笔记三:一个简单的HTTP服务器

    # 响应式编程笔记三:一个简单的HTTP服务器 本文我们将继续前面的学习,但将更多的注意力放在用例和编写实际能用的代码上面,而非基本的APIs学习. 我们会看到Reactive是一个有用的抽象 - 对 ...

  4. 内存溢出OutOfMemory

    https://blog.csdn.net/hzy38324/article/details/76719105 https://blog.csdn.net/u010833547/article/det ...

  5. 技巧:Vim 的纵向编辑模式

    https://www.ibm.com/developerworks/cn/linux/l-cn-vimcolumn/ 开始之前 人类大脑对文字的处理是平面式的,所以我们浏览文章.查找资料或者重构代码 ...

  6. play mp3 in c#

    using System; using System.Runtime.InteropServices; using System.Text; using System.IO; using System ...

  7. 使用Python往手机发送短信(基于twilio模块)

    官网是https://www.twilio.com twilio的一句话介绍——提供SDK帮你连接世界上所有人,你可以很方便的调用他们提供的接口来给指定手机发短信,打电话. 首先在twilio的官网注 ...

  8. Android编译系统入门(二)

    Android.mk的使用方法 在上一篇Android编译系统入门(一)中我们只要介绍了Android系统使用make命令默认编译的依赖树是droid,而droid是一个伪目标,它有两个先决条件dro ...

  9. .NET Core开发日志——HttpClientFactory

    当需要向某特定URL地址发送HTTP请求并得到相应响应时,通常会用到HttpClient类.该类包含了众多有用的方法,可以满足绝大多数的需求.但是如果对其使用不当时,可能会出现意想不到的事情. 博客园 ...

  10. ubuntu 搜狗输入法 在中断失效

    实测是更换了皮肤后,出现在中断输入故障,乱码.在其他界面可能是正常的,更换语言没用. killall fcitx输入法突然好了(根据网友所说,更改一堆东西貌似并没有什么用) 此时关闭输入法皮肤一切正常 ...