使批量JavaScript取代更有效

我有一些JavaScript代替笑臉符號與我的博客中相應的圖像。
因此，諸如:)或:(之類的符號被替換爲正確的<img>標籤。使批量JavaScript取代更有效

目前有大約50個笑臉符號可以使用。但是在任何頁面中，只有其中幾個將被明顯使用。對於每個笑臉，該腳本具有element.replace(smileyRegex, <imgTags>)形式的行。問題在於，由於這些正則表達式匹配行數很大，腳本在加載頁面後會稍稍延遲。

我在考慮使下面的方法更高效：使用一個匹配所有笑臉符號作爲第一個參數的大型正則表達式，以及一個從數組中選擇適當圖像作爲第二個參數的函數來調用replace。
此用法比單獨調用replace的調用效率更高嗎？

來源

2011-08-17 eternalthinker

寫自己的http://jsperf.com/測試，看看它在幾個流行的瀏覽器。答案要麼很明顯，要麼沒有單一的正確答案。 – jfriend00

有一個正則表達式匹配所有的笑臉會出現更多的效率。這是因爲它只是通過源代碼的一次迭代，而不是每個笑臉的一次迭代。然後有笑臉適當的哈希表/對象 - > IMG SRC將是一個有效的查找：

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

然後使用它是這樣的：

var smileyImg = smileyImgMap[":)"];

我覺得你的想法。

來源

2011-08-17 08:54:02 jishi

你是對的！使用單一的正則表達式有很大的不同。現在笑臉替換髮生在微風中。由於表情中含有單詞和常用字符的表情，單個正則表達式的長度大約爲200.但仍值得努力:) – eternalthinker

幾乎任何「哪個更有效」的問題都會得到一個像「依賴」這樣的答案。你提出的建議肯定聽起來很有希望，但你應該只在幾個不同的瀏覽器上進行基準測試，並確定。

另一種解決方案是按原樣渲染頁面，然後異步遍歷50個笑臉中的每一個，並一次運行一個正則表達式。肯定需要更多時間，但是你的用戶不會感覺到延遲（因爲頁面已經被渲染）。

來源

2011-08-17 08:53:55 Malvolio

我寫了this jsperf來測試這兩個概念。它可能需要更多的代表性數據，用於搜索通過什麼類型的源數據，您需要查找多少不同的內容，以及您可能多長時間才能找到一個匹配項。你可以將這些填入jsperf的基本框架中，然後在不同的瀏覽器中查看它。

正則表達式W /回調選項基本上是這樣的：

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

來源

2011-08-17 09:22:28 jfriend00

作爲對此的一個說明，您將運行的替換次數越多，差異越大。 – jishi

當您在大量文本上進行大量替換時，存在明顯的延遲，並且有時甚至導致瀏覽器凍結。但單一的正則表達式方法幾乎可以延遲零。 – eternalthinker

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

指定的CSS文件中的表情符號圖像的位置，然後使用該散列映射，@jishi建議用於映射的CSS樣式對應的興高采烈。

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

與<span class="smily1" style="display:block" />標籤替換文本表情符號或類似

來源

2011-08-17 09:23:59 Ragnar

它從來沒有關於加載圖像，笑臉圖像太小，並不是所有的都是必需的（甚至比大多數情況下allSmilyImage！）！ – eternalthinker

使批量JavaScript取代更有效

回答

相關問題