zoukankan      html  css  js  c++  java
  • jQuery性能优化

    1. 优化选择器执行的速度

    优先使用ID与标记选择器

    在jQuery中,访问DOM元素的最快方式是通过元素ID号,其次是通过元素的标记。因为前者源于JavaScript中的document.getElementById(),而后者源于document.getElementsByTagName()方法。

    <div id="divTip" class="MyClass" title="tmp">测试文字</div>

    这个时候 要访问这个div元素,如果有ID号,建议使用ID号直接访问元素,这样的速度是最快的;如果没有ID号,可使用元素标记(tag)访问,其次就是使用类别(class)进行访问。

    在jQuery中访问页面元素时,应尽量避免出现下列的访问语法,说明如下:

    1)虽然用ID好访问页面中的元素最快,但应避免重复修饰,即避免使用ID号修饰ID号,错误代码如下所示:

    var eleName0 = $("#divTip #divShow");

    2) 避免使用tag或class来修改ID号,这样的话,代码先执行遍历,后进行匹配,错误代码如下:

    var eleName0 = $(".MyClass #divShow");

    var eleName0 = $("div #divShow");

    3) 如果是通过元素的属性访问,应尽量使用tag修饰进行访问,这样可以加快访问速度,正确的代码如下:

    var eleName3 = $("div[title='tmp']");

    使用jQuery对象缓存

    所谓对象缓存,就是在使用jQuery对象时,先尽量使用变量保存对象名,然后,通过变量进行相应的方法操作。

    例如:

    var objTmp = $("#divTip");//先使用变量进行保存

    objTmp.bind("click",function(){ alert("hello!");});

    如果想让定义的变量在其他函数中也能使用,可以将该变量定义为全局性的变量,实现代码如下:

    window.objPub = {//在全局范围中,定义一个windows对象

          objTmp:$("#divTip")

    }

    那么,通过全局的变量,可以在各个自定义的函数中访问该变量。通过变量,实现DOM元素的获取,显示代码如下:

    function TestFun() {

      objPub.objTmp.bind("click",function(){alert("hello!");});

    }

    以上代码最终实现的功能,与定义局部变量一样,但它却可以被不同的自定义函数所调用,也可以当成普通的jQuery对象使用。

    在使用变量缓存jQuery对象时,有以下两个地方需要我们在编写代码时注意。

    1)无论是局部还是全局性的变量,为了避免与其他变量名相冲突,原则上,请尽量使用“$”符号进行命名,代码如下所示:

    window.$objPub = {

      $objTmp:$("#divTip")

    }

    2)如果在同一个DOM对象中有多个对象的操作,应尽量采用链接式的写法优化调用的代码。

    给选择器一个上下文

    在jQuery中,DOM元素的查找可以通过$(element)方法实现。除此之外,还可以通过$(expression,[context])方法,在指定的范围内查找某个DOM元素,这个方法的优势在于,缩小定位元素的范围,比一般的元素定位更快捷,效果更好。

    语法格式如下:

      $(expression,[context])

    其中,参数expression为需要查找的字符串,可选项[context]为等待查找的DOM元素集、文档或jQuery对象。

    <div id="div0" class="MyCls" title="tmp0"></div>

    <div id="div1" class="MyCls" title="tmp0"></div>

    $("#div0",".MyCls")

    $("#div0")

    明显 前者的查找速度更快

    处理选择器中的不规范元素标志

    1.选择器中含有特殊符号

    $("#div#2#)

    $("#div\#2\#")

    为了正确获取这些属性中含有特殊字符的DOM元素,必须使用在特殊字符前添加转义符“\”的方法。

    2.选择器中含有空格符号

    在元素的属性中除了含有特殊符号外,有时还会含有空格符。空格符在元素的属性中虽不起眼,但如果我们在编写通过选择器获取元素的代码时,选择器中含有空格符与不含有空格符将会出现两种完全不同的结果。

    例如:

    $(".MyCls :hidden")

    $(".MyCls:hidden")

    前者为类别为MyCls中的隐藏元素也就是 后代中的隐藏元素

    后者为隐藏元素中类别为MyCls的元素

    优化事件中的冒泡现象

    使用stopPropagation()方法来停止事件中的冒泡事件

    在元素绑定事件的过程中,还有一个方法target(),通过该方法可以获取触发事件的元素。如果是多个元素触发同一个事件,可以借助target()方法,获取这些元素的父级元素,并将事件绑定到父级元素,通过冒泡现象,扩展到其子级元素中,这在某种程度上,比将事件绑定到每个子级元素执行效果更加优化。

    使用data()方法缓存数据

    缓存数据无论是在前端页面开发,还是在后台服务器脚本编写,都有十分重要的作用。同样,在jQuery中,也可以通过data()方法将数据缓存,虽然使用局部或全局的变量可以保存数据,但变量并不能进行数据的缓存,而且并不依附于某元素自身;如果使用data()方法,可以针对元素定义数据,在元素中存取数据,从而避免数据被循环引用的风险。根据功能的不同,data()方法有下列几种使用格式:

    1)根据元素中的名称定义或返回存储的数据,其调用格式为:

    data([name])

    其中,可选项参数[name]为字符型,表示存储数据的名称。

    2)根据元素中的名称在元素上存储或设置数据,其调用的格式为:

    data(name,value)

    其中,参数name表示存储数据的名称,value表示将要被存储的数据。

    3)除了定义和存储数据外,还可以移除元素中存放的数据,其调用格式为:

    removeData(name)

    其中,参数name表示将要被移除的元素上的数据名称。

    解决jQuery库与其他库的冲突

    在通常情况下,由于jQuery库良好的封装性,无论是全局变量(global),还是公用函数,都被无一例外地限定在其固有的默认空间中。基于这样的情况,在一般情况下jQuery库可以与其他的JS库并存,不会发生冲突现象。

    jQuery.noConflict()

    这个函数的作用是变更的使用权,以确定jQuery库不与其他库相冲突,使用权变更后,就只能使用jquery变量访问jquery对象了。

    使用子查询优化选择器性能

    在jQuery中,如果要查找一个元素,而这个元素被众多别的元素所包含或嵌套在其中。这时,如果直接使用find()方法进行查找,其操作性能较低。由于jQuery允许在一个集合中附加其他的选择操作,这样的话,我们可以先查找最外层的元素,保存起来,再查找更近一层的元素,进行保存,最后,在最接近的外层中,使用find()方法,查找需要的元素。通过这种方式,可以在本地变量中保存上一级对象,减少选择器性能开销。

    减少对DOM元素直接操作

    我们知道,DOM元素操作的原理是:先在内容中创建DOM结构,然后,更新现有的DOM结构。如果直接对DOM进行操作,那么,其性能也是很低的,因此,为了减少这种对DOM元素直接操作的次数,有必要在操作前完善大部分的DOM操作,最后通过一次直接操作,更新其DOM结构。

    正确区分DOM对象与jQuery对象

    DOM对象与jQuery对象的定义

     所谓DOM对象,指的是通过传统的JavaScript方法获取的DOM元素对象

    所谓jQuery对象,指的是通过jQuery语法包装原始的DOM对象后生成的新对象。jQuery对象在jQuery库中是特有的,只要是jQuery对象,就可以使用jQuery库中的所有方法与事件。

    DOM对象与jQuery对象的类型转换

    在jQuery中,可以很方便地完成DOM对象与jQuery对象之间的转换。只需调用jQuery中提供的[index]与get(index)方法即可将jQuery对象转换成jQuery对象。DOM对象只要通过jQuery方法$()进行包装,就可以转换成jQuery对象。

  • 相关阅读:
    C#多线程编程实战(一):线程基础
    查找算法之顺序查找
    设计模式01 创建型模式
    查找算法之二分查找
    设计模式01 创建型模式
    每天学一个,设计模式概要
    设计模式 01
    汽车电子传感器科普:激光雷达 毫米波雷达 超声波雷达
    C 如何判断编译器是否支持C90 C99?
    Node.js之EventEmiter
  • 原文地址:https://www.cnblogs.com/liangxiaoyu/p/6198836.html
Copyright © 2011-2022 走看看