Организуем древовидные комментарии к статьям c помощью JavaScript

[@amorphis]

Посмотрел бы я как ваш способ справился бы хотя бы с такой страничкой habrahabr.ru/company/tm/blog/39689/

[@mightymind]

Сегодня попробую. Там сейчас 2156 комментов, буду тестить… Чуть позже о результатах…

[@mightymind]

Время выполнения (ориентировочно) по браузерам:
Safari 3.1 — 1,5 c
Firefox 3 — 2 c
IE7 — 5 c
Opera 9.63 — непостоянно, от 40 с до 3 минут.

[@alex_blank]

и за такое надо убивать — лень, блин, pagination в комментах сделать было

размер загружаемой браузером страницы не должен превышать определенный предел, иначе банально теряется юзабилити из-за лагов при загрузке

так что при правильном дизайне у яваскрипта на клиенте проблем не будет

[@dfuse]

Нафиг pagination — ненавижу вспоминать, что я прочел на предыдущей странице. Это раз. А два — какой критерий выбора количества комментариев на страницу? По кол-ву первых? Ну так ветки могут быть произвольной длины… Если целиком считать — нагрузка возрастет. Лучше уж просто collapsable сделать и не париться. Только не как в ЖЖ, а изящней :)

[@pieceofsummer]

Страничка эта, помимо всего прочего, является очень ярким примером необъективности системы «плюсов-минусов» :)

[@MpaK999]

рекурсия javascript на клиенте, не думаю, что вам станут много писать комментариев на подобном сайте :)

[@mightymind]

Ну это не совсем рекурсия, для родителя X создается потомок Y, и все. Рекурсия тут в структуре div-ов, но не в скрипте.

[@MpaK999]

э, потом для Y потомок Z и т.д. :) можно конечно и итеративно это делать, но всё же зачем?

[@shai_xylyd]

Наверное, вся рекурсия будет на сервере, а клиенту пойдет список в JS: (элемент, родитель). После того, как каждый элемент будет вставлен в своего родителя получиться валидное дерево.

[@mightymind]

Угу, это самое я и имел в виду… почти…
Только рекурсии в коде нет (функции и процедуры не вызывают сами себя), есть лишь построение дерева на строне клиента с помощью «родовой принадлежности»

[@pieceofsummer]

Да, только зачем рекурсия на сервере?
Для выборки всех комментариев топика она не нужна, у комментария и так должно быть поле, определяющее принадлежность к топику.

[@dfuse]

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

[@MpaK999]

Э, зачем так усложнять? делать всё на сервере, там же можно и кэшировать и т.п.

[@dfuse]

Кеш как раз и будет из себя представлять абсолютно линейную структуру. Ведь разбор то весь у клиента.

[@mayhem]

наверное злобно тормозить будет

[@mightymind]

На Опере страница долго грузится, остальные браузеры почти моментально.

[@shai_xylyd]

*****код:

• куча запросов в базу, когда можно обойтись одним
• большая нагрузка на браузер порядка O(n³)

[@pieceofsummer]

Не очень понятно, откуда взялось O(n³). Если считать, что getElementById() — это O(n), то O(n²) получается. Хотя, конечно, все зависит от конкретной реализации DOM.

Да и запрос в базу тут один. И даже выдачу элементов и формирование джаваскриптов можно за один проход делать.

[@shai_xylyd]

Для вставки одной пары (element, parent) О(n²), и это для каждого комментария, то есть O(n³)

[@shai_xylyd]

для всех пар (каждого комментария)

[@pieceofsummer]

Впрочем, можно и за О(n²) сделать. Например, не делать getElementById для каждого комментария, а просто цикл по верхнему уровню, а getElementById применять только для нахождения parent-а. Правда, тогда нужно иметь уровень вложенности элемента еще (для сортировки), а не только id parent-а.

[@pieceofsummer]

Хотя, какие, к черту, уровни? Вот вам О(n²) даже без всяких динамических джаваскриптов:

function $(id) { return document.getElementById(id); }
      
function $attr(x, y) {
  var attr = (x.attributes) ? x.attributes[y] : null;
  return (attr) ? attr.value : null;
}
      
var comments = $("comments").getElementsByTagName("div");
for (var i = 0; i < comments.length; i++) {
  var x = comments[i];
  if ($attr(x, "class") != "comment") continue;
    
  var parentId = $attr(x, "parentId");
  if (!parentId) continue;
    
  $(parentId).appendChild(x);
}

* This source code was highlighted with Source Code Highlighter.

соответственно, комментарии выдаются блоком вида:

<div name="comments" id="comments">
  <div class="comment" id="comment1">Comment 1</div>
  <div class="comment" id="comment2" parentId="comment1">Comment 2</div>
  <div class="comment" id="comment3" parentId="comment1">Comment 3</div>
  <div class="comment" id="comment4" parentId="comment2">Comment 4</div>
  ...
</div>

* This source code was highlighted with Source Code Highlighter.

[@pieceofsummer]

Да, что-то я забыл, что эта строчка для каждого комментария должна выполняться.

[@Vit228]

Использование для построения дерева только поля parent, в дальнейшем предполагает использование рекурсии и большого кол-ва запросов к БД(а это уже не гут)

Имеет смысл еще почитать как еще можно хранить деревья в реляционной БД
sitepoint.com/article/hierarchical-data-database/

А так же многие современные ORM предоставляют готовые методы для манипулирования деревьями например
propel.phpdb.org/trac/wiki/Users/Documentation/1.3/Tree/NestedSet

Хотя для начинаещего возможно это будет сложновато.

И еще: зачем для дерева использовать ???
Уж лучше дерево сгенерить в виде

• • А потом натравить на него какой нибудь плагин jQuery типа jstree.com/jsTree/examples/
    

[@Vit228]

зачем для дерева использовать DIV ???
Уж лучше дерево сгенерить в виде UL — LI — UL — LI

[@mightymind]

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

[@kabuto]

В случае комментариев, если их все сразу выводить, можно и предложенной структурой обойтись. Все равно для выборки делается один SQL запрос. Только логичнее думаю строить все ветки на сервере а потом уже в готовом виде отдавать браузеру.

[@dfuse]

Точно, лучше через NESTED — одним запросом можно дёрнуть всю структуру, причем даже уровень вложенности считать не надо, просто все, что между lft и rgt и никаких проблем.

Хотя даже для вывода коментариев в классической рекурсивной модели запрос будет тоже один — есть же поле с ID поста, например. Т.о. выгружается вся структура, без разницы кто у кого родитель, потом JS все расставляет по местам.

[@McDEN]

оригинальный подход…

[@maxic]

Вообще имхо «велик».
Считаю что сервер сразу должен отдавать дерево. Сложностей в этом никаких нет.
Даже при 5 тыс. комментах особо сервер не нагрузят. Не забываем иерархические алгоритмы выборки или «умное» кеширование по id-шной выборке.

[@voicer]

Очень, очень "адекватное" использование мощностей браузера и сервера. Каждый делает именно то, для чего и предназначен, ага.