jQuery性能优化(2)

最新推荐文章于 2024-07-12 00:23:05 发布

Basaly

最新推荐文章于 2024-07-12 00:23:05 发布

阅读量184

点赞数

分类专栏： jQuery笔记文章标签：性能优化缓存 jquery

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

版权

jQuery笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

四使用data()方法缓存数据

使用data()方法，可以针对元素定义数据，在元素中存取数据，从而避免数据被循环引用的风险。根据功能不同，有下列几种使用格式：

（1）根据元素中的名称定义或返回存储的数据

data[name]

可选参数name为字符型，表示存储数据的名称

（2）根据元素中的名称在元素上存储或设置数据

data(name,value)

name表示存储数据的名称，value表示将要被存储的数据

（3）除了定义和存储数据外，还可以移除元素中存放的数据

removeData(name)

简单实例：

<body>
	  <p><b>数据状态</b></p>
	  <div id="divTip"></div>

</body>

JS:

<script type="text/javascript">
			$(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"));
			})
</script>

界面效果：

五使用子查询优化选择器性能

如果一个元素被众多别的元素所包含或嵌套在其中，如果直接用find（）方法查找操作性能比较低，我们可以先查找最外层元素，保存起来，再查找更进一层的元素，进行保存，最后，在最接近的外层中，使用find（）方法，查找需要的元素，示例：

功能描述：创建一个div标记，并在其中创建一个列表ul，列表中包含两行表项li，在其中的一个表项中设置span标记，通过子查询，获取span元素与另外一个表项中的内容并显示在页面中

<body>
	  <div id="divFram">
	  	<ul class="ulFram">
	  	  <li class="li0"><span>测试元素1</span></li>
	  	  <li class="li1">测试元素2</li>
	  	</ul>
	  </div>
	  <div id="divTip"></div>
</body>

JS：

<script type="text/javascript">
			$(function(){
				var $divF=$("#divFram");
				var $ulF=$divF.find(".ulFram");
				var $li0=$ulF.find(".li0");
				var $spn=$li0.find("span");//在最近一层查找
				var $li=$ulF.find(".li1");
				var strTmp="最终数据：";
				strTmp+="<br>"+$spn.html();
				strTmp+="<br>"+$li.html();
				$("#divTip").append(strTmp);
			})
</script>

界面效果：

六减少对DOM元素直接操作

我们知道，DOM元素操作的原理是：先在内存中创建DOM结构，然后，更新现有的DOM结构。如果直接对DOM进行操作，性能也是比较低的，为了减少对DOM元素直接操作次数，有必要在操作前完善大部分的DOM操作，最后通过一次直接操作，更新其DOM结构

示例：

功能描述：在页面中创建一个ul标记，然后通过代码，在列表中动态添加6个含有内容的表项，并将最终结果显示在页面中

<body>
	  <ul id="ulFram"></ul>
</body>

JS：

<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元素的增加
				$("#ulFram").append(strList);
			})
</script>

界面效果：

很多初学者往往采用下面的代码：

$.each(arrList, function(index) {

//遍历后累加数组元素

$("#ulFram").append("<li>"+arrList[index]+"<li>");

})

但是每遍历一次，都直接对DOM元素进行操作，效率很低

摘自《jQuery权威指南》

Basaly

关注

0
点赞
踩
0

收藏

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

四使用data()方法缓存数据使用data()方法，可以针对元素定义数据，在元素中存取数据，从而避免数据被循环引用的风险。根据功能不同，有下列几种使用格式：（1）根据元素中的名称定义或返回存储的数据 data[name] 可选参数name为字符型，表示存储数据的名称（2）根据元素中的名称在元素上存储或设置数据 data(name,value)n
复制链接

扫一扫