飞鱼 ^_^ 浆抱罗斯‘s blog

无数次滴被丫头说“没更新”,最近刚答辩完，整个人像吃了蓝色小药丸一样，不想动不=。=

最近开始狂啃JS，因为上个月去淘宝UED撞墙了，因为那边的“叔叔”们，一直都强调技术，特别是JS @_@ 。然后就被派遣回来了。

飞鱼：如果你跟我有同样遭遇的话，那么，一起学JS吧 嘎嘎···

得···切如正题。
=========== 华丽的分割线 =============

这文章是james.padolsey那看得，觉得挺有启发的，于是就翻译过来给大伙看看。

使用JS输出HTML串最快的方法

作者：James Padolsey
原文地址：猛击此链接(英文强悍的可以参考原文)
当需要将一大堆数组转换成固定格式的html，以下有几种实现方法。
注意：当然你可以直接手动将数组转换成html，如果那样的话，你就很有前途了^_^

方法一，拼接法

这种写法虽说不是最慢的，但是用的人却是最多的。额，貌似我以前都这么用

var arr = ['item 1', 'item 2', 'item 3', ...],
    list = '';

for (var i = 0, l = arr.length; i < l; i++) {
    list += '<li>' + arr[i] + '</li>';
}

list = '<ul>' + list + '</ul>';

就是使用for循环将每个数组使用字符串拼接起来的意思。

以后千万不要用这种啦，又丑又慢=。=

方法二，堆栈法(我起的名，=。=)

var arr = ['item 1', 'item 2', 'item 3', ...],
    list = [];

for (var i = 0, l = arr.length; i < l; i++) {
    list[list.length] = '<li>' + arr[i] + '</li>';
}

list = '<ul>' + list.join('') + '</ul>';

稍微比拼接法快些，但还不够完美。这次的代码使用了.join 方法 比上一种稍微高级了点，但是还是有万恶的for循环

方法三，圣杯(应该是说最佳办法吧)

var arr = ['item 1', 'item 2', 'item 3', ...];

var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

看过后面的测试结果，你就会相信我说的，这是最快的方法。当然你也可以最近去测试一下。
作者很有自信，说这方法是最快速的。因为使用了join方法并且去掉了for循环，代码相当简洁，相比我以前老用的方法一，不禁大叫：oh 屎~~

浏览器测试

有图有真相

原文我就不翻译了，我的个人水平有限，从上图可以看出，大部分浏览器在处理以上代码时，第三种方法相对最快，但是chrome浏览器优点变态，估计是他独有的js 引擎在起作用吧。果然BT。

======补充======

原文下面评论提出了些问题：说如果数组里么有东西的话就只输出UL会有问题，说要使用三元式来解决。

您可能还对这些日志感兴趣

• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单
• 菜鸟级: 标签切换效果 – JQuery实现