HTML 文字列を構築する最速の方法 (HTML 文字列を組み立てる最速の方法)_JavaScript スキル

HTML 文字列を構築する最速の方法2009 年 5 月 29 日に James が投稿した「コード スニペット、JavaScript」
原文: http://james.padolsey.com/javascript/fastest-way-to-build-an-html - string/

コードをコピー コードは次のとおりです:

var arr = ['アイテム 1 ', 'アイテム 2', 'アイテム 3', ...],
list = '';
for (var i = 0, l = arr.length; i list = '

' arr '

'
}
list = '

';//最も効率的な方法。
var arr = ['item 1', 'item 2', 'item 3', ...], list = [];for (var i = 0, l = arr.length; i
var arr = ['項目 1', '項目 2', '項目 3', ...];var list = '
• ' arr.join('< /li>
• ') '
';//最良の方法。

1000 回実行: "String concat"
(ms)
"Array Push"
(ms)
"Native join()"
(ms) )
Firefox 314714865Opera 917212578IE 7500229779Chrome 2638872Safari 4b14614160Averages20555970
Chrome のみが特別で、最初の方法が最も高速です。

中国語翻訳版
最初のタイプ: 文字列を 1 つずつ追加

コードをコピー コードは次のとおりです。

var arr = ['item 1', 'item 2', 'item 3', ...],
list = '';
for (var i = 0, l = arr.length; i
list = '

' arr[i] ''; = '< ;ul>' list '';


これは最も一般的ですが、最も効率的ではありません。コードのロジックは比較的複雑です。

2 番目のタイプ: 配列に 1 つずつプッシュします

コードをコピー コードは次のとおりです:

var arr = ['item 1', 'item 2', 'item 3', ...],

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

'
}
リスト = '

join('') '

';


前のメソッドよりわずかに高速ですが、まだ十分ではありません...

3 番目のメソッド: direct join()

コードをコピーします コードは次のとおりです:

var arr = ['item 1', 'item 2 ', '項目 3', ..];

var list = '

• 
  
  ネイティブ メソッド (join() など) を使用すると、後で実装する方法に関係なく、通常は他のメソッドよりもはるかに高速で、コードは非常に簡潔になります。

ネイティブ メソッド (
join()

など) を使用すると、後から実装する方法に関係なく、一般に他のメソッドよりもはるかに高速で、コードは非常に簡潔になります。

ブラウザのパフォーマンス

各メソッドは、ブラウザーが特定の長さの文字列に対して特別な最適化を行わないように、長さ 130 の配列を使用してテストされます。各メソッドは 1,000 回テストされました。次の結果です。これら 1000 回の実行に必要な時間を表示します: