AJB*_*AJB 5 optimization performance jquery events
问题解决了!
Dhoelzgen和Matthew Blancarte根据公认的答案解决了这个问题(特定于我的配置).问题的JIST是,我是结合"click"事件到所有的.inventory_item元素时,我应该使用jQuery的方法对委托事件处理,像这样一直:
<head>
<script>
$(document).ready(function(){
$('#inventory_index').on('click', '.inventory_item', function(){
alert('Click event fired!');
});
});
</script>
</head>
使用这种技术,我大大提高了我的应用程序的响应能力.
继续阅读所有细节......
概观
我正在开发一个在"单页"(例如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">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>
起初我认为是因为图像存在于每个内部.inventory_item,但是在实现延迟加载后,我发现问题与DOM中的元素数量有关,而不是与图像本身有关.
试图解决方案
正如您在上面的示例代码中所看到的,我已经尝试实现过去几天我能找到的最佳解决方案.也就是说,将.inventory_items 的集合包装在一个ID-able #inventory_index元素中,以便为jQuery提供一个关于它应该在哪里查看的提示.
而且,另外,创建一个javascript对象来尝试从DOM搜索中获得更多时间(尽管,老实说,我不确定它是如何工作的,或者它是否有帮助).
有没有其他人遇到这个问题,并有任何他们可以分享的解决方案或建议？
当前最好的想法
到目前为止,我想象的唯一可以解决的方法是通过将更少的结果加载到DOM树中来简单地减少DOM树中的元素数量#inventory_index.这是一个选项,但我真的希望保留将数百个(如果不是数千个)加载.inventory_item到索引中的能力.
奖金
奇怪的是,mouseenter和mouseleave事件瞬间爆发.你可以在这里看到类似的问题:
dho*_*gen 13
如何使用jQuery的方法来附加这样的事件处理程序:
$('#inventory_index').on('click', '.inventory_item', ...)
这样,您只需添加一个事件处理程序,而不是每个库存项目添加一个事件处理程序.没有测试过,只是偶然发现你添加了很多事件监听器这一事实.
一些解释:
如果您$('#inventory_index .inventory_item')用作选择器,则最终将单个事件处理程序绑定到每个库存项目,这是一个问题,尤其是如果您有许多库存项目.在另一方面的#inventory_index上述刚选择将单个事件处理程序以用作一个包装,它负责处理由所述第二选择器,这是第二个参数过滤元件的所有点击的元件.inventory_item在on方法调用.