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

来源:互联网 时间:1970-01-01

一、优化选择器执行速度

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 >


相关阅读:
Top