JS 性能：条件内的事件处理程序与事件处理程序内的条件

Question

我对 JS 比较陌生，但我很清楚性能是 Web 开发中一个非常重要的问题，因此这个问题：

我搜索并找到了一些相关主题（例如：Javascript pattern: Conditional event handler），但我发现这很混乱，因为我的场景要简单得多，并且不涉及任何高级概念，例如 classes.

例如上下文，假设我的网站包含由不同的 body class="type" 标签定义的各种 'types' 页面。为了清楚起见，我们可以有 body class="member-details"、body class="club-details" 和 body class ="random-page-type"。想象一下有很多，比如 20 种可能的 body class 类型。

考虑这样一种情况，如果 body 是某些特定类型，如果是其他类型，我可能希望将特定的点击事件处理程序绑定到元素。

问题是：

performance-wise 将处理程序置于条件中还是将条件置于处理程序中更好？为清楚起见，伪代码：

1) 事件处理程序中的条件

ON DOCUMENT READY {
    if page type is 'club-details' || page type is 'x' || page type is 'y' {
        bind function1 ();
    }
}

2) 条件内的事件处理程序

if page type is 'club-details' || page type is 'x' || page type is 'y' {
    ON DOCUMENT READY {
        bind fuction1();
    }
}

这是一个非常简化的示例，但我想我是在询问有关始终绑定事件的性能的信息，如示例 1 或决定是否通过迭代条件进行绑定，如示例 2？

Answer 1

由于Javascript事件是异步执行的，你的例子不是性能而是内存。第二个示例将比第一个示例占用更少的内存，因为绑定的事件更少。与服务器端性能相比，客户端性能并不那么重要。话虽如此，您应该考虑编写漂亮且可读的代码而不是微不足道的性能优势。 Javascript现在真快。

JS 性能：条件内的事件处理程序与事件处理程序内的条件

JS Performance: Event Handler inside Condition vs Condition inside Event Hander

javascript

performance

conditional-statements

dom-events