`
androider
  • 浏览: 748283 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Fastest way to build an HTML string

阅读更多
You have a massive array of items that needs to be transformed into an HTML list without causing the user any grief. There are a couple common ways of doing this:
Note: I’m not even going to bother covering direct DOM manipulation for every list item because that’d be plain stupid!
#1 - Step-by-step string concat
Not the slowest method that exists but probably the most common:

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>';


Don’t use this. It’s inefficient, slow and ugly!
#2 - Step-by-step array pushing
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>';


Slightly faster than string concatenation but still not perfect…
#3 - The holy grail!
var arr = ['item 1', 'item 2', 'item 3', ...];
 
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

I won’t bore you with benchmarks; you’ll just have to believe me (or test for yourself) - this is by far the fastest method!
Using native methods (like join()), regardless of what’s going on behind the abstraction layer, is usually much faster than any non-native alternative.
Browser benchmarks
Due to a request and my own curiousity I’ve conducted a quick benchmarking test. Each method was tested with a 130-item array, the length of each item varied so any optimizations on the browser’s part would not be effective. Each method was tested 1000 times; the results below show how long each browser took to complete each method 1000 times:
“String concat” (ms) “Array pushing” (ms) “Native join()” (ms)

Firefox 3	147	148	65
Opera 9	172	125	78
IE 7	500	2297	79
Chrome 2	63	88	72
Safari 4b	146	141	60
Averages	205	559	70

Surprisingly, string concatenation came out much faster than “array pushing” on average. It seems IE7 optimizes for lengthy string operations but doesn’t care much for arrays. Also, Google Chrome performed oddly; the “string concatenation” method was quicker than the “native join()”… I’m not too sure what’s going on there! Anyway, the results were mostly predictable, and, of course, “native join()” came out on top!
分享到:
评论

相关推荐

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

    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...

    Exploring Swift Playgrounds

    Exploring Swift Playgrounds: The Fastest and Most Effective Way to Learn to Code and to Teach Others to Use Your Code by Jesse Feiler English | 26 May 2017 | ISBN: 1484226461 | 192 Pages | PDF | 7.27 ...

    C.Programming.The.Ultimate.Way.to.Learn.C.1500481114

    This book is the fastest way to get comfortable with C, one incredibly clear and easy step at a time. You’ll learn all the basics: how to organize programs, store and display data, work with ...

    Fast Open - Fastest way to open file-开源

    《Fast Open:加速你的文件打开体验——开源的力量》 在当今的数字时代,我们的工作和生活中充斥着大量的文件,高效地管理和访问这些文件显得尤为重要。Fast Open,正如其名,是一款旨在快速打开文件的系统工具,它...

    C.Programming.Step.By.Step.Beginners.To.Experts.Edition.B011EXMV7Q

    This book is the fastest way to get comfortable with C, one incredibly clear and easy step at a time. You’ll learn all the basics: how to organize programs, store and display data, work with ...

    Learning Pentaho CTools(PACKT,2016)

    Using Pentaho allows you to build a complete analytics solution, and CTools brings an advanced flexibility to customizing them in a remarkable way. The book starts with the basics of the framework ...

    CATIA PORTABLE SCRIPT CENTER VERSION 1.5

    My intention was to create a collection... Also, if you would like to share some other codes with us, you can contact me to add them in this help file (reusing code is the fastest way to solve problems).

    fastest_emd.rar_EFOBI_EMD matlab_emd algorithm_fastest emd

    fastest algorithm to find EMD.

    Android.Programming.The.Easy.Way

    The Fastest and Easiest Way for Beginners to Develop Android Apps What’s Stopping You From Making Your Own Android Apps? The mobile phone app market is worth more than $25 billion and is expected ...

    Oracle Application Express: Build Powerful Data-Centric Web Apps with APEX

    APEX is an entirely Web-based framework that comes built into every edition of Oracle Database—its backbone is Oracle’s powerful PL/SQL language, alongside the most advanced Web development ...

    wp-fastest-cache-premium-v1.5.7_cache_

    《WordPress的WP Fastest Cache Premium v1.5.7缓存优化详解》 在网站性能优化领域,缓存技术扮演着至关重要的角色。对于WordPress用户来说,WP Fastest Cache Premium是一款备受推崇的缓存插件,它能显著提高网站...

    wp fastest cache Premium高级版

    Wp Fastest Cache就是这样一个工具,它能够生成静态HTML文件并存储在服务器上,以便后续访问时直接加载,无需每次请求都重新生成页面内容。 2. **图片压缩功能**:除了基础的页面缓存,Wp Fastest Cache Premium高级...

    wp-fastest-cache-premium-1.5.8_WordPress_

    《WordPress优化神器:WP Fastest Cache Premium 1.5.8深度解析》 在WordPress的世界里,网站性能的优化是每个站点管理员关注的重点。而WP Fastest Cache Premium 1.5.8,作为一款强大的缓存插件,以其高效、易用的...

    YOLO-Fastest嵌入式部署开发环境配置流程1

    - 参照[NCNN官方wiki](https://github.com/Tencent/ncnn/wiki/how-to-build#build-for-windows-x64-using-visual-studio-community-2017)进行安装。 - 将protobuf添加到环境变量Path中。 - 注意不要写错cmake指令:...

    NoSQL For Dummies(Wiley,2015)

    Featuring specific evaluation criteria for NoSQL databases, along with a look into the pros and cons of the most popular options, NoSQL For Dummies provides the fastest and easiest way to dive into ...

    yolo-fastest-xl.cfg

    yolo-fastest-xl.cfg

Global site tag (gtag.js) - Google Analytics