Question

我有一些JavaScript用我博客中相应的图像替换笑脸符号因此，:)或:(等符号会被正确的<img>标记取代。

目前大约有50个可以使用的笑脸符号。但在任何页面中，只有少数显然会被使用。该脚本为每个笑脸都有element.replace(smileyRegex, <imgTags>)形式的行。问题是，由于这些正则表达式匹配行数量很大，脚本会在加载页面后稍微延迟。

我正在考虑以下方法来提高效率：使用一个匹配所有笑脸符号作为第一个参数的大正则表达式调用replace，并选择一个从数组中选择正确图像作为第二个参数的函数论点。
此用法是否会比可能匹配或不匹配的多个单独replace次呼叫更有效？

Answer 1

有一个正则表达式匹配所有出现的表情符号会更有效率。那是因为它只是通过源的一次迭代，而不是每个笑脸的一次交互。然后有一个适当的哈希表/对象与笑脸 - ＆gt; img src将是一个有效的查找：

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

然后像这样使用它：

var smileyImg = smileyImgMap[":)"];

我想你明白了。

Answer 2

我写了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]);
});

Answer 3

几乎所有“哪个更有效”的问题都会得到像“它取决于”这样的答案。你提出的建议肯定听起来很有希望，但你真的应该只是在几个不同的浏览器上进行基准测试并确定。

另一种解决方案是按原样呈现页面，然后异步地遍历50个表情符号中的每一个并一次运行一个正则表达式。它肯定需要更多时间，但您的用户不会感知到延迟（因为页面已经呈现）。

Answer 4

加快速度的一种方法是将所有表情符号放在一张图片中，并将其用作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建议用于映射相应smily的css样式。

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

用<span class="smily1" style="display:block" />标签或类似的

替换文字表情符号

使批量JavaScript替换更有效

4 个答案: