jQuery性能优化

Posted 2020-09-30

 

jquery性能优化

　　作为一个刚毕业的小白，刚刚工作了一段时间，因为工作地域的原因又开始使用jquery了，工作中遇到了一些性能优化的问题，所以特意总结下来，作为我的第一篇博客小小留个念想的。

　　

　　1.选择合适的选择器

　　$(‘#id‘)

　　在jQuery中使用id定位DOM元素是最快的，因为它直接来自于javascript的getElementById()方法。  　　　　　　　　　　

　　$("div")

　　在jQuery中使用元素选择器定位DOM元素是也是不错的，因为将直接调用document.getElementByTagName()方法　　　　

　　$("[attribute=value]")

　　属性选择器使用的是querySelectorAll()方法，目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。 

　　$(".class")

　　在jQuery中使用元素选择器定位DOM元素是不推荐，因为将直接调用document.getElementByClassName()方法,对于IE8或更早的版本支持的不好。

　　$(":animated")

　　利用属性来定位DOM元素的方式，没有原生的方法，jquery需要搜索所有的元素来的因为这个方式，性能很差。

　　

　　2.将对象缓存起来

$("#id").css("width","100px");
$("#id").bind("click",function(){});

 

　　以前没有实际开发的时候用jquery写过这种代码，jquery会在创建每一个选择器的时候，查找DOM，创建多个jquery对象

let $id = $("#id")
$id.css("background-color","red")
    .fadeIn("slow")

　我们应该将对象缓存进一个变量然后再操作。

 

　3.采用find()，而不使用上下文查找

　　如果一个页面有许多DOM节点时，.find()函数会快一些：

 

　4.合理利用HTML5的Data 属性

　　HTML的data属性可以帮助我们插入数据。jquery的data（）方法，可以有效的利用HTML5的属性，来自动得到数据

<div id="a1" data-value = ‘hello‘ data-obj=‘{"name":"lixiaolong"}‘>
</div>

 

好了，我们看一下.data()的效果吧

$(‘#a1‘).data("value")  //"page"
$(‘#a1‘).data("obj").name //"lixiaolong"
        

 

　5.尽量使用原生的javascript方法

　下面一段代码，它用来判断多选框是否被选中

var $cr = $("#cr")
$cr.click(function(){
if($cr.is(":checked")){
alert("感谢你的支持！你可以继续操作!")
})

　　它使用了jquery提供的is（）方法来判断多选框是否选中，但这里可以使用原生的JavaScript方法，看下面代码：

var $cr = $("#cr")
var cr = $cr.get(0)   //DOM对象
$cr.click(function(){
if(cr.checked){
alert("hello")
}
})

　　第二种效率高于第一种的方式，因为它不需要拐弯抹角的调用许多函数。

　　

　　6. 使用直接函数，而不要使用与与之等同的函数

　　为了获得更好的性能，你应该使用直接函数如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，因为后面的几个将会调用$.ajax()。

　　

　　7.数组方式使用jquery对象

　　在性能方面，建议使用简单的for循环，或者while循环来处理，而不是$.each(),这样性能能优化一点

$.each(array,function(index){
array[index] = index ;
})

　使用for代替each（）方法：

var arr = [] ;
for(var i = 0 ;i<arr.length ; i++ ) {
array[i] = i ;
}

　　

　　8.事件代理

　　JavaScript事件都会冒泡到父元素上。比如我们给li加样式的时候就可以加到ul上

$("li").click(function(){
$(this).css("background","red")
})

　　这样绑定效率不高，我们只用向父元素绑定一次事件，然后通过event.target或取到点击的当前元素：

$("#table ul").clicked (function(e){
var $clicked = $(e.target); //捕捉到触发的元素    
$clicked .css({"background","red"});
})

　　

　　9.压缩js文件

　　可以使用javascript压缩工具进行，如使用JSMin,YUI Compressor，或者JS Compressor 。