バルクJavaScriptをより効率的に置き換える

Question

私のブログにはスマイリーシンボルを対応するイメージに置き換えるJavaScriptがあります。
:)または:(などの記号は、適切な<img>タグに置き換えられます。

現在、約50個のスマイリーシンボルが使用できます。しかし、どのページでも、それらのうちのいくつかだけが明らかに使用されます。 スクリプトには、スマイリーごとにelement.replace(smileyRegex, <imgTags>)の形式の行があります。 問題は、これらの正規表現の一致する行が多数あるため、ページが読み込まれた後にスクリプトが少し遅れることです。

私はこれをより効率的にするために以下の方法を考えています：すべてのスマイリーシンボルを第1引数としてマッチする大きな正規表現と、第2引数として配列から適切なイメージを選ぶ関数を呼び出します。
この使用法は、一致する可能性のある電話と一致しない可能性のある個別のreplaceコールよりも効率的ですか？

Answer 1

1つの正規表現がすべてのスマイリーの出現と一致すると、より効率的になります。これは、スマイリーごとに1回のインターレーションではなく、ソースを通る1回の反復に過ぎないからです。そして、スマイリーとの適切なハッシュテーブル/オブジェクトを持っている - >のimg srcが、効率的な検索のようになります。私はあなたのアイデアを得ると思います

var smileyImg = smileyImgMap[":)"]; 

：

var smileyImgMap = { 
    ":)" : "happysmiley.png", 
    ":(" : "sadsmiley.png" 
}; 

次に、このようにそれを使用しています。

Answer 2

「より効率的な」質問はほとんど「それは依存する」のような答えを得るだろう。あなたが提案していることは確かに有望だと思うが、実際にはいくつかの異なるブラウザでベンチマークを行い、確実にすべきである。

もう1つの解決策は、ページをそのままレンダリングしてから、非同期的に50個のスマイリーを通過させ、一度に1個ずつ正規表現を実行することです。 をもう一度としますが、あなたのユーザーは（ページが既にレンダリングされているので）遅延を認識しません。

Answer 3

私はthis jsperfという2つの概念をテストしました。それは、あなたが探しているソースデータのタイプ、あなたが探しているものが何種類あるのか、そしてどれくらい頻繁にマッチするのかについて、より代表的なデータを入れる必要があるでしょう。 jsperfの基本フレームワークにそれらを埋め込んで、さまざまなブラウザで見ることができます。

コールバックオプション/ wの正規表現は、基本的には、次のようになります。それをスピードアップするため

var replaceLookup = {aa: "--", bb: "++", cc: "**"}; 
var result = sourceStr.replace(/aa|bb|cc/g, function(str, p1, p2, offset, s) 
{ 
    return(replaceLookup[str]); 
}); 

Answer 4

1つの方法は、1つの画像内のすべてのスマイリーを配置し、css spriteとしてそれを使用することです。

.smily1 {background:url('/images/allSmilyImage.png') 0px 0px} 
.smily2 {background:url('/images/allSmilyImage.png') 0px 50px} 
.smily3 {background:url('/images/allSmilyImage.png') 50px 100px} 
... 

@jishi対応するコメント絵文字のCSSスタイルをマッピングするための提案として、ハッシュ・マッピングを使用し、次にCSSファイルでスマイリー画像位置を指定します。

var smileyClassMap = { 
    ":)" : "smily1", 
    ":(" : "smily2", 
    ":P" : "smily3" 
}; 

<span class="smily1" style="display:block" />タグまたは類似