提升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 相关文章推荐
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
实例讲解JavaScript预编译流程
Jan 24 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP内核探索之变量
2015/12/22 PHP
如何离线执行php任务
2017/02/21 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
简单的个人租房协议书范本
2014/11/26 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript