读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 >

转载于:https://www.cnblogs.com/janes/p/3541455.html