摘要：
//请把以下用于连接字符串的JavaScript代码修改为更高效的方式varhtmlString=‘’+‘’;for(vari=0;i˂NEWS.length;i++){ htmlString+=‘+NEWS[i].TITLE+‘’;}ht
//请把以下用于连接字符串的JavaScript代码修改为更高效的方式 var htmlString = ‘ < div class=”container” > ’ + ‘ < ul id=”news-list” >’; for (var i = 0; i < NEWS.length; i++) { htmlString += ‘ < li > < a href=”’ +NEWS[i].LINK + ‘” > +NEWS[i].TITLE + ‘ < /a > < /li >’; } htmlString += ‘ < /ul > < /div > ’;
考点有两个：
- JavaScript字符串的连接机制。
- 大规模的循环体是重点优化对象
先看第一点,字符串的连接机制
var str ;
str = 'this is a string';
str = str + ',another string.';
对于这个连接操作JS的处理机制是：
(1)新建一个临时字符串，
(2)将新字符串赋值为 str + ',another string.' ,然后返回这个新字符串
(3)并同时销毁原始字符串
所以字符串的连接效率较低。提高效率的办法是用数组的join函数,使用join代替字符串拼接这个技巧对于IE6、7有显著性能提升，同时对现代浏览器，没有太过明显的性能损耗
第二点,大规模的循环体是主要的优化对象
在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为它需要查询散列键，只要可以，就应该尽量少用。for(;;)和while循环，while循环的效率要优于for(;;)，因为for(;;)结构的问题，需要经常跳转回去。常用的循环优化都会将循环倒过来,最常用的for循环和while循环都是前测试循环，而如do-while这种后测试循环，可以避免最初终止条件的计算，因此运行更快。
var arr = [1, 2, 3, 4, 5, 6, 7]; var sum = 0; for (var i = 0, l = arr.length; i < l; i++) { sum +=arr[i]; } //可以考虑替换为： var arr = [1, 2, 3, 4, 5, 6, 7]; var sum = 0, l =arr.length; do{ sum +=arr[l]; }while(l--)
NEWS.length需要缓存，减少每次循环都去访问一次属性不然每次循环都要重新计算一次length
对NEWS，NEWS[i]使用局部变量是高效的:
var item =NEWS[i]。
NEWS[i].LINK - > item.LINK
NEWS[i].TITLE - > item.TITLE
经过上面两步优化，最终程序为
var htmlString=[];
htmlString.push( "< div > < ul > ");
//此处要保持拼接的次序,所以采用i++而不是len--的书写方式 for(var i=0,len=NEWS.length; i<len;i++){ var item =NEWS[i];
htmlString .push(‘ < li > < a href=”’ +item.link + ‘” > +item.title + ‘ < /a > < /li > ’);
}htmlString.push( ‘ < /ul > < /div > ’);
htmlString=htmlString.join(“”);