2015-03-22 6 views
0

Я хочу добавить список имен файлов для каждого OpenBSD port/package в свою вилку портов-readmes, похожую на то, как это делает ports-readme-dancer.Насколько дорогой элемент HTML UL LI (элемент списка)?

Тем не менее, я заметил, что страницы порта-readme-dancer несколько медленнее прокручиваются в моем Mozilla SeaMonkey. Источник указывает, что каждое имя файла является частью неупорядоченного списка, с list-style: none; и font-family: courier;.

Могу ли я использовать li для каждого имени файла, как указано выше, или собрать все их в одном pre?

Насколько медленно каждый человек li по сравнению с линией текста в пределах pre? Например, www/apache-httpd-openbsd нужно будет перечислить около имена файлов, и кажется замедленным для прокрутки в Mozilla SeaMonkey, причем каждый из них является отдельным li.

+0

Медленно, чтобы прокрутить, вы имеете в виду, после того, как все было загружено? Я не могу себе представить, что использование списка замедляет работу. Может быть, вы должны быть в поиске обработчиков событий onscroll или чего-то еще. –

+0

@MrLister, да, после того, как все загружено. Мое единственное другое предположение - это еще один список, прямо над этим списком, являющийся таблицей на основе столбцов; но список из 500 элементов сам по себе не был разделен на колонки. – cnst

ответ

1

Элемент списка использования списка li.

Вопрос недействительный. li элемент сам по себе не может быть медленным, отсутствует контекст производительности. Таким образом, li так же быстро и медленно, как pre.

Каждый тег является узлом DOM, который требует рендеринга. Выбор узла DOM с помощью селектора CSS очень быстрый для больших узлов узлов DOM. Селектора Javascript получат больший удар в зависимости от количества узлов DOM.

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

+0

Согласен. Сравнение 'li' с' pre' для 500 записей - это, в лучшем случае, микро-оптимизация, которая попадает вам в поисках реального виновника для медленной прокрутки. Попробуйте его с помощью простого HTML-файла (без CSS, без JS), и я уверен, вы не найдете разницы в поведении прокрутки. – Boldewyn

Смежные вопросы