Оптимизация таблиц HTML?

У меня довольно большая таблица HTML (2000+ строк), и я замечаю, что зависания, которые я использую, кажутся действительно невосприимчивыми (требуется около 1 секунды для запуска).Оптимизация таблиц HTML?

#songs tbody tr:hover td { color: #1abc9c; }

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

Есть ли способ оптимизировать HTML (таблицы) и какие вещи я должен искать?

EDIT

я решил попробовать его в других браузерах и Firefox, кажется, не имеют каких-либо проблем на всех, и ни один не делает IE10. Так что это проблема, которую я только имею в Chrome.

<tr data-playlist="/edm" data-filename="Chuckie - Together (Original Mix).mp3" class="song match"> 
    <td>Together (Original Mix)</td> 
    <td>Chuckie</td> 
</tr>

Также обратите внимание, что речь идет не о загрузке страницы, она загружается в течение секунды. Проблема заключается в CSS .song:hover в Chrome.

EDIT 2: Тестирование производительности с помощью инструментов разработчика Chrome

Так я решил заглянуть в Инструменты разработчика для отладки этой проблемы. На вкладке Профили не получить меня гораздо дальше, но когда я попробовал Timeline события я узнал, что происходит следующее, когда я наведите курсор мыши на строку:

enter image description here

источник

2014-02-03 Cas Cornelissen

Возможно, посмотрите на это -> http://stackoverflow.com/a/8648980/1609496 –

Простите меня, если мне что-то не хватает, но с этим количеством строк вы не должны их разбивать на страницы или это не вариант ? – patricksweeney

Спасибо за подсказку, я посмотрю. Любая идея, почему это только в Chrome? –

Sooooo, я пробовал использовать различные вкладки в инструментах разработчика Chrome и запускал аудит (если можно так выразиться). Он заявил, что 98% от foundation.min.css не были использованы, поэтому я избавился от включения в мой <head>.

И это сделало это! Поскольку я вообще ничего не использовал из Foundation, я просто удалил его, и CSS hovers теперь мгновенно, как и должно быть.

источник

2014-02-03 18:05:48

Интересно. Чтобы выяснить, что происходит, вы можете добавить include снова.При наведении указателя на строку таблицы инструменты разработчика покажут, какие стили применяются к таблице. Это должно дать вам представление о том, какой из стилей может потребовать такой производительности. Я думаю, что ребята Chrome будут заинтересованы в таком отчете об ошибке. –

Я обязательно рассмотрю это позже сегодня! Спасибо за советы о том, как найти эту проблему. –

Вы можете посмотреть на the JavaScript performance tools built into Chrome.

1-й тайм-аут немного длинный, особенно для Chrome. Я предполагаю, что происходит что-то еще, чего вы не ожидаете. Таблица с 2000+ строк не должна быть проблемой как таковой, если только каждая ячейка не содержит половину мегабайта HTML :-)

Таким образом, чтобы оптимизировать таблицу, вы можете назначить каждому столбцу таблицы фиксированную ширину. Вы можете сделать это с помощью CSS, указав каждому th/td в таблице класс с фиксированной шириной. См. Этот вопрос: Set the table column width constant regardless of the amount of text in its cells?

Это поможет браузеру оптимизировать рендеринг. Но я сомневаюсь, что это поможет в вашем случае (фиксированные ширины столбцов обычно помогают только при рендеринге начальной страницы).

источник

2014-02-03 16:54:43

Я уже используя фиксированный метод (и 'table-layout: fixed'). И моя таблица содержит только два столбца с одной строкой текста (без каких-либо элементов), так что это тоже исключено ... Я рассмотрю инструменты производительности! –

Я немного поработал в инструментах разработчика и отредактировал свой оригинальный ответ. Любые другие идеи? –

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

Этот вопрос был очень интригующим для меня из-за проблем CSS и JS «накладных расходов» (поэтому я спросил о каких-либо прикрепленных CSS или JS).

На странице THIS автор выполнил сравнение времени загрузки для divs vs tables и не нашел существенной разницы. Итак, как насчет CSS и JS накладных расходов?

Итак, из-за моего невроза я собрал таблицу из 2000 строк и загрузил ее на свой сайт. Ничего необычного, пустой стол. Затем стиль был добавлен, чтобы изменить цвет фона на третий TD:

table { 
    width: 500px; 
    margin: 10px auto; 
    border-collapse: collapse; 
} 
table td { 
    width: 30%; 
    height: 20px; 
    border: 1px solid black; 
    border-collapse: collapse; 
} 
table td:last-child { 
    background-color: red; 
}

Затем с помощью F12 инструментов в режиме IE9, следующие данные были предоставлены:

HTTP request: 73.16ms 
Style calculation 12.35ms 
Style paint 0.5ms

Тогда последний стиль CSS был удален и следующий JS был добавлен в конце с включением JQuery, JQuery UI, и таблицы стилей JQuery CSS в голове - действовать «как» предварительного CSS:

$('table tr td:last-child').mouseover(function(){ 
    $(this).css('background-color', 'red'); 
    }); 
$('table tr td:last-child').mouseout(function(){ 
    $(this).css('background-color', 'transparent'); 
    });

, и были получены следующие данные:

HTTP request: 252.25ms 
Mouseover: 0.54ms 
Layout: 18.7ms 
Paint: 1.01ms 
Mouseout: .38ms 
Style: 0.066ms

Так что никаких реальных сюрпризов - HTTP-запрос больше, чем тройной, из-за загрузки jQuery.

Общее время, чтобы «нарисовать» td с CSS 12.85ms, с jQuery 20.7ms.

Но не огромная разница.

Я узнал на этом сайте, что по возможности делаю все в CSS. Я предполагаю, что в основном для браузера. Но, по крайней мере, есть некоторые объективные доказательства преимуществ времени (опять же, не удивительно).

Большой вопрос, Cas!

источник

2014-02-03 21:33:51 TimSPQR

Удивительные тесты! Конечно, я уже делал зависания в CSS, и проблема была тем не менее «foundation.min.css», но интересные результаты. –

Оптимизация таблиц HTML?

ответ

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