Question

我一直在网上学习Javascript，并且最近开始在网站上使用它。尽管如此，我仍然对可能最有效/最有效的方法感到困惑。考虑到这一点的几个问题......

如果一个网页在不同的部分中有多个点击事件，每个部分都做不同的事情，那么body标签中的一个事件监听器 - 具有多个if / else语句 - 将是处理所有事件的最有效方式。这是对的吗？

在这种情况下，搜索方法是否是处理if / else语句的好方法？例如：

if (event.target.className.search("js-tab") !== -1) {
// do something
} else if (event.target.className.search("js-dropdown") !== -1) {
// do something else
}

ID性能仅适用于实际查找元素，对吧？ event.target.className.search和event.target.id.search之间不会有区别吗？（假设没有疯狂的类名来搜索该元素）。我目前正在为具有相同功能的部分使用className（例如，在同一页面上有多个选项卡式部分）。我想我可以很容易地使用or运算符，如果它有所不同，就像这样：
```
if ((event.target.id.search("js-tab-one") !== -1) || (event.target.id.search("js-tab-two") !== -1))
```
当有多个元素可能导致点击事件（例如，锚点链接中的图标）时，添加额外的if / else语句会产生多大的性能影响（即检查标签类型，如果它不是标签，则向上移动）？我最近重构了我的css，以便我的图标设置为宽度：100％和高度：100％（确保点击总是每次都在同一个元素上发生），但我想知道有多少性能提升（如果有的话）所有）我真的这样做了吗？

Answer 1

你所提出的很多东西虽然是主观的，但却适合试图发生的环境。所以可能有一个原因，为什么下面可能不好（正如另一位评论者所说，不要过早优化）。但是有些编程技术可以说是你所做的，即模块化。有一些性能方面的考虑，但它们主要围绕编写好的代码：

1）它真的取决于你的处理程序，如果你打算删除和添加DOM元素，这可能会更好，因为你看文档而不是绑定每个元素的新点击处理程序。但这可能很糟糕，因为它不是模块化的，如果你有太多的东西。但如果它只是看着这个州，那么这并不是真正好的表现......

2）我不会说搜索对if else有什么影响，但是考虑到你稍后描述的这种特殊情况的优化，我不会这样做。每次你通过每个if-else时你最终会进行另一次搜索，如果你有很多if-elses，那么从长远来看它可以加起来。

3）不应该有区别，但为什么要在id字符串中搜索？除非你的id字符串是一些邪恶的长篇部分的一部分，比如音乐-js-tab-one-musical-tab，我不打算建议用它作为这样的id，你应该把它分开，你不应该＆＃39 ; t绑这样的功能，使用类而不是类=＆＃39;音乐＆＃39; ID =＆＃39; JS-标签酮＆＃39;因为id应该描述页面上的单个对象。

4）每次你添加一个if-else，无论它有多小，都是另一个计算机周期和更多的内存。它可以加起来，只需按标签和类附加你的点击处理程序，让浏览器决定优化它。

Answer 2

如果网页在不同的部分中有多个点击事件，则每个部分都有做一些不同的事情，身体标签中的一个事件监听器 - 用多个if / else语句 - 将是最有效的方法处理它们。这是对的吗？

没有。它对于处理动态添加的元素上的事件很有用，但对于常规事件则没有那么多。

处理正文中的所有事件意味着您将处理所有事件。发生的每次点击都会通过您的代码查看它是否来自您感兴趣的其中一个元素。

搜索方法是否是处理if / else语句的好方法情况？

没有。 search方法使用正则表达式而不是字符串，因此将解析字符串以创建RegExp对象。然后使用正则表达式进行搜索，该表达式比正常的字符串搜索慢，并且可以产生意外的结果。

要在另一个字符串中查找字符串，您应该使用indexOf方法。但是，您应该知道它将在字符串中的任何位置查找匹配项，而不是匹配整个类名。例如，当元素具有类"all-head"时，它会找到"small-header"。

ID性能仅适用于实际查找元素，对吗？

是

如果有多个元素可能会发生点击事件在（例如，锚链接内的图标），多少性能命中是添加额外的if / else语句（即检查标签类型，如果它不是标签，请向上移动）？

这意味着每个点击事件都必须经过额外的if语句。

如果您将事件绑定到元素，您知道该事件发生在该元素内部，并且您不必知道哪个元素确实捕获了它。

香草Javascript＆amp; Dom Performance

2 个答案: