JavaScript局部变量性能优化指南

局部变量与全局变量的访问效率差异

在JavaScript中，标识符所在的作用域层级越深，其读写操作的耗时通常越长。因此，在函数内部访问局部变量的速度最快，而访问全局变量则相对最慢。一个实用的优化原则是：如果一个跨越作用域的值在函数中被引用超过一次，应将其存储到局部变量中以便快速访问。

具体示例如下：

 
<!-- 优化前 -->
<script type="text/javascript">
function initUI () {
var bd = document.body,
links = document.getElementByTagName("a"),
i=0,
len=links.length;
while(i < len){
update(links[i++]);
} 
document.getElementById("go-btn").onclick = function(){
start();
} 
bd.className = "active";
} 
</script>

通过缓存全局对象提升性能

上述函数中多次引用了document对象，而document属于全局对象。每次访问该变量时，引擎必须遍历整个作用域链，直到在全局变量对象中才能找到它。为了降低这种性能损耗，可以先将全局对象的引用保存到一个局部变量中，随后在函数内部使用该局部变量替代直接访问全局变量。

优化后的示例如下：

 
<!-- 优化后 -->
<script type="text/javascript">
function initUI () {
var doc=document,
bd = doc.body,
links = doc.getElementByTagName("a"),
i=0,
len=links.length;
while(i < len){
update(links[i++]);
} 
doc.getElementById("go-btn").onclick = function(){
start();
} 
bd.className = "active";
} 
</script>