JQuery 选择器，部分 DOM 搜索性能答案

【问题标题】：JQuery selector, partial DOM searching for performancesJQuery 选择器，部分 DOM 搜索性能
【发布时间】：2017-04-14 13:39:20
【问题描述】：

我实际上正在使用 Jquery，并且在某些时候我使用 Jquery 选择器来使我的页面正常工作。这里的问题是，我使用的 HTML 可能会变得很长，具体取决于我使用的数据，它看起来像这样。

HTML

<div class="mailing"></div>
    <input type="text" class="mail_subject"/>
    <input type="text" class="mail_body"/> <!-- I can have 1 to n number of these -->

    <!-- Preview tags -->
    <p class='main_subject'></p>
    <p class='main_body'></p>

    <!-- 
        And a few more things we don't use here 
    -->
</div>

<div id="table1">
    <table id="ranking">
        <tbody>
            <!-- Data, can have 0 to ~3500 rows -->
        </tbody>
    </table>
</div>

如您所见，我的页面或多或少分为两部分，<div class="mailing"> 包含一些表单，<div id="table1"> 用于显示大量数据。

在我的邮件 div 中，我有一些输入和一个自动更新的预览，它从输入中获取数据。我在这里拥有的是一种“邮件生成器”，预览为我提供了带有 html 格式的结果。

这里的问题是关于性能的，我的 JQuery 被表格拖慢了，当我输入表单时出现延迟，我不希望它搜索整个文档，因为我已经知道我的数据将在邮件中分区。

JS

$('.mailing').on('change click keyup keydown', function () {
    // Here I append the mail_subject input to the preview
    var text = $(this).val();
    $('.main_subject').text($('.subject_select').val());

    // Here I append each mail_body input to the preview
    $('.bodies_select').each(function () {
        text = $(this).val();
        /*
         * Some computation for the text
         */
        jQuery('<span/>', {text: text}).appendTo('.main_body');
    });
});

我还有一些类似论文的函数和一些计算，但我想我们已经知道我的代码是什么样子了。

我的问题是，有没有办法，当我使用像 $('.main_subject') 或 $('.bodies_select') 这样的 JQuery 选择器来不搜索整个 DOM 文档而只搜索我的 mailing div 时？问题是我可以将我的元素存储在变量中，因为它可以多次更新。

【问题讨论】：

事件太多了！！！为什么需要同时使用 keyup 和 keydown？两者都会触发相同的 dom 搜索。如果您需要实时更新，也应该限制这些，而不仅仅是等待更改发生

标签： javascript jquery html performance

【解决方案1】：

您可以在 jQuery 中使用上下文来提高性能：

$('.bodies_select', '.mailing')

http://api.jquery.com/jquery/#jQuery1

您甚至可以通过一些技术优化选择器：

https://learn.jquery.com/performance/optimize-selectors/

【讨论】：

与缓存集合以避免每次都进行 dom 搜索相比，这是最小的优化
当然需要存储在一个变量中以便重复使用
不是真正的“当然”，但没有说明......而且很多人不认识这个问题

【解决方案2】：

当然，你只需要把父元素放在前面

$('.mailing .main_subject')

您可能应该阅读一些有关选择器的信息 https://api.jquery.com/category/selectors/

【讨论】：