Фильтруем с помощью jQuery большое количество данных

[Voenniy]

«Демо» подвесило мой firefox — так и должно быть?

[homm]

Ах, вот оно что :)
Небыстро фильтруем с помощью jQuery большое количество данных.
Я уж думал, что-то интересное.

[deerua]

там сам ДОМ долго думает, он рядом

[deerua]

homm, ты вот такой трольгений,
мне просто интересно, как ты быстро это реализуешь, :)
Спасибо!

[homm]

Ну, давай попробуем.
Тормозит обработчик $.get('habrabookmarks.htm'); Общее время выполнение на моей системе в моем браузере (Опера 10.53) — 6530мс.

Обработчик можно разделить на 3 части:
1) то, что до $(«DL A»).each(); — 33мс
2) то, что внутри $(«DL A»).each(); — 2070мс
3) одна строчка после — 4426мс.

Первую часть даже не стоит пытаться оптимизировать, время пренебрежительно мало, начнем сразу со второй.

Строчка curTDA.html(nl2br(curTDA.html())); выполняется 450мс. Как ни странно главный тормоз — функция nl2br, а не работа с домом. Вынесение создания регулярного выражения за пределы функции ускоряет всю строку до 190мс.

Остальной код в этой части усиленно что-то аппендит в curTDA. Помня о тормознутости метода append, заменяем его на быстрый html(). Благо, что все содержимое этого метода формируется тут же: pastie.org/966270

Теперь вторая часть выполняется за 330 мс, дальше семечки.

Следующая строчка выполняется 4426мс:

$("#tagz").append(getUniqueValues(aT).sort().join('<span>, </span>'));

Я уже говорил, что append — медленная функция? Заменяем:

$("#tagz").html($("#tagz").html() + getUniqueValues(aT).sort().join('<span>, </span>'));

Получаем 260мс. Почти в 20 раз. Но это не все, getUniqueValues(aT) — не нужен. Мы можем с самого начала хранить только уникальные значения тегов в хеш-объекте. Если это реализовать, получится 75 мс на последнюю часть.

Итого — 33 + 330 + 75 = 438мс. Это более чем в 10 раз быстрее первоначального результата. Полный код здесь: pastie.org/966296 Уж извини, в таком же неопрятном состоянии, как был до меня.

Вот так бы я это реализовал, deerua, вот так.

[pepelsbey]

Мужик!

[rnbparty]

не ну да, конечно, homm я за тебя, но эксперимент не чистый. сколько времени ты потратил на разработку кода? между камментами 6 часов.
каких то 6 часов и поиск по закладкам не 6 секунд, а 0.6. по-моему результат результатов :))

[homm]

Потратил минут 15, не больше. Больше ушло на комментарий.

[xiaose]

Мало того, что хорошо ответил так и не поленился же написать столько… молодец! Реально молодец.

[deerua]

о, спасибо!
а.) файл habrabookmarks.htm около мегабайта, у большинства именно из-за этого проблемы, проверил на медленных интернетах. Хотя фокс не падал, просто долго думал
б.) curTDA.html(nl2br(curTDA.html())); — отключена в демо изначально (закомментирована)
в. ) знал что html быстрее, но не думал что на столько :)

зы: ещё раз спасибо, внедрю сразу эти правки ;)
удачи!

[homm]

файл habrabookmarks.htm около мегабайта

На самом деле 270кб. G-zip, все дела.

nl2br отключена в демо изначально

Когда я первый раз смотрел вроде, была включена. А вот когда писал комментарий, отключена.

[deerua]

да, упустил гзип
«оптимизация» была произведена почти сразу, после запуска статьи

[deerua]

Демо на ~1000 записей.
Тестировал на ФФ 3.6.4 и Хромыга 5.ъ
Всё довольно быстро было

[Voenniy]

Странно, у меня довольно быстрый комп — однако firefox реально подвисал на несколько минут.

[deerua]

Максимум 3 секунды, комп простой, не сказал бы что быстрый.
в ИЕ даже тестировать не хочу, остального нет.

[Voenniy]

Странно. У меня подвисает довольно сильно, после чего выводится окошко с предложением остановить сценарий. FF 3.6.3
А вот в хроме — действительно быстро.

[Denai]

странно, но всё стработало за секунду… наврено время в моём ff ускорилось в момент нажатия на ссылку..(

[WaveCut]

Вее почти моментом отрабатывает в ласт опере.

[vslobodyan]

«делают фичу» -> «копируют фичу»?

[deerua]

Было бы супер, но избранное у некоторых очень толстое и делать что-то подобное ресурсоёмкое, я думаю это не о хабре.
Может что-то подобное но не совсем в такой реализации.

[Thomas]

Делал как-то что-то подобное для отображения моей коллекции музыки. Хочу сказать что задачу надо было решать не только при помощи jQuery а еще позвать на помощь XSLT. Браузеры умеют обрабатывать XSLT к тому же там возможно сделать и группировку и сортировку.

[demogorgorn]

где можно взять граббер ибо ссылки ни из этого поста, ни из поста автора не работают?

[deerua]

всё вроде ок
code.google.com/p/habrabookmarks/
join

[highw]

Повесил мне ФФ, спасибо

Крутой скрипт, ага…

[deerua]

Писал его дома на доходяге ноутбуке, ни разу не повис.
Проблемы, как вариант, в засраности фокса :) Или он просто старый, переходите на 3.6

[highw]

Конечно засранный, 3.6.3, ставил неделю назад…

[TheShock]

а файрбаг есть? включен?

[Panya]

Ты бы еще пару томиков «Война и мир» загрузил и распарсил по буквам и словам с аппендом сгенеренных ссылок. Фильтруем, ну-ну.

[deerua]

Я загрузил все свои закладки, это была моя цель :)

[Panya]

Причем тут сколько у тебя закладок? Разве не очевидно, что такие операции (генерация ссылок для фильтрации контента) лучше производить на сервере? Если посмотреть на результаты профайлинга твоего скрипта, то сразу видно, что львиную долю времени занимает именно генерация ссылок и их вставка в документ. Зачем вообще это делать на клиенте? Я имею ввиду не саму фильтрацию а именно загрузку и парсинг html с целью разбить его на заведомо известные куски для их вставки?

[Dr_Sta]

Версия для GoogleChrome планируется?

[Lord_Daedra]

даю идею: сделать базу CouchDB и туда записывать данные, взаимодействие с ней через JSON, то есть довольно легко можно переделать эти скрипты, jQuery посылает запрос и получает нужные данные… ну и, думаю, производительность вполне заметно возрастёт за счёт этого :-)

самые догадливые сделают из этого стартап — сервис, где будет возможность простой регистрации и граббинг закладок хабра, типа если меньше 1000 записей в избранном, то сервис бесплатный, если меньше 10 000 записей то 100 рублей/месяц и так далее… (цифры с потолка)…

куча всяких полезных и бесполезных идей)) кто бы только всё это реализовал))