高性能jquery的几种优化

Posted 2021-04-08 前端小砖头

高性能jquery

当我们在用jquery尽量遵循以下原则对于jQuery代码的性能将会有质的提升

1.

选择器

使用JQuery时，你可以使用多种选择器，选择同一个元素，各种方法之间的性能是不一样的，有时候差异会特别大。 通常比较常用的选择器有以下几个：

1. ID选择器 $("#id")

2. 标签选择器 $("td")

3. 类选择器 $(".target")

4. 属性选择器 $("td[target='target']")

5. 伪类选择器 $("td:hidden")

就性能而言最佳性能无疑是原生选择器,如果有可能尽量使用原生选择器,

1. 性能顺序：ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器

2. ID(getElementById)、标签选择器(getElementsByTagName)都有原生的方法对应，所以很快；类选择器在除了IE5-IE8之外的主流浏览器几乎都有原生方法(getElementsByClassName)

3. 如果要兼顾IE6、7、8的性能，避免使用全局的类选择器；

4. 属性和伪类选择器非常慢，如非必要，尽量少使用伪类选择器和属性选择器

document.getElementById("id")>$(#id)>$(.class)~$(tagName)>$(#id).find('...')

非以上几种就尽量别用了;

牢记原则

1. 为模块中操作最频繁的元素和根元素设置id，然后缓存；

2. 对没有id的元素检索，尽量采用路径最短的祖先元素id作为默认的搜索范围，并采用纯类选择器或者标签选择器；

3. 尽量避免复杂的选择器

2

缓存常用对象

当你需要超过2次使用一个对象时尽量缓存该对象,避免多次查找;

<div id="content"></div>

A.  

var oContent = $(#content);
oContent.css('color','#000');
oContent .html('你好');

B.   

$(#content).css('color','#000');
 $(#content) .html('你好');

A明显要优于B;因为A多次使用 div对象但是只搜索一次对应的节点对象(调用选择器搜索节点对象),之后的每次都是使用的缓存,而B每次使用都会重新搜索节点对象;性能优劣不言而喻;

3

少dom操作

Dom操作是浏览器操作中最为耗时的操作之一(每次操作都是页面重绘)，JQuery中提供了append、appendTo、prepend、prependTo、after、before、insertAfter、wrap等操作dom的实用方法这些方法都会调用domManip()方法(该方法会解析传入的值,并做对应的操作返回这个方法页游调用其它方法...)，频繁使用这些方法可能会引起性能问题，一个提高性能的实践原则就是“尽可能少的使用它们”。 如果一定要用到，也尽可能的采用合并、批量操作来减少dom的操作消耗。

<div id="frag">
    <p class="display-none"></p>
</div>
var frag = $('#frag');    
for (var i = 0; i < 1000; i++) {      
    var el = $('#frag').find('p').eq(0).clone();
    el.removeClass('display-none');
    el.html(i);
    frag.append(el);
}   
 //可以替换为：
 var html = [];    
 for (var i = 0; i < 1000; i++) {
     html.push('<p>' + i + '</p>');
 }
 frag.append(html.join(''));

等等,尽量单次dom渲染与重构;

4

尽量用类名控制样式调整

<div id="frag">
    <p class='display-none'></p>
</div>

var obj=$('#frag');
//A
 obj.css('width',200);
 obj.css('height',200);
 obj.css('color':'#000');
//B
 obj.attr('style','width:200px;height:200px;background:#eee;');
//C
/*
样式表添加一个样式
*/
.css-frag{width:200px;height:200px;color:#000;}

 obj.addClass('css-frag');

以上三种情况

C>B>A

5

使用事件委托

经常会遇到给一个列表中所有元素添加点击事件的业务场景，传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件：

 $('li').click(function(){});

这种方法的在列表数量比较大的时候会有严重的性能问题，应该值得关注。JQuery在很早的版本中已经引入了事件委托机制，可以很大程度的降低添加事件监听的消耗和内存的消耗。

  $('ul').on('li','click',function(){});

有几个li后者就比前者快几倍

6

html方法坑

jQuery的html方法的作用是为dom元素设置innerHTML，分析html的源代码（1.8.3）

if ( elem.nodeType === 1 ) {
  jQuery.cleanData( elem.getElementsByTagName( "*" ) );
  elem.innerHTML = value;
}

在设置dom的innerHTML之前，会执行jQuery.cleanData，这个方法会对dom元素做一些clean的处理，如removeEvent，删除缓存等。
以两百行的列表为例，在ff浏览器中，该方法会执行大约5ms到8ms。即当dom元素为空时和dom元素中有两百行数据时，执行html方法，后者会比前者多运行5ms到8ms。
坑点
cleanData方法在jQueryUI中也会定义，且会重写$.cleanData，增加一些额外的操作，性能会受到影响。
还是以两百行的列表为例，在ff浏览器中，该方法会执行大约60ms到70ms。即当dom元素为空时和dom元素中有两百行数据时，执行html方法，后者会比前者多运行60ms到70ms。
解决方案
1. 采用原生的dom.innerHTML
2.在执行html()方法之前，先执行remove()方法

高性能的代码离不开平日的良好编码习惯;

与君共勉