javascript - 优化 dom-heavy JS 排序

Question

所以我构建了这个类似邮件程序的 HTML 查看器(没有真正的电子邮件，只是用户之间的一些消息)。它基本上就像 Windows 资源管理器一样，在顶部有标签，文件可以按日期或字母顺序排序。每条消息如下所示:

<div class="mail_msg" d_id="363">
    <div class="done"><img src="../"></div>
    <div class="absender">demo</div>
    <div class="subject">subject</div>
    <div class="name">name</div>
    <div class="date">16.09.2010</div>
</div>

在所有这些消息的顶部，有一个栏可以按字母顺序或日期对它们进行排序。 (使用原型(prototype)js)

$$('.absender_label','.subject_label', '.bname_label').each(function(el){
    el.observe('click', function(){

        /* ... */

        var tar = el.className.split('_')[0];
        var els = $('widget_mail_'+target).select('.mail_msg'),
            sortedEls = els.sort(function(x, y) {
                var a = x.down('.'+tar).innerHTML.toLowerCase(),
                    b = y.down('.'+tar).innerHTML.toLowerCase();

                return a < b ? -1 : a > b ? 1 : 0;
            });

        $('widget_mail_'+target).select('.mail_msg').invoke('remove');
        sortedEls.each(function(x){
            if(dir=='bottom') {
                $('widget_mail_'+target).insert({bottom:x});
            } else if(dir=='top') {
                $('widget_mail_'+target).down('.mail_msg_label').insert({after:x});
            }
        });
    });
});

我知道正在进行太多的 DOM 操作。我选择所有相关的 div，对它们进行排序，丢弃所有旧的未排序的消息并将排序的消息插入顶部或底部(第一次从 A-Z 单击，第二次从 Z-A 单击)。

它仍然可以处理数百条消息，但需要 2 或 3 秒。我以 JSON 格式接收消息并从中解析 HTML，因此使用像 this 这样的表排序脚本在这一点上不是一个选项。

如何优化这种排序？

Answer 1

每次用户排序时，您都会对数据集进行排序。
然后每次使用 innerHTML 将它们呈现为 HTML。

您可以使用 Javascript 模板引擎来做到这一点(我为 PURE 做出了贡献，但现在有很多可用的引擎)

如果模板引擎对你来说太过分了，你可以:

• 将上面的 HTML 字符串化
• 对于数据中的每条记录，建立一条线来填充一些占位符
• 连接字符串中的行
• 最后使用 innerHTML 注入(inject)字符串
• 整理您的数据并重新启动

虽然看起来比较重，但这比所有的 DOM 操作都快。