CSS Grid Layout — различия между версиями
м |
м |
||
| Строка 7: | Строка 7: | ||
Ну… почти без — в обычных таблицах подсветить строку при наведении чистым CSS можно, а тут нельзя — нужно JS юзать | Ну… почти без — в обычных таблицах подсветить строку при наведении чистым CSS можно, а тут нельзя — нужно JS юзать | ||
| − | UPD: А вот хрен вам. Тормозит она — примерно в 2 раза медленнее, чем таблицы. Основная проблема в том, что grid layout — это рендер всех ячеек в одном родителе. Если таблица большая — ну, например, 60 колонок и 20 строк — это уже 1200 ячеек, и в такой конфигурации даже просто добавление ОДНОЙ строки занимает ~200мс (рендер). Если пытаться добавить 100 таких строк — рендер занимает примерно 850 мс. Справедливости ради надо отметить, что 100 строк по 60 колонок — это | + | UPD: А вот хрен вам. Тормозит она — примерно в 2 раза медленнее, чем таблицы. Основная проблема в том, что grid layout — это рендер всех ячеек в одном родителе. Если таблица большая — ну, например, 60 колонок и 20 строк — это уже 1200 ячеек, и в такой конфигурации даже просто добавление ОДНОЙ строки занимает ~200мс (рендер). Если пытаться добавить 100 таких строк — рендер занимает примерно 850 мс. Справедливости ради надо отметить, что 100 строк по 60 колонок — это 6000 элементов, что уже многовато, и даже с обычной таблицей это тоже тормозит, хоть и работает быстрее, чем grid layout (400 мс). Но тем не менее — если в строке 60 ячеек, то 20 строк — это примерно viewport. Если любая модификация занимает 200мс — на этом даже виртуальную прокрутку не очень-то сделаешь… |
| + | |||
| + | Так, а сколько мы знаем способов фиксированной колонки? | ||
| + | * Для нормальных браузеров - position sticky | ||
| + | * Для ненормальных: | ||
| + | ** scroll sync (много геморроя, но самый шустрый) | ||
| + | ** эмуляция position sticky | ||
| + | ** эмуляция прокрутки через margin | ||
Текущая версия на 20:20, 5 августа 2019
О ДАААААААААААААААААА
https://jsfiddle.net/vitalif/jkr120ab/8/
Наконец-то фиксированная строка и колонка без костылей!!!
Ну… почти без — в обычных таблицах подсветить строку при наведении чистым CSS можно, а тут нельзя — нужно JS юзать
UPD: А вот хрен вам. Тормозит она — примерно в 2 раза медленнее, чем таблицы. Основная проблема в том, что grid layout — это рендер всех ячеек в одном родителе. Если таблица большая — ну, например, 60 колонок и 20 строк — это уже 1200 ячеек, и в такой конфигурации даже просто добавление ОДНОЙ строки занимает ~200мс (рендер). Если пытаться добавить 100 таких строк — рендер занимает примерно 850 мс. Справедливости ради надо отметить, что 100 строк по 60 колонок — это 6000 элементов, что уже многовато, и даже с обычной таблицей это тоже тормозит, хоть и работает быстрее, чем grid layout (400 мс). Но тем не менее — если в строке 60 ячеек, то 20 строк — это примерно viewport. Если любая модификация занимает 200мс — на этом даже виртуальную прокрутку не очень-то сделаешь…
Так, а сколько мы знаем способов фиксированной колонки?
- Для нормальных браузеров - position sticky
- Для ненормальных:
- scroll sync (много геморроя, но самый шустрый)
- эмуляция position sticky
- эмуляция прокрутки через margin
