大DOM树下降jQuery点击事件 [英] Large DOM Tree Slowing Down jQuery Click Events
问题描述
解决问题
Dhoelzgen和Matthew Blancarte按照接受的答案解决了这个问题（具体到我的配置）。这个问题的主要原因是，当我应该使用jQuery的方法时，我将 委托事件处理，如下所示：
< head>
< script>
$（document）.ready（function（）{
$（'＃inventory_index'）。on（'click'，'.inventory_item'，function（）{
alert（'Click event fired！'）;
}）;
}）;
< / script>
< / head>
使用这种技术我大大地 增加了我的响应能力
继续阅读所有详细信息...
概述 / p>
我正在开发一个运行在单页（例如www.myapp.com/app.php）的库存应用程序，并使用jQuery来执行XHR的加载各种内容进出DIV的。
我使用的是jQuery 1.9.1和jQuery UI 1.8（因为我有遗留的原因）。
问题：慢点击事件
我遇到的问题是点击事件随着DOM树的增长越来越慢，越来越慢。当搜索中返回约1000个项目时，延迟时间约为2秒。
下面是jQuery的示例：
< head>
< script>
$（document）.ready（function（）{
var inventory_item = $（'＃inventory_index.inventory_item'）;
inventory_item.on（'click'，function ）{
alert（'Click event fired！'）;
}）;
}）;
< / script>
< / head>
而HTML：
< div id =inventory_index>
< div class =inventory_item>库存项目0< img src =inventory_item_0.jpg>< / div>
<！ - 999迭代 - >
< div class =inventory_item>库存项目1000< img src =inventory_item_1000.jpg>< / div>
< / div>
起初我认为这是因为每个 .inventory_item ，但是在实现延迟加载后，我发现这个问题与DOM中的元素数量有关，而不是与图像本身有关。
尝试解决方案
如上面的示例代码所示，我已经尝试实现在过去几天我可以找到最好的解决方案。也就是说，将 .inventory_item 的集合包含在一个可以ID的 #inventory_index 元素中，以给jQuery提供一个提示它应该在哪里寻找。
另外，创建一个JavaScript对象来尝试更多的时间从DOM搜索（虽然老实说，不确定是否正确如何工作，或者根本帮助）。
有其他任何人遇到这个问题，并有任何解决方案或建议他们可以分享？
当前最佳想法
截至目前，我想象中可以解决的唯一方法是通过将更少的结果加载到 #inventory_index 中来简单地减少DOM树中的元素数量。这是一个选项，但我真的希望保留将索引中的数百个（如果不是数千个） .inventory_item 加载到索引中的能力。
奖金
奇怪的是，mouseenter和mouseleave事件会立即触发。您可以在此看到类似的问题：
如何使用jQuery的方法附加事件处理程序如下：
$（'＃inventory_index'）。on（'click'，'.inventory_item' 。）
这样，您只需为每个广告资源项添加一个事件处理程序，而不是一个事件处理程序。没有测试它，只是偶然的事实，你添加了很多事件听众。
一些解释：
如果您使用 $（'＃inventory_index .inventory_item'）作为选择器，则最终将单个事件处理程序绑定到每个库存项目是一个问题，特别是如果你有很多。另一方面，上面的 #inventory_index selector只是将一个事件处理程序添加到用作包装器的元素中，该元素负责处理由第二个选择器，这是中方法调用中的第二个参数 .inventory_item 。
Problem Solved!
This problem (specific to my configuration) has been solved by Dhoelzgen and Matthew Blancarte as per the accepted answer. The jist of the problem was that I was binding 'click' events to all the .inventory_item elements when I should have been using jQuery's on method to delegate the event handling, like so:
<head>
<script>
$(document).ready(function(){
$('#inventory_index').on('click', '.inventory_item', function(){
alert('Click event fired!');
});
});
</script>
</head>
Using this technique I've greatly, greatly increased the responsiveness of my app.
Continue reading for all the details ...
Overview
I'm working on an inventory app that runs in a 'single page' (e.g. www.myapp.com/app.php) and uses jQuery to execute XHR's to load the various content in and out of DIV's.
I'm using jQuery 1.9.1 and jQuery UI 1.8 (because I have to for legacy reasons).
The Problem: Slow Click Events
The problem I'm having is that the click events get slower and slower as the DOM tree grows larger. The delay is currently about 2 seconds when ~1000 items are returned from a search.
Here's the example jQuery:
<head>
<script>
$(document).ready(function(){
var inventory_item = $('#inventory_index.inventory_item');
inventory_item.on('click', function(){
alert('Click event fired!');
});
});
</script>
</head>
And the HTML:
<div id="inventory_index">
<div class="inventory_item">Inventory Item 0 <img src="inventory_item_0.jpg"></div>
<!-- 999 Iterations -->
<div class="inventory_item">Inventory Item 1000 <img src="inventory_item_1000.jpg"></div>
</div>
At first I assumed it was because of the images that reside within each of the .inventory_item's, but after implementing lazy-loading I discovered that the issue had more to do with the number of elements in the DOM than it did with the images themselves.
Attempted Solution
As you can see in the example code above, I've already tried to implement the best solutions I could find over the past couple of days. Namely, wrapping the collection of .inventory_item's in an ID-able #inventory_index element to give jQuery a hint as to where it should be looking.
And, additionally, creating a javascript object to try and shave even more time off the DOM search (although, to be honest, I'm not sure exactly how that works, or if it's helping at all).
Has anyone else run into this problem and have any solutions or advice they could share?
Current Best Idea
As of right now, the only way I've imagined this could be solved is to simply reduce the number of elements in the DOM tree by loading less results into the #inventory_index. This is an option, but I'd really like to retain the ability to load up hundreds, if not thousands of .inventory_item's into the index.
BONUS
Oddly enough, the mouseenter and mouseleave events fire instantaneously. You can see a similar problem here:
What about using jQuery's on method to attach an event handler like this:
$('#inventory_index').on('click', '.inventory_item', ...)
This way, you would only add a single event handler, instead of one for each inventory item. Haven't tested it, just stumbled about the fact that you add a lot of event listeners.
Some explanation:
If you use $('#inventory_index .inventory_item') as a selector, you end up binding a single event handler to each inventory item which is a problem especially if you have many of them. On the other hand the #inventory_index selector above just adds a single event handler to the element used as a wrapper, which is responsible for handling all the clicks on the elements filtered by the second selector, which is the second argument .inventory_item in the on method call.
这篇关于大DOM树下降jQuery点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
