使用"JQuery.on()"是否有任何可能的危险?大量地 [英] Is there any possible danger of using "JQuery.on()" profusely

问题描述

我正在为一个大型项目编写Javascript控制器，我发现自己经常使用"JQuery .on()"函数来处理所有单击事件，因为大部分内容都是动态下载的.

I'm writing Javascript controller for a large project, I found my self using "JQuery .on()" function a lot to handle all click events, that because most of the content is being downloaded dynamically.

考虑到我在再次绑定它们之前使用"JQuery .off()"来取消单击事件的绑定，所以使用它有任何可能的危险.

Taking into account that I use "JQuery .off()" to unbind click events before binding them again, is there any possible danger of using it a lot.

$('#container').off('click', '[data-link=some-link-id').on('click', '[data-link=some-link-id]', function () {
     // handle event here...
});

推荐答案

以我的经验，它实际上取决于应用程序.我发现，广泛使用jQuery会导致浏览器占用大量内存.通过使用堆跟踪进行调试(在Google chrome中)，我发现这是因为jQuery在内存中保留了很多对象.我发现的主要问题是，当您使用jQuery创建DOM节点或应用非标准javascript遍历或函数时，jQuery必须跟踪这些特定节点.

In my exerience it really depends on the application. I've found that using jQuery extensively has lead to a high memory overhead for the browser. From using the heap trace to debug (in google chrome), I've found that this is because jQuery keeps a LOT of objects in memory. The main issue I've found with this is when you use jQuery to create DOM nodes or apply non-standard javascript traversal or functions, jQuery has to keep track of these specific nodes.

特别是对于处理程序，除了普通的javascript外，不应有太多的内存开销.我发现，在进行优化时，每个实例都是特定于代码和必须对其进行操作的环境的.如果您需要代码在移动设备上运行，则由于这些环境的内存限制，您需要使堆尽可能低.

When it comes to handlers specifically, there shouldn't be too much memory overhead in addition to normal javascript. I've found that when it comes to optimizing, each instance has been specific to the code and the envrionments that it has to operate on. If you need your code to operate on mobile devices, then you need to keep your heap as low as possible because of the memory limitations for these envrionments.

我发现，如果您遇到怀疑与javascript有关的性能问题，则检查堆快照是调试的唯一有效方法.我通常会按照以下步骤减少内存占用:

I've found that if you're experiencing performance issues that you suspect are related to javascript, inspecting the heap snapshots is the only effective way to debug. I typically reduce memory footprint using these steps:

1. 使用本地javascript代替$('<div>')
创建任何对象
2. 尝试并删除每个循环
3. 使用ID将所有DOM查询更改为本地javascript
4. 将所有事件处理程序(onclick等)移动到本机javascript或将其放置在相关DOM节点的相关属性中

1. Create any objects using native javascript in place of $('<div>')
2. Try and remove any each loops
3. Change any DOM queries to native javascript using IDs
4. Move any event handlers (onclick etc.) to native javascript or place them in the relevant attrbutes for the relevant DOM nodes

在提供的示例中，我会稍微关注数据处理程序，因为根据我的经验，这将需要jQuery跟踪内存中的许多对象.如果要优化此代码，我会将其中的尽可能多的代码移至本机JS.

From the example provided I'd be a little concerned with the data handlers, because in my experience this would require jQuery to keep track of a lot of objects in memory. If I was to optimize this code, I would be moving as many of these to native JS as possible.

这篇关于使用"JQuery.on()"是否有任何可能的危险?大量地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！