我正在为一个大型项目编写Javascript控制器,我发现自己经常使用"JQuery.on()"函数来处理所有点击事件,因为大部分内容都是动态下载的。
考虑到我在再次绑定点击事件之前使用"JQuery.of()"来解除它们的绑定,大量使用它是否有任何可能的危险。
$('#container').off('click', '[data-link=some-link-id').on('click', '[data-link=some-link-id]', function () {
// handle event here...
});
在我的实践中,这实际上取决于应用程序。我发现大量使用jQuery会导致浏览器的内存开销很高。通过使用堆跟踪进行调试(在googlechrome中),我发现这是因为jQuery在内存中保留了很多对象。我发现的主要问题是,当您使用jQuery创建DOM节点或应用非标准的javascript遍历或函数时,jQuery必须跟踪这些特定的节点。
当涉及到处理程序时,除了普通的javascript之外,不应该有太多的内存开销。我发现,在优化方面,每个实例都是特定于代码和它必须操作的环境的。如果你需要代码在移动设备上操作,那么你需要保持尽可能低的堆,因为这些环境的内存限制。
我发现,如果您遇到的性能问题怀疑与javascript有关,那么检查堆快照是唯一有效的调试方法。我通常使用以下步骤来减少内存占用:
- 使用本机javascript代替
$('<div>')
创建任何对象 - 尝试删除所有每个循环
- 使用ID将任何DOM查询更改为本机javascript
- 将任何事件处理程序(onclick等)移动到本地javascript,或将它们放置在相关DOM节点的相关属性中
从提供的例子来看,我会对数据处理程序有点担心,因为根据我的经验,这需要jQuery跟踪内存中的许多对象。如果我要优化这段代码,我会尽可能多地将其中的代码迁移到原生JS中。