jQuery性能优化(1)

最新推荐文章于 2020-12-28 10:34:43 发布

Basaly

最新推荐文章于 2020-12-28 10:34:43 发布

阅读量180

点赞数

分类专栏： jQuery笔记文章标签：选择器优化 jquery

本文链接：https://blog.csdn.net/qq_37697037/article/details/60624193

版权

jQuery笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一优化选择器的执行速度

（1）优先使用ID与标记选择器

在jQuery中，访问DOM元素的最快方式是通过元素ID号，其次时通过元素的标记。再其次就是使用类别（.class）访问。

在访问页面元素时，要尽量避免出现下列的访问语法：

1）虽然访问DOM元素的最快方式是通过元素ID号，但应避免重复修饰，即用ID号修饰ID号，如

var eleName()=$(“#divTip #divShow”);

2）避免使用tag或class来修饰ID号，这样的话，代码先执行遍历，后进行匹配，错误代码如下：

var eleName()=$(“.Myclass #divShow”);

3）如果是通过元素的属性访问，应尽量使用tag修饰进行访问，正确代码如下：

var eleName()=$(“div[title=’tmp]”);

（2）使用jQuery对象缓存

对象缓存，就是在使用jQuery对象时，想尽量使用变量保存对象名，然后通过相应的方法操作，下面代码就是欠妥的：

$("#divTip").bind("click",function(){alert("hello");})
$("#divTip").css("width","200px");

优化后：

var objTmp=$("#divTip;")
objTmp.bind("click",function(){alert("hello");})
objTmp.css("width","200px");

如果想让定义的变量在其他函数中也能使用，可以将变量定义为全局性变量。

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

两点需要注意：

1）无论是局部还是全局性变量，为避免与其他变量名冲突，原则上尽量使用$符号进行命名

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

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

$objPub.$objTmp.bind("click",function(){alert("hello");}).css("width","200px");

（3）给选择器一个上下文

DOM元素的查找可以用$(expression,[context])方法，在指定的范围内查找某个DOM元素，优势在于缩小定位元素的范围，查找更快捷

expression为需要查找的字符串，可选项[context]为等待查找的DOM元素集，文档或jQuery对象

例如：

HTML：

<body>
	 <div class="MyCls0">
	 	<div id="div0" class="MyCls" title="tmp0"></div>
	 </div>
	 <div class="MyCls1">
	 	<div id="div1" class="MyCls" title="tmp1"></div>
	 </div>
	</body>

JS：

<script type="text/javascript">
			$(function(){
				window.$objPub={
					$objTmp0:$("#div0",".MyCls0"),
					$objTmp1:$("#div1")
				}
				TestFun();
			})
			function TestFun(){
				$objPub.$objTmp0.html("Tmp0");
				$objPub.$objTmp1.html("Tmp1");
			}
</script>

CSS：

body{
	font-size: 13px;
}
.MyCls0{
	border: solid 1px #666;
	margin: 5px;
	width: 200px;
}
.MyCls1{
	border: solid 1px #ccc;
	margin: 5px;
	width: 200px;
}
.MyCls{
	background-color: #eee;
	padding: 5px;
}

页面效果：搜索范围更小的TMP0执行更快

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

（1）选择器中含有特殊符号

根据W3C规定，元素中的属性不能包含类似于# ( [等不规范的特殊字符，但在自动生成的有些页面中，常常含有特殊字符。如果采用常规方法，通过选择器获取元素，会报错，对于下面代码：

        <div id="div#2#" title="tmp1"></div>
	<div id="div[3]" title="tmp2"></div>
	<div id="div(4)" title="tmp3"></div>

这样获取会失败：

        $("#div#2#").html("Tmp1");
        $("#div[3]").html("Tmp2");
	$("#div(4)").html("Tmp3");

应该在特殊字符前加上转义\\符号

       $("#div\\#2\\#").html("Tmp1");
       $("#div\\[3\\]").html("Tmp2");
       $("#div\\(4\\)").html("Tmp3");

（2）选择器中含有空格符号

在编写通过选择器获取元素代码时，选择器中含有与不含有空格符，结果是不一样的。例如

HTML：

<body>
	 <div class="fram">
	 	<div id="div0" class="MyCls">
	 	   <div id="div1" class="MyCls" style="display: none;">
	 		</div>
	 	</div>
	 </div>
	<div id="div2" class="MyCls" style="display: none;"></div>
	<div id="div3" class="MyCls" style="display: none;"></div>
	<div id="divTip"></div>
</body>

JS：

<script type="text/javascript">
			$(function(){
				var $objTmp0=$(".MyCls :hidden");//选择器中有空格符
				var $objTmp1=$(".MyCls:hidden");//选择器中没有空格符
				var strTmp="'.MyCls :hidden'方式获取的元素个数是：";
				strTmp+=$objTmp0.length;
				strTmp+="<br><br>'.MyCls:hidden'方式获取的元素个数是：";
				strTmp+=$objTmp1.length;
				$("#divTip").append(strTmp);
			})
</script>

结果：

$objTmp0保存的是类别为MyCls中的隐藏元素，个数为1，$objTmp1保存的是隐藏元素中类别为MyCls的元素，为3.

三优化事件中的冒泡现象

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

在表单中设置三个文本框，使每个文本框在获取焦点时改变原有的样式。

HTML：

<body>
	 <form id="form1">
	 	<fieldset id="fram" style="width: 200px;">
	 		<legend>输入信息</legend>
	 		<div>姓名：<input id="Text1" type="text"></div>
	 		<div>性别：<input id="Text2" type="text"></div>
	 		<div>年龄：<input id="Text3" type="text"></div>
	 	</fieldset>
	 </form>
</body>

JS：

<script type="text/javascript">
			$(function(){
				$("#fram").bind("click",function(e){
					$objChild=$(e.target);//捕捉触发事件的元素
					$objChild.addClass("txt");
				})
			})
</script>

CSS：

body{
	font-size: 13px;
}
div{
	line-height: 1.8em;
}
.txt{
	border: #666 1px solid;
	padding: 2px;
	width: 80px;
	margin-right: 3px;
}

结果显示：

姓名栏的样式已经改变

摘自《jQuery权威指南》

Basaly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery性能优化(1)

一优化选择器的执行速度（1）优先使用ID与标记选择器在jQuery中，访问DOM元素的最快方式是通过元素ID号，其次时通过元素的标记。再其次就是使用类别（.class）访问。在访问页面元素时，要尽量避免出现下列的访问语法：1）虽然访问DOM元素的最快方式是通过元素ID号，但应避免重复修饰，即用ID号修饰ID号，如var eleName()=$(“#divTip
复制链接

扫一扫