`

jquery选择器的实现流程简析

阅读更多

jquery选择器的实现流程简析

当我们洋洋得意的使用jquery强大的选择器功能时有没有在意过jquery的选择性能问题呢,其实要想高效的使用jquery选择器,了解其实现流程是很有必要的,那么这篇文章我就简单的讲讲其实现流程,相信会为读者的jquery优化开发提供一些小的建议。

我们知道jquery$()函数可以传很多种参数(documentstringfnarraynumber),那么jqueryinit方法就会根据你传参的类型的不同进入不同的流程。其他的我们今天就不多说了,我们重点讲一下对string类型的处理,因为只有它才会触发jquery的选择器功能。

1、首先是使用正则表达式检查是不是创建dom的操作,例如$(<div></div>),就是要创建div了;

2、否则就是选择操作,然后会判断是不是简单的id选择,当然这一步也是正则匹配,jquery在这里会毫不犹豫的调用document.getElementById,无疑,这是最快的选择了;

3、最后就是直接进入jQuery.fn.find()方法,这里就是jquery所引用的sizzle选择器放大光芒的地方了。

从上面我们可以看出来,jquery选择器只是对简单的id选择开了小灶,其他的css选择很大一部分需要借助于sizzle,所以说,这里总结一点,简单的id选择是jquery中最快的了。

有的人就说了,我不可能都用id选择器呀,别急,咱们再看看sizzle强大的选择功能吧。Sizzlejquery1.3版本开始引入的选择引擎。我们一般实现的选择的选择器模式(也包括jquery 1.2)都是Left To Right模式,而sizzle却别出新格,使用了Right To Left(以下我们简称RTL),说的是不是有点迷了,别急咱们结合例子给大家说明一下:

例 1$(div a)

一般的选择流程(LTR):

、选择页面中所有的div

、选择div下的所有a标签

ƒ合并结果集,返回结果集

Sizzle的选择流程(RTL):

、选择页面中所有的a标签

、判断a标签的父节点是否为div标签,是则push,否则shift

ƒ、返回结果集

有没有发现,RTL的选择模式其实是少了一个合并操作,不要小看这一步,其实节省了很多时间,这就是sizzle能够高效的选择结果集的诀窍之一,其实从sizzle的这一点就给了我们一个高效选择的建议,多使用Right To Left的选择模式。

下面咱们看一下这么一个选择:$('#test span'),相信很多人都是用过类似这种的选择模式,那么其实现流程呢?Jquery是通过$().find()方法启用sizzle的,上面写的这种模式会有一个函数判断启用find,然后才调用sizzle,那么咱们再看一看另外一种相同的选择:$(#test).find(span),这种方法则会跳过find函数判断,直接启用sizzle,这一点改变,执行效率能够提升8倍多,而且选择结果相同,大家可以使用firebug测试一下哟(使用console.profile("性能1")),这就给了我们另一个建议,多使用find方法代替css层级选择。

咱们再看一个选择方法:$('span:eq(0)'),通过firebug可以看到,这个选择方法调用了34次函数,而结果相同的 $('span').first()却只调用了14次,执行时间前者是后者的将近20倍,过滤函数的优化效应可见一斑呀。Sizzle在这里有一个判断,如果存在位置信息(例如 eq,first等)就会执行LTR选择模式,递归调用sizzle,大大降低执行效率,所以这里我建议,多使用过滤选择器,可以有效提高执行速度。

这里就简单的介绍到这里,其实我感觉只要能够做到上面的几点就能很好地提高jquery的选择速度了。

个人整理,欢迎评错。

  • 大小: 163.6 KB
分享到:
评论

相关推荐

    基于jquery实现的地址选择器

    总结来说,基于jQuery实现的地址选择器是前端开发中常用的一个实用工具,它简化了用户输入多级地址的流程,提高了用户界面的交互性和易用性。通过理解和掌握其工作原理及使用方法,开发者可以更好地集成到自己的项目...

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器,它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...

    jquery选择器入门详解小案例

    jQuery支持多种CSS选择器,包括基本选择器、层次选择器、属性选择器和类选择器等。这些选择器可以帮助我们更精确地定位到我们需要操作的DOM元素。 1. **基本选择器**: - `$("#id")`:通过ID选择元素,例如`$("#...

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...

    jquery实现颜色选择器

    **jQuery 实现颜色选择器** 在网页开发中,颜色选择器是一个常见的交互元素,它允许用户方便地选取颜色。在本教程中,我们将探讨如何利用 jQuery 和相关插件来实现一个功能完备的颜色选择器。 首先,`jQuery` 是一...

    jQuery选择器的一个Bug

    jQuery会解析这些选择器,然后使用其内部实现的高效算法来查找匹配的元素。 这个特定的Bug可能涉及到jQuery在处理某些复杂或者特定情况下的选择器时出现的不一致性和错误。比如,当选择器包含特定的属性选择器、...

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    jQuery时间选择器点击选择小时分钟代码

    接下来,我们将详细探讨jQuery时间选择器的工作原理、实现方式以及如何在实际项目中应用。 ### jQuery时间选择器的基本概念 jQuery时间选择器是基于流行的JavaScript库jQuery构建的,它的主要目标是简化用户在网页...

    jquery选择器的简单实现

    jquery

    jquery样式选择器插件源码demo

    本文将深入探讨一个仅30行左右的jQuery样式选择器插件源码,揭示其背后的巧妙设计和实现原理。 首先,我们需要了解jQuery的基本选择器概念。jQuery支持多种类型的选择器,包括基本选择器(如ID选择器、类选择器、...

    jQuery实现级联地区选择

    "jQuery实现级联地区选择"这个主题就是关于如何利用jQuery库来创建一个动态联动的省份-城市选择器。这个实例包含了JSP(JavaServer Pages)、JavaScript和CSS三个主要部分,旨在提供一种高效、用户友好的选择体验。 ...

    jquery选择器速查表

    jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找

    jQuery选择器总结

    jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。

    jquery 城市选择器

    在实现城市选择器时,jQuery提供了丰富的选择器、事件绑定和DOM操作方法,大大降低了开发复杂度。 二、城市选择器的结构 一个典型的jQuery城市选择器通常由两个或多个下拉列表组成,分别对应省份和城市。当用户...

    jquery日期选择器

    4. **易用性**:通过简单的jQuery代码即可实现日期选择器的添加和初始化,降低开发难度。 5. **事件支持**:提供丰富的事件接口,如日期选择后的回调函数,便于开发者进行进一步的业务逻辑处理。 ### 使用方法 1. ...

    jquery双向选择器代码

    "jquery双向选择器代码"这个主题涉及的是jQuery中一种特殊的选择器机制,它允许我们从DOM(文档对象模型)中选取元素,同时还能根据某个元素选取其关联的元素,实现数据的双向绑定或者元素间的交互效果。这种功能在...

    RIA应用开发:2-jquery选择器.ppt

    * 高度的可扩展性: jQuery 选择器可以与其他 jQuery 方法结合使用,以实现更多的功能。 jQuery 选择器是 RIA 应用开发中非常重要的一部分,掌握 jQuery 选择器可以帮助开发者更方便地操作 HTML 文档中的元素。

    jQuery选择器全面总结

    通过熟练掌握jQuery选择器,开发者可以更高效地操纵DOM,实现页面动态效果,简化JavaScript代码。在实际项目中,应结合实际需求灵活运用这些选择器,以实现最佳性能和可维护性。不断实践和积累经验,才能真正发挥...

    jquery城市选择器

    jQuery城市选择器便是为此而设计的工具,它结合了jQuery库的强大功能,实现了高效、易用的城市查询和选择功能。本文将深入探讨jQuery城市选择器的原理、特性以及实际应用。 一、jQuery城市选择器概述 jQuery城市...

    jquery选择器应用实例

    学习jQuery选择器不仅能够提高网页动态效果的实现效率,还能使代码更加简洁易读。在实际开发中,可以结合使用多种选择器来定位和操作复杂的DOM结构。例如,你可以使用类选择器结合ID选择器来选取特定的元素,或者...

Global site tag (gtag.js) - Google Analytics