Javascript 优化dom排序

因此，我构建了一个类似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，因此使用类似的表排序脚本在这一点上不是一个选项

---

如何优化此排序？

您可以使用.detach从DOM中删除元素，对其排序，然后显示它。这可能会加快脚本的速度。

您可以使用.detach从DOM中删除元素，对其排序，然后显示它。这可能会加快您的脚本速度。

您可以通过CSS为元素提供绝对位置，只需更改它们的位置，而不是操纵DOM。

您可以通过CSS为元素提供绝对位置，只需更改它们的位置，而不是操纵DOM。

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

您可以使用Javascript模板引擎来完成我的贡献，但是现在有很多可用的引擎

如果模板引擎对您来说是一种过度使用，您可以：

将上面的HTML字符串化 对于数据中的每条记录，构建一行填充一些占位符 将行串联成字符串 最后使用innerHTML注入字符串 对数据进行排序并重新启动

---

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

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

您可以使用Javascript模板引擎来完成我的贡献，但是现在有很多可用的引擎

如果模板引擎对您来说是一种过度使用，您可以：

将上面的HTML字符串化 对于数据中的每条记录，构建一行填充一些占位符 将行串联成字符串 最后使用innerHTML注入字符串 对数据进行排序并重新启动

---

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

只需向JSON数据集中添加一个字段，如：相关的DomeElement位置或DomeElement引用

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

---

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

在JSON数据集中再添加一个字段，如：相关的DomeElement位置或DomeElement引用

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

---

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

如果不知道性能瓶颈在哪里，就无法确定。这2秒或3秒的时间主要用于从服务器恢复数据、处理数据和呈现HTML吗？您是否尝试过在Firebug/Chrome/Safari中使用探查器？如果不知道性能瓶颈在哪里，就很难说了。这2秒或3秒的时间主要用于从服务器恢复数据、处理数据和呈现HTML吗？您是否尝试过在Firebug/Chrome/Safari中使用探查器？但这完全破坏了选择，并且必然会中断，例如当窗口大小改变时，在这种情况下，您需要更多的代码来处理此类情况，从而导致更多的手动回流。尽管如此，这完全破坏了选择，当窗口大小改变时，你需要更多的代码来处理这种情况，导致更多的手动回流。我也这么想。不过，我不认为这是唯一需要做的事情；我认为浏览器在尽可能少的回流时会变得更好。好吧，我没有使用jquery。detach看起来很不错，但是有prototypejs等价物吗？我在@koko找到了这个页面，有Element.remove。这可能会删除事件处理程序，尽管我不确定。此外，您还可以尝试隐藏父元素，例如display:none；在编辑DOM元素时防止回流。我也这么想。不过，我不认为这是唯一需要做的事情；我认为浏览器在尽可能少的回流时会变得更好。好吧，我没有使用jquery。detach看起来很不错，但是有prototypejs等价物吗？我在@koko找到了这个页面，有Element.remove。这可能会删除事件处理程序，尽管我不确定。此外，您还可以尝试隐藏父元素，例如display:none；为了防止在编辑DOM元素时出现回流，我认为对JSON进行排序并构建HTML模板，而不是像我现在这样排序，不会有太大的区别。但是，把它字符串化是一个有趣的想法

---

e HTML并按这种方式进行排序。听起来确实很奇怪，但可能更快。@koko：不要从HTML开始。从数据开始，然后生成足够的HTML单元格来保存数据。然后对单元格进行排序和填充。@koko，下面是我的模板引擎的一个示例，但是您应该以同样的速度对数据进行排序并使用字符串：在这种情况下，您将丢失所有事件侦听器和对已排序的单元格的引用elements@chapluck,您可以将事件委托给列表的父级。我认为，对JSON进行排序并构建HTML模板，而不是像我现在这样进行排序，不会有太大的区别。但是将HTML字符串化并按这种方式排序是一个有趣的想法。听起来确实很奇怪，但可能更快。@koko：不要从HTML开始。从数据开始，然后生成足够的HTML单元格来保存数据。然后对单元格进行排序和填充。@koko，下面是我的模板引擎的一个示例，但是您应该以同样的速度对数据进行排序并使用字符串：在这种情况下，您将丢失所有事件侦听器和对已排序的单元格的引用elements@chapluck，您可以将事件委派给列表的父级