提升jQuery的性能需要做好七件事


Posted in Javascript onJanuary 11, 2016

做好七件事帮你提升jQuery的性能,想知道哪几件事情吗?

1. Append Outside of Loops

凡是触及到DOM都是有代价的。如果你向DOM当中附加大量的元素,你会想一次性将它们全部附加进来,而不是分多次进行。当在循环当中附加元素就会产生一个常见的问题。

$.each( myArray, function( i, item ) {

  var newListItem = "<li>" + item + "</li>";
 
 $( "#ballers" ).append( newListItem );
 });

一个常用的技巧是利用文档片段(document fragment)。在循环的每一次迭代当中,将元素附加到片段而不是DOM元素当中。当循环结束后,将片段附加到DOM元素当中即可。

var frag = document.createDocumentFragment();

$.each( myArray, function( i, item ) {

  var newListItem = document.createElement( "li" );
  var itemText = document.createTextNode( item );

  newListItem.appendChild( itemText );

  frag.appendChild( newListItem );

});

$( "#ballers" )[ 0 ].appendChild( frag );

另一个简单的技巧是在循环的每次迭代当中,持续构建一个字符串。当循环结束后,将DOM元素的HTML设置成该字符串。

var myHtml = "";

$.each( myArray, function( i, item ) {

  myHtml += "<li>" + item + "</li>";

});

$( "#ballers" ).html( myHtml );

当然还有其它一些技巧可以供你尝试。一个名为 jsperf 的站点为测试这些性能提供了一条好的出路。该网站允许你使用基准测试每一个技巧,并将其跨平台的性能测试结果可视化的展现出来。

2. Cache Length During Loops

在for循环当中,不要每次都访问数组的 length 属性;应当事先将其缓存起来。

var myLength = myArray.length;

for ( var i = 0; i < myLength; i++ ) {

  // do stuff

}

3. Detach Elements to Work with Them

操作DOM是缓慢的,因此你想尽可能减少对齐进行操作。jQuery在1.4版本当中引入了名为 detach() 的方法来帮助解决这一问题,它允许你在对元素进行操作时,将它们从DOM当中分离出来。

var $table = $( "#myTable" );
var $parent = $table.parent();

$table.detach();

// ... add lots and lots of rows to table

$parent.append( $table );

4. Don't Act on Absent Elements

如果你正打算在一个空的选择器上运行大量的代码,jQuery并不会给予任何的提示 -- 它将会继续的执行,就像是没有发生任何的错误。必须由你来验证选择器包含了多少元素。

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();

// Better:
var $mySelection = $( "#nosuchthing" );

if ( $mySelection.length ) {

  $mySelection.slideUp();

}

// Best: Add a doOnce plugin.
jQuery.fn.doOnce = function( func ) {

  this.length && func.apply( this );

  return this;

}

$( "li.cartitems" ).doOnce(function() {


  // make it ajax! \o/


});

本指南特别适用于那些当选择器不包含元素时还需要大量的开销的 jQuery UI 部件。

5. Optimize Selectors

选择器的优化和过去比起来并不是那么的重要,因为很多浏览器都实现了 document.querySelectorAll() 方法并且jQuery将选择器的负担转移到了浏览器上面。但是仍然有一些技巧需要铭记在心。

基于ID的选择器

以一个ID作为选择器的开始总是最好的。

// Fast:
 $( "#container div.robotarm" );
 
 // Super-fast:
 $( "#container" ).find( "div.robotarm" );

采用 .find() 方法的方式将更加的快速,因为第一个选择器已经过处理,而无需通过嘈杂的选择器引擎 -- ID-Only的选择器已使用 document.getElementById() 方法进行处理,之所以快速,是因为它是浏览器的原生方法。

特异性

尽量详细的描述选择器的右侧,对于左侧则应反其道而行之。

// Unoptimized:
$( "div.data .gonzalez" );
 
// Optimized:
 $( ".data td.gonzalez" );

尽量在选择器的最右侧使用 tag.class 的形式来描述选择器,而在左侧则尽量只使用 tag 或者 .class 。

避免过度使用特异性

$( ".data table.attendees td.gonzalez" );
 
 // Better: Drop the middle if possible.
 $( ".data td.gonzalez" );

去讨好“DOM”总是有利于提升选择器的性能,因为选择器引擎在搜寻元素时无需进行太多的遍历。

避免使用通用选择器

如果一个选择器明确或暗示它能在不确定的范围内进行匹配将会大大影响性能。

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
 
 $( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.
复制代码
6. Use Stylesheets for Changing CSS on Many Elements

假如你使用 .css() 方法来改变超过20个元素的CSS,应当考虑为页面添加一个样式标签作为替代,这样做可以提升将近60%的速度。

// Fine for up to 20 elements, slow after that:
$( "a.swedberg" ).css( "color", "#0769ad" );

// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
  .appendTo( "head" );

7. Don't Treat jQuery as a Black Box

以上就是提升jQuery的性能需要做好的七件事,清楚了吧!

Javascript 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
javascript之更有效率的字符串替换
Aug 02 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
原生js实现日期联动
Jan 12 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
详解uniapp的全局变量实现方式
Jan 11 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 #Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 #Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 #Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 #Javascript
JavaScript基础知识及常用方法总结
Jan 10 #Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 #Javascript
javascript实现checkbox复选框实例代码
Jan 10 #Javascript
You might like
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
RequireJs的使用详解
2017/02/19 Javascript
vuejs如何配置less
2017/04/25 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
三维科技面试题
2013/07/27 面试题
新媒传信软件测试面试题
2013/02/24 面试题
出生公证委托书
2014/04/03 职场文书
年终考核实施方案
2014/05/26 职场文书
节水口号标语
2014/06/19 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
八达岭长城导游词
2015/01/30 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL