循环语句是日常开发使用频率很高的语句之一。只要有动态展示列表的地方就会存在循环。在循环体中的JavaScript代码会被执行多次。因此优化循环对于提高整个页面的性能是可观的，如果在循环中的语句性能略低，那么当循环次数很大的时候，则会加倍放大这个略低的性能。如：在一个循环1万次的循环中，其中循环中的语句每次执行略慢0.001秒，则总体将会慢0.001*10000秒。因此优化循环是势在必行。
1、减少length属性的使用
我们经常在遍历一个数组的时候会写下如下JS代码：
var names = ["zhangsan", "lisi", "wangwu"];
for (var i = 0; i < = names.length; i ++ ) {
... 其他操作 ...
}上面的语句是完全可以运行的。但是在进行循环边界比较的时候，每次都需要获取names的长度，你不觉这样很浪费吗？于是将上面的代码改变如下：
var names = ["zhangsan", "lisi", "wangwu"];
for (var i = 0, len = names.length; i < = len; i ++ ) {
... 其他操作 ...
}此时names.length就只被执行了一次。如果你的循环次数是n，那么就为你节约了n-1此的names.length的执行。
结论：如果要在循环语句中遍历数组（其他列表），推荐将length保存在一个变量中，不用每次边界比较都去获取length的值。
2、不要在循环内部执行innerHTML
在业务中经常需要动态的创建DOM，常见的方式是采用字符串拼接的方式。代码如下：
var persons = [{id : "1", name : "zhangsan"}, ....];
var perList = document.getElementById("perList");
for (var i = 0, len = persons.length; i < len; i ++ ) {
var str = "<option value='" + persons[i].id + "'>" + persons[i].name + "</option>";
perList.innerHTML = perList.innerHTML + str;
}上面的代码是可以运行的，不会抛出什么错误。但是进行频繁的innerHTML操作对性能照成了影响。使用innerHTML添加DOM时，会触发浏览器DOM解析器对添加的新DOM元素进行解析，如果循环有n次，那么DOM解析器就要进行n次解析，岂不低效。修改代码如下：
var persons = [{id : "1", name : "zhangsan"}, ....];
var perList = document.getElementById("perList");
var strHtml = "";
for (var i = 0, len = persons.length; i < len; i ++ ) {
strHtml += "<option value='" + persons[i].id + "'>" + persons[i].name + "</option>";
}
perList.innerHTML = strHtml;修改后的代码将innerHTML从循环中移了出来，这样DOM解析器就只执行1次，减少了n-1次。
结论：尽量不要将innerHTML操作放置到循环语句中执行。
3、不要在循环中使用getElementById和getElementsByName
如果在循环中使用getElementById和getElementsByName会造成多次遍历DOM树，则将非常耗时。常见做法如下：
var obj = document.getElementById("id");
for (var i = 0; i < len; i ++ ) {
... 对obj元素进行操作 ...
}结论：尽量不要在循环语句中操作DOM树
