做好七件事帮你提升jQuery的性能


Posted in Javascript onFebruary 06, 2014

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.
 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" );
 Don't Treat jQuery as a Black Box

把jQuery的源码当成文档,可以把它(http://bit.ly/jqsource)保存在你的收藏夹内,经常的查阅参考。

Javascript 相关文章推荐
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 #Javascript
javascript简单性能问题及学习笔记
Feb 04 #Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 #Javascript
21个值得收藏的Javascript技巧
Feb 04 #Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 #Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 #Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 #Javascript
You might like
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
基于JQuery的日期联动实现代码
2011/02/24 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
浅谈React中组件间抽象
2018/01/27 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
编写Python CGI脚本的教程
2015/06/29 Python
详解Django中的权限和组以及消息
2015/07/23 Python
解决Python requests 报错方法集锦
2017/03/19 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
如何更优雅地写python代码
2019/07/02 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
党员入党表决心的话
2014/03/11 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
聚会通知怎么写
2015/04/23 职场文书
小学教师读书笔记
2015/07/01 职场文书