jQuery性能优化(2)

来源：互联网发布：数据泄露防护系统卸载编辑：程序博客网时间：2024/05/09 10:48

四使用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权威指南》

0 0