`

jQuery性能优化

 
阅读更多

back>>

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

    - 优先使用ID与标记选择器
    var eleName0=$(“#divTip”);
    var eleName1=$(”div”);
    var eleName2=$(”.myclass”);
    ID选择器速度最快,但是应避免重复修饰:
    var eleName0=$(“#divTip/.myclass/div #divShow”);//错误的修饰方式
    如果通过元素的属性访问,应使用tag修饰 var eleName3=$(“div[title=’tmp’]”)

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

$(“#divTip”).bind(“click”,function(){})
$(“#divTip”).css(“widht”:”20px”);
优化的代码如下:
Var objTmp=$(“#divTip”);
objTmp.bind(“click”,function(){})
objTmp.css(“widht”:”20px”);

 

    定义全局变量:$符号命名,目的是用来避免与其他变量名冲突

 

window.$objPub={
   $objTmp:$(“#divTip”)
}

    使用全局变量调用方式:$objPub. $objTmp.bind(“click”,function(){})

 

    - 给选择器一个上下文
    $(expression,[context]) 指定查找范围context效率低
    例子:

$(function() {
            window.$objPub = { //在全局范围中,定义一个windows对象
                $objTmp0: $("#div0", ".MyCls0"),
                $objTmp1: $("#div1")
            }
            TestFun();
        })
        function TestFun() { //自定义显示div内容的函数
            $objPub.$objTmp0.html("Tmp0");
            $objPub.$objTmp1.html("Tmp1");
        }
//HTML:
  <div class="MyCls0">
         <div id="div0" class="MyCls" title="tmp0"></div>
    </div>
    <div class="MyCls1">
         <div id="div1" class="MyCls" title="tmp1"></div>
    </div>

 

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

    - 选择器含有特殊符号
    <div id=”div#1[4]” class=”myclass”></div>
    按$(”div#1[4]”)获取元素,不能成功获取,需要转义$(”div\\#1\\[4\\]”)

    - 选择器中含有空格符号

3. 优化事件中的冒泡现象

 

4. 使用data()方法缓存数据
    data()方法可以针对元素定义数据,在元素中存取数据。
    - 取数据data([name])
    - 设置数据 data(name,value)
    - 移除数据 removeData(name)
    在元素上存取移除数据

$(function() {
            $("p").data("tmpData"); //初始时
            //显示初始化数据
            $("#divTip").append($("p").data("tmpData") == null ?
            "初始时:null" : $("p").data("tmpData"));
            $("p").data("tmpData", "陶国荣") //设置
            //显示设置后数据
            $("#divTip").append("<br>赋值后:" + $("p").data("tmpData"));
            $("p").removeData("tmpData") //移除
            //显示移除后数据
            $("#divTip").append($("p").data("tmpData") == null ?
            "<br>移除时:null" : $("p").data("tmpData"));
})

 

    data()方法除了可以存储一般的数据外,还可以存储json格式的值:

 

$(function() {
            $("p").data("tmpData"); //初始时
            //显示初始化数据
            $("#divTip").append($("p").data("tmpData") == null ?
            "初始时:null" : $("p").data("tmpData"));
            $("p").data("tmpData",
           { name: "李建洲", sex: "女", score: "80" }); //设置
            //显示设置后数据
            $("#divTip").append("<br>赋值后:" +
            $("p").data("tmpData").name + "/" +
            $("p").data("tmpData").sex + "/" +
            $("p").data("tmpData").score);
            $("p").removeData("tmpData") //移除
            //显示移除后数据
            $("#divTip").append($("p").data("tmpData") == null ?
            "<br>移除时:null" : $("p").data("tmpData"));
        })

 

5. 解决jQuery库与其他库的冲突

 

6. 使用子查询优化选择器性能
    例如:

$(function() {
            //var $divF = $("#divFrame");//保存最外层对象
            //var $ulF = $divF.find(".ulFrame");//在外层对象中查找
            //var $li0 = $ulF.find(".li0");
            //var $spn = $li0.find("span");//在最近一层中查找
            //var $li1 = $ulF.find(".li1");
            $spn = $("div ul li span");
            $li1 = $("div ul .li1");
            var strTmp = "最终数据:" //初始化显示内容
            strTmp += "<br>" + $spn.html(); //获取内容
            strTmp += "<br>" + $li1.html(); //获取内容
            $("#divTip").append(strTmp); //显示在页面中
})

    $spn = $("div ul li span");$li1 = $("div ul .li1");可以获得同样的查询结果,但是它没有做缓存,性能较低。对于嵌套元素的查找,应尽量使用子查询访问元素。

 

7. 减少对DOM元素直接操作
     DOM元素的操作原理:先在内存中创建DOM结构,然后更新现有的DOM结构。如果直接对DOM进行操作,效率低下。有必要在直接修改DOM前完善大部分DOM操作,最后通过一次直接操作,更新其DOM结构。

$(function() {
            //定义数组
            var arrList = ["list0", "list1", "list2", "list3", "list4", "list5"];
            var strList = ""; //初始化字符
            $.each(arrList, function(index) {
                //遍历后累加数组元素
                strList += ("<li>" + arrList[index] + "</li>");
            })
            //一次性完成DOM元素的增加
            $("#ulFrame").append(strList);
})

 

8. 正确区分DOM对象与jQuery对象

    - DOM对象 :是指通过传统的Javascript方法获取的DOM元素对象,如:
    var objDom=document.getElementById("#txtTmp");
    var DomValue= objDom.value;
    其中objDom保存的就是表单中的某个指定文本框对象,即DOM对象。变量DomValue获取了Id号为txtTmp的DOM对象的值。

    - jQuery对象 :指的是通过jQuery语法包装原始的DOM对象后生成的新对象。只要是jQuery对象,就可以使用jQuery库中的所有方法与事件。
    var $obj=$("#txtTmp");
    var Domvalue=$obj.val();
    变量$obj保存的就是表单中指定的文本框对象,由于被$()方法包装,该对象就是jQuery对象。DomValue变量保存通过jQuery中的val()方法获取的jQuery对象的值。

    不能使用DOM对象调用jQuery对象的方法,例子:
    var objDom=document.getElementById("#txtTmp");
    var Domvalur=objDom.val();//这是错误的

    同样,也不能使用jQuery对象调用DOM对象方法,例子:
    var $obj=$("#txtTmp");
    var DomValue=$obj.value;//这是错误的

    - DOM对象与jQuery对象类型转换
    Jquery对象转换为DOM对象:调用jQuery中提供的[index]与get(index)方法即可
    DOM对象转换为jQuery对象:DOM对象通过jQuery方法$()进行包装即可
    例子:

$(function() {
            //***** DOM对象转成jQuery对象 *****//
            //DOM对象
            var objDom0 = document.getElementById("div0");
            //转成jQuery对象
            var $obj0 = $(objDom0);
            //调用jQuery中的方法设置其中的内容
            $obj0.html("DOM对象转成jQuery对象后设置的内容");

            //***** jQuery对象转成DOM对象 *****//
            //jQuery对象
            var $obj1 = $("#div1");
            //转成DOM对象
            var objDom1 = $obj1.get(0);
            //调用JavaScript中的对象方法设置内容
            objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容";
        })
分享到:
评论

相关推荐

    jQuery性能优化(转)

    **jQuery性能优化** jQuery作为一款广泛使用的JavaScript库,极大地简化了网页中的DOM操作、事件处理、动画制作等任务。然而,随着网站复杂性的增加,优化jQuery代码以提高页面加载速度和用户体验变得至关重要。...

    jquery性能优化高级技巧

    jquery性能优化高级技巧,下面主要从七个方面对jquery性能优化做介绍: 1.通过CDN(Content Delivery Network)引入jQuery库 2.减少DOM操作 3.适当使用原生JS 4.选择器优化 5.缓存jQuery对象 6.定义一个可以...

    jQuery性能优化28条建议你值得借鉴

    jQuery性能优化28条建议 一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些。找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来。我也做了一个jQuery性能优化的简明...

    jQuery性能优化指南

    以下是一些关于jQuery性能优化的关键知识点,这些内容可能在"jQuery性能优化指南1.htm、jQuery性能优化指南2.htm、jQuery性能优化指南3.htm"中有所涉及。 1. **选择器优化**:jQuery的选择器是强大的,但过度使用...

    jQuery性能优化指南.pdf

    ### jQuery性能优化指南 在网页开发中,使用jQuery可以极大地简化HTML文档遍历、事件处理、动画等操作,但随着项目复杂度的增加,如何优化jQuery的使用,以提升页面性能变得至关重要。以下是对给定文件《jQuery性能...

    Jquery性能优化指南

    在进行jQuery性能优化时,有几个关键点可以帮助提升代码运行效率,从而提高网页的加载速度和用户体验。以下是对这些优化策略的详细解释: 1. **总是从 ID 选择器开始继承**: ID选择器是最高效的,因为它直接对应...

    JQuery性能优化指南

    在JavaScript的世界里,jQuery是一个广泛使用的库,它简化了DOM...通过阅读《jQuery性能优化指南(1).htm》和《jQuery性能优化指南(2).htm》,可以深入了解每个技巧的详细实践方法,进一步提升您的jQuery项目性能。

    jQuery 性能优化手册 推荐

    《jQuery性能优化手册》是一份指导开发者提升jQuery代码执行效率的重要文档。以下是对其中关键知识点的详细解释: 1. **始终从ID选择器开始继承**:由于JavaScript的`getElementById()`方法是直接针对ID查找元素,...

    jQuery性能优化的38个建议【技术文档】

    以下是根据提供的文件内容总结的38个jQuery性能优化建议: 1. **定义jQuery变量时使用var关键字**:确保变量作用域清晰,避免全局污染,提高代码可读性。 2. **合并变量声明**:当声明多个变量时,使用一个var...

    jQuery性能优化指南(1)

    《jQuery性能优化指南》系列文章主要探讨如何提升jQuery代码的执行效率,以达到更好的用户体验。在Web开发中,性能优化是关键,特别是对于用户交互频繁的网页应用,jQuery的高效运用能显著改善页面加载速度和响应...

    jQuery性能优化建议.doc

    jQuery性能优化是提升网页加载速度和用户体验的关键环节。在jQuery中,选择器的选取对性能影响显著。根据提供的文档,本文将详细介绍如何利用选择器优化jQuery的性能,并提供一些实用的建议。 首先,我们强调的是...

    提高jQuery性能优化的技巧

    本文主要探讨了提高jQuery性能的一些优化技巧,这些技巧有助于提升网页的加载速度、交互流畅度和整体性能。 首先,提高性能的一个基本原则是缓存变量。这是因为DOM(文档对象模型)的遍历非常消耗资源,因此需要...

Global site tag (gtag.js) - Google Analytics