jquery官方性能优化建议
jquery的官网上给出了6点性能方面的建议:
(1)在循环外面做append操作
DOM操作是有成本的,一次性append要比循环中每次都append要好很多
下面这种操作方式是一种普遍的现象,在循环中每次都执行append
$.each( myArray, function( i, item ) {
var newListItem = "<li>" + item + "</li>";
$( "#ballers" ).append( newListItem );
});
建议创建一个fragment,在循环中 把内容append到fragment,最后把这个fragment append到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 );
或者在循环中构造字符串,最后把字符串设置到节点中
(2)循环时缓存length
循环中,不要每次都访问length熟悉,应在循环开始前把length值缓存起来
var myLength = myArray.length;
for ( var i = 0; i < myLength; i++ ) {
// ...
}
(3)操作子节点时 先把子节点Detach出来
DOM操作较慢,应尽量避免大量操作,如果想对某节点内部做一些操作,应先把子节点都移出来,对这些子节点操作完成后再放回去
var table = $( "#myTable" );
var parent = table.parent();
table.detach();
// 执行对table的各种操作
parent.append( table );
(4)不要对空节点进行操作
如果你对空对象操作时,jquery是不会告诉你的,因为对空操作时开销也不小,所以应该自己验证一下是否为空,以免做很多无效操作
// 糟糕的方式
$( "#nosuchthing" ).slideUp();
// 好的方式
var elem = $( "#nosuchthing" );
if ( elem.length ) {
elem.slideUp();
}
// 更好的方式
jQuery.fn.doOnce = function( func ) {
this.length && func.apply( this );
return this;
}
$( "li.cartitems" ).doOnce(function() {
// ...
});
(5)选择器优化
1)使用ID选择器
选择器以ID开始总是最好的
// 快
$( "#container div.robotarm" );
// 更快
$( "#container" ).find( "div.robotarm" );
第二种方式更快是因为使用了浏览器原生支持的document.getElementById()
2)右边尽量指定得详细点 而左边则尽量简单点
// 不好
$( "div.data .gonzalez" );
// 好
$( ".data td.gonzalez" );
因为选择器是从右面开始查找的,所以右面越明确,查找越快
3)避免冗余
// 不好
$( ".data table.attendees td.gonzalez" );
// 好
$( ".data td.gonzalez" );
4)避免通用选择器
通用选择器在任何地方出现都会很慢
$( ".buttons > *" ); // 及其慢的
$( ".buttons" ).children(); // 优化的
$( ".category :radio" ); // 隐式通用选择器,没明确指定*,但实际还是会使用
$( ".category *:radio" ); // 显示通用选择器
$( ".category input:radio" ); // 优化的
(6)修改多个节点的css时,使用样式表
如果你正在使用css()对20个以上节点修改css,使用style标签来代替,会提速将近60%
// 对20个以上的节点进行CSS操作,这样比较慢
$( "a.swedberg" ).css( "color", "#0769ad" );
// 这样会快很多
$( "<style type="text/css">a.swedberg { color: #0769ad }</style>")
.appendTo( "head" );
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法