性能比较;突兀的 onclick() 与事件侦听器

Performance comparison; obtrusive onclick() vs event listeners

提问人:numediaweb 提问时间:9/3/2014 最后编辑:A-Sharabianinumediaweb 更新时间:2/9/2018 访问量:823

问:

我已经检查了一些帖子,例如 event-listener-vs-event-handler 和 onclick-vs-event-handler 将两者进行比较。但不是从性能的角度来看。

当然,使用不显眼的 js 是最佳实践,但当涉及到性能时呢?

想象一下,我们有 100 个元素要听;哪一个会执行得更快,使我们的应用程序更轻,并且不消耗大量内存?

<button onclick="myFunction()">Click me</button>

或者像jQuery那样的事件侦听器,例如:

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

更新

让我们想象一下最坏的情况;我们想在具有 256 MB RAM 的廉价手机中运行我们的 Web 应用程序!必须侦听许多事件会占用内存中相当大的空间(我猜!),使浏览器“缓慢”响应。但是使用 onclick 选项并不需要浏览器兑现所有这些事件,而是在需要时触发它们(单击)。 很高兴看到一些测试报告。

性能 事件 内存 unobtrusive-javascript

评论

0赞 Bergi 9/3/2014
jQuery的性能比本机功能差得多。但我并不是说你应该使用内联侦听器。
1赞 Pointy 9/3/2014
...但这并不重要,因为现代浏览器可以非常快速地处理与单个事件相关的处理。在这种情况下,最重要的考虑因素应该是可维护性和清晰度。
7赞 elclanrs 9/3/2014
微优化,没用。我会担心可维护性。
1赞 elclanrs 9/3/2014
如果你有 100 个元素要听,我会考虑事件委托,甚至在考虑内联事件之前。
2赞 kevin628 9/3/2014
这是一个微优化,除非 (1) 您正在执行性能测试,并且 (2) 100 个带有事件的元素是可能的操作方案,并且 (3) 应用程序未通过此性能测试。

答: 暂无答案