开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

读<jquery 权威指南>[7]-性能优化与最佳实践

简介:
+关注继续查看

一、优化选择器执行速度

1. 优先使用ID选择器和标记选择器

  • 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选用class、属性等选择器。
  • 避免重复使用ID号修饰ID号,例如$("#div1 #div2")。也避免使用tag,class等修饰ID号,例如$(".title #id")。
  • 使用属性选择器时,尽量使用标记进行修饰。例如$(div[title='aa'])。

2. 使用jQuery对象缓存

  • 如果多次操作同一个DOM元素,可以将其存在全局变量中,避免重复调用选择器。
  • 缓存JQuery的变量命名规则尽量以$开头。
  • 如果同一个DOM对象进行多个操作,尽量使用链式写法。

3. 给选择器一个上下文

格式:$(expression,[context]),expression是选择器表达式,context是选择器查找的范围。这样会比在全局查找效率高一些。

实例:

复制代码
<script type="text/javascript">
        $( function() {
            window.$objPub = { //在全局范围中,定义一个windows对象
                $objTmp0: $( "#div0", ".MyCls0" ),
                $objTmp1: $( "#div1")
            }
            TestFun();
        })
        function TestFun() { //自定义显示div内容的函数
            $objPub.$objTmp0.html( "Tmp0").css("width" ,"100px");
            $objPub.$objTmp1.html( "Tmp1");
        }
    </script >
复制代码

二、处理选择器不规范元素

1. 选择器属性中包含特殊符号:特殊字符前添加转义字符\\。

2. 选择器中空格符:包含空格时表示祖先元素和后代元素的关系;不包含空格时表示一个选择器中两种筛选条件的合并。

复制代码
<script type="text/javascript">
        $( function() {
            var $objTmp0 = $(".MyCls :hidden" );//含有空格符,.MyCls子元素中的隐藏元素
            var $objTmp1 = $(".MyCls:hidden" );//没有空格符,.MyCls类名并且隐藏的元素
            var $objTest = $("#div\\[test\\]" );//选择器特殊符号
        })
    </script >
复制代码

三、解决jQuery库与其他库$冲突问题

使用jQuery.noConflict()转让$使用权,然后只能使用jQuery变量访问jQuery对象。

1.jQuery库先于其他库导入

无需使用jQuery.noConflict()方法。只要使用jQuery方法时不要使用$符号而是使用jQuery符号就可以了。

2.jQuery库后于其他库导入

需要先使用jQury.noConflict(),然后使用jQuery符号操作jQuery中的对象。如果仍然想使用简洁符号,有两种方法

①自定义其他符号用作快捷方式:

复制代码
var j=jQuery.noConflict();
        j( function() {
            j( "#Button1").click(function () {
                获取对象
                var $objTmp = j("#txtName" );
                显示内容
                j( "#divTmp").html("J_" + $objTmp.val());
            })
        })
复制代码

②在jQuery方法内部继续使用$符号。

复制代码
jQuery.noConflict();
        jQuery( function($) {
            $( "#Button1").click(function () {
                //获取对象
                var $objTmp = $("#txtName" );
                //显示内容
                $( "#divTmp").html("J_" + $objTmp.val());
            })
        })
复制代码

四、其他优化

  • 尽量减少对DOM元素直接操作的次数。
复制代码
<script type="text/javascript">
        $( function() {
            //定义数组
            var arrList = ["list0" , "list1", "list2", "list3" , "list4", "list5"];
            var strList = "" ; //初始化字符
            $.each(arrList, function(index) {
                //遍历后累加数组元素
                strList += ( "<li>" + arrList[index] + "</li>" );
            })
            //一次性完成DOM元素的增加
            $( "#ulFrame").append(strList);
        })
    </script >
复制代码
  • 使用子查询优化选择器性能。

五、区分DOM对象和jQuery对象

1.DOM对象和jQuery对象定义的区别

  • DOM对象:通过传统js方法获取的DOM元素对象;
  • jQuery对象:通过jQuery方法包装原始的DOM对象后生成的新对象。

2.DOM对象和jQuery对象的转换

如果想使DOM对象和jQuery对象之间的方法相互调用,需要先将对象进行类型转换。

  • DOM转jQuery:DOM对象通过$()方法进行包装就可以转换为jQuery对象。
  • jQuery转DOM:通过get(index)或者[index]方法,可以将jQuery对象转换为DOM对象。
复制代码
<script type="text/javascript">
        $( 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[0];//或者$obj1.get(0);
            //调用JavaScript中的对象方法设置内容
            objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容" ;
        })
    </script >
复制代码






版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
0 0
【jquery Ajax】接口的学习与Postcode插件的使用
【jquery Ajax】接口的学习与Postcode插件的使用
0 0
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于VUE的单页面性能优化实践
立即下载
如何做小程序性能优化
立即下载
ReactNative启动性能优化
立即下载