jQuery性能优化

奋飛

发布于 2019-08-15 16:13:35

8700

发布于 2019-08-15 16:13:35

文章被收录于专栏：Super 前端

本文链接：https://ligang.blog.csdn.net/article/details/41793171

一、jQuery性能优化常用策略：

1. 优先使用ID与标记选择器在jQuery中，最快访问DOM元素的方式是通过元素ID号，其次是通过元素的标记。前者源于JavaScript中的document.getElementById()方法，而后者基于document.getElementsByTagName()方法。 2. 使用jQuery对象缓存所谓对象缓存，就是在jQuery对象时尽量使用变量先保存对象名，然后通过变量进行相应的方法操作。

var $objTmp = $("#divTip"); //先使用变量进行保存
$objTmp.bind();
$objTmp.css();

如果想使用定义的变量，在其他函数中也能被使用，那么可以将该变量定义为全局性的变量：

window.$objPub = { //在全局范围中，定义一个windows对象
	$objTmp: $("#divTmp")
}

使用：$objPub.$objTmp.bind().css(); 注意：尽量使用“$”符号进行命名；尽量采用链接式的写法优化调用的代码 3. 正确使用选择器 jQuery内部将自动调用浏览器的原生方法，执行速度依据各浏览器支持情况 ID和元素标签选择器(各浏览器都支持)>元素类型选择器(各浏览器对应原生方法各不相同)>伪类型和属性选择器(没有对应的原生方法) $("#id") > $(".class") > $(":input")/$("div[title='A']") 建议尽量减少使用伪类型及属性选择器去定位页面元素，少量在遍历时使用选择器，从而提升页面执行速度，不断优化代码的性能。 4. 使用最新版本的jQuery 据预算新版本的1秒内执行的次数是旧版本的10几倍，可以明显看出新版本框架在性能上的优势。 5. 避免过度使用jQuery对象在jQuery中，用户每次使用选择器获取页面中的元素时，都会自动生成一个jQuery对象，该对象包括众多的属性和方法，而通过对象自身去调用这些方法时，资源消耗相对要大很多；为了减少这样的消耗，可以通过对象调用方法对应的函数。

var strname = "";
var $name = $("#name");
strname = $name.text();  //通过调用对象方法获取它的值
strname = $.text($name); //通过调用jQuery函数获取它的值

6. 正确处理元素间父子关系

var $p = $("#parents");
var $c = $(".child");
$p.find($c); //执行速度最快
$p.children($c);
$($c,$p);
$($p > $c);

jQuery内部处理顺序是从右到左，上述其最后两条语句，都是先获取子元素，然后再与多个父元素相匹配 7. 正确使用循环语句

for(var i=0; i<arr.length; i++)  //原生语句，速度效率更高
$.each(arr,function(){});
console.time("for");  console.timeEnd("for"); //计时

二、优化选择器执行速度；

1. 为了正确获取含有特殊字符的DOM元素，必须在特殊字符前面添加转义字符“\\”才能获取 $("#div\\#2\\#")

<div id="div0" class="MyCls">
     <div id="div1" class="MyCls" style="display:none"></div>
</div>
<div id="div2" class="MyCls" style="display:none"></div>
<div id="div3" class="MyCls" style="display:none"></div>
$(".MyCls :hidden") //1 类别为MyCls中的隐藏元素
$(".MyCls:hidden")	//3 隐藏元素中类别为MyCls的元素

2. 给选择器一个上下文 $(expression,[context]) 在指定范围内查找某个DOM元素例：$("#div1",".MyCls")

三、使用方法优化性能

如target()方法优化事件中的冒泡现象、data()缓存获取的数据

 $("#frame").bind("click", function(e) {
    $objChild = $(e.target);//捕捉触发事件的元素
    $objChild.addClass("txt");//增加子元素的样式
})

可以使用stopPropagation()方法来停止事件中的冒泡现象。

$("p").data("tmpData",{ name: "李建洲", sex: "女", score: "80" }); //设置
$("p").data("tmpData").name; //获取

四、优化DOM元素的操作

DOM元素操作的原理：先在内存中创建DOM结构，然后更新现有的DOM结构。 jQuery对象；通过jQuery语法包装原始的DOM对象后生成的新对象在jQuery中，只需要调用jQuery中提供的[index]与get(index)方法；另外，DOM对象只要通过jQuery方法$()进行包装，就可以转换成jQuery对象。