Fastest way to build an HTML string(拼装html字符串的最快方法)


Posted in Javascript onAugust 20, 2011

Fastest way to build an HTML stringPosted in 'Code Snippets, JavaScript' by James on May 29th, 2009
原文:http://james.padolsey.com/javascript/fastest-way-to-build-an-html-string/

var arr = ['item 1', 'item 2', 'item 3', ...], 
list = ''; 
for (var i = 0, l = arr.length; i < l; i++) { 
list += '<li>' + arr + '</li>'; 
} 
list = '<ul>' + list + '</ul>';//最低效的方式。 
var arr = ['item 1', 'item 2', 'item 3', ...], list = [];for (var i = 0, l = arr.length; i < l; i++) { list[list.length] = '<li>' + arr + '</li>';}list = '<ul>' + list.join('') + '</ul>';;//比上一种的方式快。 var arr = ['item 1', 'item 2', 'item 3', ...];var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';//最优的方式。

执行1000 次:"String concat"
(ms)
"Array pushing"
(ms)
"Native join()"
(ms)
Firefox 314714865Opera 917212578IE 7500229779Chrome 2638872Safari 4b14614160Averages20555970
只有chrome比较特别,第一种方法反而是最快的。

中文翻译版本
第一种:逐个字符串相加

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

这种最常见的,但是效率最低!代码逻辑相对来说复杂。
第二种:逐个 push 进数组
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] + ''; 
} 
list = '<ul>' + list.join('') + '</ul>';

比上一种方法稍微快一些,但还是不够好…
第三种:直接join()
var arr = ['item 1', 'item 2', 'item 3', ...]; 
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

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

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

浏览器性能

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

Fastest way to build an HTML string(拼装html字符串的最快方法)

Javascript 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
jQuery最佳实践完整篇
Aug 20 #Javascript
jQuery的deferred对象使用详解
Aug 20 #Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 #Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 #Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 #Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 #Javascript
理清apply(),call()的区别和关系
Aug 14 #Javascript
You might like
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
PHP操作文件方法问答
2007/03/16 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python pandas模块基础学习详解
2019/07/03 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
六道php面试题附答案
2014/06/05 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书