拼装html字符串的最快方法

原文地址:Fastest way to build an HTML string

第一种:逐个字符串相加

[code=”javascript”]

var arr = [‘item 1’, ‘item 2’, ‘item 3’, …],
list = ”;

for (var i = 0, l = arr.length; i < l; i++) { list += '

  • ‘ + arr[i] + ”;
    }

    list = ‘

      ‘ + list + ‘

    ‘;

    [/code]

    这种最常见的,但是效率最低!代码逻辑相对来说复杂。

    第二种:逐个 push 进数组

    [code=”javascript”]

    var arr = [‘item 1’, ‘item 2’, ‘item 3’, …],
    list = [];

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

  • ‘ + arr[i] + ”;
    }

    list = ‘

      ‘ + list.join(”) + ‘

    ‘;

    [/code]

    比上一种方法稍微快一些,但还是不够好…

    第三种:直接join()

    [code=”javascript”]

    var arr = [‘item 1’, ‘item 2’, ‘item 3’, …];

    var list = ‘

    • ‘ + arr.join(‘
    • ‘) + ‘

    ‘;

    [/code]

    使用原生的方法(比如 join()),不管它后面是怎么实现的,一般都比其他方法快很多,而且代码非常简洁。

    浏览器性能

    每种方法是使用一个长度为 130 的数组来测试,其中每个元素的长度是多种多样的,防止浏览器对一定长度的字符串做特殊的优化;每种方法测试了 1000 次;下面的结果显示,执行完这 1000 次需要的时间:

    2009-09-08_124126

  • 赞(0) 打赏
    未经允许不得转载:WEB前端开发 » 拼装html字符串的最快方法

    评论 3

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    1. #-49

      chrome2 果然很奇特啊。。。

      cocoa9年前 (2009-09-26)回复
    2. #-48

      我都是需要先写好array再拼装的,象文章里面这样已经有了array,再拿出来处理,再进新的数组,再join的貌似我不会这么干。。。

      Sinina9年前 (2009-09-28)回复
    3. #-47

      关于效率,我去年也整理过一篇文章,含有DEMO,http://jslover.com/?p=131
      个人觉得,正常业务中,拼接效率无关紧要,效率的瓶颈都是在DOM

      JsLover7年前 (2011-10-15)回复

    前端开发相关广告投放 更专业 更精准

    联系我们

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏