CSS Grid Layout — различия между версиями

Материал из YourcmcWiki
Перейти к: навигация, поиск
м
м
Строка 6: Строка 6:
  
 
Ну… почти без — в обычных таблицах подсветить строку при наведении чистым CSS можно, а тут нельзя — нужно JS юзать
 
Ну… почти без — в обычных таблицах подсветить строку при наведении чистым CSS можно, а тут нельзя — нужно JS юзать
 +
 +
UPD: А вот хрен вам. Тормозит она - примерно в 2 раза медленнее, чем таблицы. Основная проблема в том, что grid layout - это рендер всех ячеек в одном родителе. Если таблица большая - ну, например, 60 колонок и 20 строк - это уже 1200 ячеек, и в такой конфигурации даже просто добавление ОДНОЙ строки занимает ~200мс (рендер). Если пытаться добавить 100 таких строк - рендер занимает примерно 850 мс. Справедливости ради надо отметить, что 100 строк по 60 колонок - это 600 элементов, что уже многовато, и даже с обычной таблицей это тоже тормозит, хоть и работает быстрее, чем grid layout (400 мс). Но тем не менее - если в строке 60 ячеек, то 20 строк - это примерно viewport. Если любая модификация занимает 200мс - на этом даже виртуальную прокрутку не очень-то сделаешь...

Версия 17:57, 13 февраля 2019

О ДАААААААААААААААААА

https://jsfiddle.net/vitalif/jkr120ab/8/

Наконец-то фиксированная строка и колонка без костылей!!!

Ну… почти без — в обычных таблицах подсветить строку при наведении чистым CSS можно, а тут нельзя — нужно JS юзать

UPD: А вот хрен вам. Тормозит она - примерно в 2 раза медленнее, чем таблицы. Основная проблема в том, что grid layout - это рендер всех ячеек в одном родителе. Если таблица большая - ну, например, 60 колонок и 20 строк - это уже 1200 ячеек, и в такой конфигурации даже просто добавление ОДНОЙ строки занимает ~200мс (рендер). Если пытаться добавить 100 таких строк - рендер занимает примерно 850 мс. Справедливости ради надо отметить, что 100 строк по 60 колонок - это 600 элементов, что уже многовато, и даже с обычной таблицей это тоже тормозит, хоть и работает быстрее, чем grid layout (400 мс). Но тем не менее - если в строке 60 ячеек, то 20 строк - это примерно viewport. Если любая модификация занимает 200мс - на этом даже виртуальную прокрутку не очень-то сделаешь...