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

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

WBOY

リリース： 2016-05-16 18:03:16

オリジナル

1043 人が閲覧しました

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 回の実行に必要な時間を表示します: