Index of / Дерево 2

То, что видите слева - это пример скрипта, который я описывал на сайте dHTML.ru в статьях Делаем дерево из таблицы (части 1 и 2). Который, в свою очередь, является эстественным продолжением первого дерева, опубликованное давным-давно, прямо на этом-же сайте (Index of /).

Не берусь утверждать, что скрипт на этой странице совпадает на все 100%, но на 95% - точно.

На самом деле, основная цель того, что вы сейчас видите на этой странице, было создания скрипта, который бы генерил эту самую таблицу на лету. С помощью функций из DOM level 1.

Почему? Ответ очень прост. Четвертый Netscape все еще не забыть (по-крайней мере мною ;-) и в случае, если бы мне удалось "сгенерить" таблицу, которая динамически раскрывалась бы в MSIE5+ и NN6+/Mozilla, то в случае с четвертыми браузерами вполне реально также "сгенерить" необходимое количество слоев, чтобы сделать меню работающим еще и в NN4. А в принципе, если использовать некоторые специальные функции MS (как insertRow), то и в MSIE4.

Что из этого получилось (експерименты)

После того, как я наконец-то добился нормальной работы скрипта строющего таблицу (в Маковском MSIE5 есть какие-то глюки с размерами ячеек таблицы, которые так и не смог побороть) внезапно возник вопрос о его скорости. Т.е. имеет ли смысл так извращаться или лучше воспользоваться штатными таблицами HTML-я.

Для проверки сделал дерево страниц пяти основных разделов Microsoft dHTML Reference - около 1000 строк. "Оформление" тоже "стырил" оттуда (новый MSDN мне как-то по душе ;-).

Рендериться вся эта таблица - чуть меньше безконечности. Но это меня не разволновало так сильно, как факт, что показ около 500 строк сразу на достаточно хорошей машине отнимает около 10 секунд, а их прятание - два-три раза дольше.

Этот вариант дерева можно посмотреть здесь:
full.html (около 177Кб, в новом окне)

Скрипт можно ускорить значительно, если "разрезать" большие ветки дерева на куски. Но при этом чуть-чуть замедляется рендеринг.

Разрезанный вариант - здесь:
split.html (около 184Кб, в новом окне)

И наконец, чтобы сделать полный "анализ" работы не только скрипта, ответственный за дерево, но и того, который строит саму таблицу я сделал и вариант, в котором все идет plain-HTML (ну, не все, а только таблица, конечно ;-).

Разрезанный вариант дерева в HTML-e, ручная работа 21-го века:
html.html (около 336Кб, в новом окне)

Итоги

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

Насчет скорости - MSIE5+ быстрее обрабатывает HTML-ный вариант. Насколько заметил Мозилле в общем счете пофигу. Скорость браузеров сравнивать не буду, тем более, у меня нет по близости PC на которой установлена свежая Мозилла.

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

Мнения? Пишите по адресу leechy@design.ru

Leechy