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>

所有这些消息的顶部都有一个按字母顺序或按日期排序的栏。（使用prototypejs）

$$('.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
对数据进行排序并重新启动

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

Answer 2

您可以使用.detach()从DOM中删除元素，对其进行排序然后再显示。也许这会加速你的脚本。

Answer 3

你可以通过CSS给出元素绝对位置，只需改变它们的位置，而不是操纵DOM。

Answer 4

向您的JSON数据集添加另外一个字段，例如：相关的DOMElement位置或DOMElement引用。

mail_msg["dom_el_ref"] = createRelatedDomEL(mail_msg);

使用JSON数据集进行所有排序和比较。然后在DOM列表中按顺序进行。

优化dom-heavy JS排序

4 个答案: