个人中心
gpt4 book ai didi

jquery - 大型 DOM 树减慢 jQuery 点击事件

转载 作者：行者123 更新时间：2023-12-03 22:57:07 26 4
gpt4 key购买 nike

问题解决了!

这个问题(特定于我的配置)已由 Dhoelzgen 和 Matthew Blancarte 按照已接受的答案解决。问题的关键是，当我应该使用 jQuery 的 on 方法来委托(delegate)事件处理时，我将“click”事件绑定(bind)到所有 .inventory_item 元素，例如所以:

<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 中或从 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_item 的集合包装在可识别 ID 的 #inventory_index 元素中，以向 jQuery 提示它应该在哪里查找。

此外，创建一个 javascript 对象来尝试节省更多 DOM 搜索时间(尽管说实话，我不确定它是如何工作的，或者是否有帮助)根本)。

还有其他人遇到过这个问题并有任何解决方案或建议可以分享吗？

当前最佳创意

到目前为止，我认为解决这个问题的唯一方法就是通过将更少的结果加​​载到#inventory_index中来简单地减少 DOM 树中的元素数量。这是一个选项，但我真的很想保留将数百个(如果不是数千个).inventory_item 加载到索引中的能力。

奖金

奇怪的是，mouseenter 和 mouseleave 事件会立即触发。您可以在这里看到类似的问题:

jQuery delegate performance on the click event on large lists - slows down if you dynamically add more elements?

最佳答案

使用 jQuery 的 on method 怎么样？附加一个事件处理程序，如下所示:

$('#inventory_index').on('click', '.inventory_item', ...)

这样，您只需添加一个事件处理程序，而不是为每个库存项目添加一个事件处理程序。还没有测试过，只是偶然发现您添加了很多事件监听器。

一些解释:

如果您使用 $('#inventory_index .inventory_item') 作为选择器，您最终会将单个事件处理程序绑定(bind)到每个库存项目，这是一个问题，尤其是在您有很多库存项目的情况下。另一方面，上面的#inventory_index选择器只是向用作包装器的元素添加了一个事件处理程序，它负责处理由第二个选择器过滤的元素上的所有点击，即on 方法调用中的第二个参数 .inventory_item。

关于jquery - 大型 DOM 树减慢 jQuery 点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16244322/

26 4 0
文章推荐： jquery - MVC 4 - 如何使用 JavaScript 加载 View
文章推荐： jquery - 未捕获的类型错误 : Cannot read property 'clientWidth' of null
文章推荐： jquery - 数据表中渲染的性能问题
文章推荐： jquery - Datepicker:添加 dateFormat 会出错
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com