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 相关文章推荐
js简易namespace管理器 实例代码
Jun 21 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
谈一谈收音机的高放电路
2021/03/02 无线电
php引用返回与取消引用的详解
2013/06/08 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
python str与repr的区别
2013/03/23 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
家长通知书家长评语
2014/04/17 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
给客户的感谢信
2015/01/21 职场文书
横店影视城导游词
2015/02/06 职场文书
国富论读书笔记
2015/06/26 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server