本文深入解析提升JSLite与JavaScript代码性能的16个关键技巧。内容涵盖变量缓存、作用域管理、事件绑定优化、链式调用规范、短路求值及DOM分离策略。通过对比低效与高效代码示例，帮助开发者减少DOM遍历开销，提升渲染速度，构建更流畅的用户体验。
引言与核心原则
探讨jQuery与JavaScript性能的文章屡见不鲜。本文将基于对jQuery速度技巧的总结与建议，指导你如何优化JSLite及JavaScript代码。编写高质量的代码能够显著提升执行速度，而快速的渲染与响应则是提升用户体验的关键。
首要原则是牢记JSLite本质上是JavaScript。因此，我们应当遵循相同的编码规范、风格指南以及最佳实践标准。
如果你是JavaScript新手且未接触过jQuery，建议先阅读官方文档中的语法介绍部分。这是一份高质量的JavaScript教程，旨在帮助你建立基础，表明你已经具备使用jQuery一段时间的经验。
在准备使用JSLite时，强烈建议你遵循以下指南：
变量缓存与命名规范
缓存变量
DOM遍历是一项昂贵的操作，因此应尽可能缓存那些会被重复使用的元素。
代码如下：
// 低效写法
h = $('#element').height();
$('#element').css('height',h-20);
// 推荐写法
$element = $('#element');
h = $element.height();
$element.css('height',h-20);避免全局变量
JSLite与JavaScript一致，通常建议确保变量定义在函数作用域内。
代码如下：
// 低效写法
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// 推荐写法
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);使用匈牙利命名法
在变量名前添加$前缀，有助于快速识别出JSLite对象。
代码如下：
// 低效写法
var first = $('#first');
var second = $('#second');
var value = $first.val();
// 推荐 - 在JSLite对象前加$前缀
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();使用 var 链（单 var 模式）
建议将多条var语句合并为一条语句，并将未赋值的变量置于末尾。
代码如下：
var $first = $('#first'),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};事件绑定与函数合并
请使用 on
在新版JSLite中，更简洁的on("click")取代了类似click()这样的函数。在早期版本中，on()等同于bind()。on()是附加事件处理程序的首选方法。为保持一致性，你可以统一使用on()方法。
代码如下：
// 低效写法
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
$first.hover(function(){
$first.css('border','1px solid red');
})
// 推荐写法
$first.on('click',function(){
$first.css('border','1px solid red');
$first.css('color','blue');
})
$first.on('hover',function(){
$first.css('border','1px solid red');
})精简javascript
一般而言，尽可能合并函数调用是更好的做法。
代码如下：
// 低效写法
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
// 推荐写法
$first.on('click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
});链式操作
链式调用与代码可读性
JSLite实现方法的链式操作非常便捷，我们可以充分利用这一特性。
代码如下：
// 低效写法
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
// 推荐写法
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);保持代码可读性
在精简代码和使用链式调用的同时，可能会导致代码难以阅读。适当添加缩进和换行能显著改善可读性。
代码如下：
// 低效写法
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
// 推荐写法
$second.html(value);
$second
.on('click',function(){ alert('hello everybody');})
.fadeIn('slow')
.animate({height:'120px'},500);选择短路求值
短路求值与编码捷径
短路求值是一种从左到右求值的表达式，使用&&（逻辑与）或||（逻辑或）操作符。
代码如下：
// 低效写法
function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}
// 推荐写法
function initVar($myVar) {
$myVar = $myVar || $('#selector');
}选择捷径
精简代码的一种方式是利用编码捷径。
代码如下：
// 低效写法
if(collection.length > 0){..}
// 推荐写法
if(collection.length){..}繁重的操作中分离元素
DOM操作优化与选择器技巧
如果你打算对DOM元素执行大量操作（如连续设置多个属性或CSS样式），建议先将元素从文档中分离，操作完成后再重新添加。
代码如下：
// 低效写法
var
$container = $("#container"),
$containerLi = $("#container li"),
$element = null;
$element = $containerLi.first();
//... 许多复杂的操作
// better
var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;
$element = $containerLi.first().detach();
//... 许多复杂的操作
$container.append($element);熟记技巧
如果你在使用JSLite方法时感到缺乏经验，务必查阅文档，可能会发现更好或更快的使用方法。
代码如下：
// 低效写法
$('#id').data(key,value);
// 推荐 (高效)
$.data('#id',key,value);使用子查询缓存的父元素
正如前文所述，DOM遍历是一项昂贵的操作。典型做法是缓存父元素，并在选择子元素时复用这些缓存元素。
代码如下：
// 低效写法
var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');
// 推荐 (高效)
var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');避免通用选择符
将通用选择符放入后代选择符中，性能表现非常糟糕。
代码如下：
// 低效写法
$('.container > *');
// 推荐写法
$('.container').children();避免隐式通用选择符
通用选择符有时是隐式的，不易被察觉。
代码如下：
// 低效写法
$('.someclass :radio');
// 推荐写法
$('.someclass input:radio');优化选择符
例如，ID选择符应当是唯一的，因此无需添加额外的选择符。
代码如下：
// 低效写法
$('div#myid');
$('div#footer a.myLink');
// 推荐写法
$('#myid');
$('#footer .myLink');避免多个ID选择符
在此强调，ID选择符应该是唯一的，不需要添加额外的选择符，更不需要多个后代ID选择符。
代码如下：
// 低效写法
$('#outer #inner');
// 推荐写法
$('#inner');坚持最新版本
版本选择与原生代码结合
新版本通常更优：更轻量、更高效、方法更多、对jQuery方法的覆盖更全面。当然，你需要考虑目标代码的兼容性。例如，项目是否运行在良好支持HTML5/CSS3的环境中。
必要时组合JSLite和JavaScript原生代码
如上所述，JSLite就是JavaScript，这意味着用JSLite能做的事情，同样可以用原生代码来实现。原生代码的可读性和可维护性可能不如JSLite，且代码更长。但这通常意味着更高的效率（一般而言，越接近底层代码可读性越差，性能越高，例如汇编语言，但这需要更强的技术能力）。请牢记，没有任何框架能比原生代码更小、更轻、更高效（注：原文测试链接已失效，建议自行搜索相关测试代码验证）。
最后忠告
最后，记录本文的目的是提高JSLite的性能并提供其他良好建议。如果你想深入研究这个话题，会发现许多乐趣。请记住，JSLite并非不可或缺，它只是一种选择。请思考使用它的理由：是为了DOM操作？Ajax？模板？CSS动画？还是选择器？或者是作为jQuery重度开发者的替代方案？