Fastest way to build an HTML string
2009-06-12 11:51
274 查看
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比较特别,第一种方法反而是最快的。
原文: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比较特别,第一种方法反而是最快的。
相关文章推荐
- Fastest way to build an HTML string(拼装html字符串的最快方法)
- What is the fastest, case insensitive, way to see if a string contains another string in C#?
- Simple way to expose a .NET WinForm control as an ActiveX control in any HTML page
- The Easy Way to Extract Useful Text from Arbitrary HTML 从HTML文件中抽取正文的简单方案
- How to make text of an html checkbox clickable (like ASP.NET control)
- No way to generate HTML markup with data-link and helper functions in JsViews like in JsRender
- Essential LightWave v9: The Fastest and Easiest Way to Master LightWave 3D
- how to know wether an element is exist in a html page.
- Has anybody found a way to load HTTPS pages with an invalid server certificate using UIWebView?
- this application has requested the runtime to terminate it in an unusual way
- ie 浏览器 You're trying to decode an invalid JSON String的问题
- This application has requested the Runtime to terminate it in an unusual way
- more safe way to assign a property value of an object to a variable
- How to Build Android Applications Based on FFmpeg by An Example
- This application has requested the Runtime to terminate it in an unusual way
- NAMESPACE_ERR: An attempt is made to create or change an object in a way which is incorrect with regard to namespaces.
- ToDoList-An effective and flexible way to keep on top of your tasks(ToDoList-管理任务的有效工具)
- Build (web): Object reference not set to an instance of an object
- HTML JSOgN to string