оптимизировать тяжелую сортировку 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>

Поверх всех этих сообщений есть панель для сортировки по алфавиту или по дате. (используя 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

Каждый раз, когда пользователь сортирует, вы сортируете набор данных.Затем вы каждый раз визуализируете их как HTML, используя innerHTML.

Для этого вы можете использовать шаблонизатор Javascript (я помогаю PURE , но сегодня доступно множество механизмов)

Если механизм шаблонов является для вас излишним, вы можете:

• привести в соответствие ваш HTML выше
• для каждой записи в ваших данных, построить строку, заполняющую некоторые заполнители
• объединяет строки в строку
• и, наконец, вводит строку, используя innerHTML
• , сортирует ваши данные и перезапускает

Хотя это кажется тяжелее, этобудет быстрее, чем все манипуляции с DOM.

Answer 2

Вы можете использовать .detach() для удаления элементов из DOM, сортировки и отображения.Может быть, это ускорит ваш сценарий.

Answer 3

Добавьте в свой набор данных JSON еще одно поле, например: связанную позицию DOMElement или ссылку на DOMElement.

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

Выполните все сортировки и сравнения с набором данных JSON.И после этого сделать заказ в DOM-списке.

Answer 4

Вы можете присвоить элементам абсолютные позиции с помощью CSS и просто изменить их позиции вместо манипулирования DOM.