Comments 26
Эх, а ведь все еще приходится для кроссбраузерного ускорения абузить враппер + `position: absolute;`. Тот же Safari, насколько я помню, все еще не может в `contain`.
Спасибо, было интересно.
Да - это жостка)
Наверное, потому что это таблица?..
Зато дивы отлично копируются и вставляются в эксель. (нет)
Нормально всё с таблицами в адаптиве, если уметь их готовить.
В конечном счёте всегда можно перешаманить ячейки хоть на гриды, хоть на абсолютное позиционирование, и это будет не сложнее (ровно так же), как если изначально костылить дивами.
В конечном счёте всегда можно перешаманить ячейки хоть на гриды, хоть на абсолютное позиционирование
На сколько я знаю нет, нельзя просто так ожидать от td и tr поведения как от div. Гриды к ним не применить, а уж абсолютное тут вообще не в тему, высота родителя теряется и там еще больше проблем чем от таблиц. Костылить можно чем угодно но таблица на дивах это единственное, что позволяет управлять контентом максимально.
Как минимум, для этого есть flex-direction. Просто поменять в нужный момент направление. А как максимум гриды. Но и на флексах можно из трех ячеек сделать две, пустив среднюю ниже под две. Таким образом сократив ширину общей строки. Для большого количества данных подходят таблицы, удобнее, потому что их все равно придется их отображать через горизонтальный скролл, а для таблиц до 5-8 значений вполне можно на дивах, если адаптив там получается симпатичный, ну и если он нужен конечно. Не все таблицы нужно адаптивить.
Вот это действительно магия - одна строчка на css и веб-страница перестала тормозить. Я бы, например, если бы и нашёл из-за чего тормозит, вряд ли бы до такого "финта ушами" догадался. Супер!
Так и в чём суть-то? Ну добавил, теперь пустое всё. Или правильно его добавлять на всё то, что грузится фетчем и после добавления стиль удалять?
Вся страница содержит больше 38 тысяч (!) элементов, а так быстрое приложение не пишут!
Это ахтунг. Одно из основных правил, если немного заботит производительность - чем меньше элементов, тем лучше. Как автор подметил выше, DOM сам по себе становится медленнее, когда элементов много, даже если не учитывать пересчёт раскладки и рендеринг. Если нужно отрисовывать кучу однотипных блоков/таблиц, есть много библиотек для виртуального рендеринга (обычно называются virtual scroll или virtual grid), которые ограничивают кол-во одновременно отображаемых элементов.
Что же я сделал? Просто добавил одну строку CSS в
<table>на панелиElements, указав, что таблица не должна влиять на структуру или стили других элементов страницы
Было бы интересно узнать, почему именно это повысило производительность. А то статья как-то внезапно заканчивается.
https://developer.mozilla.org/en-US/docs/Web/CSS/contain
The contain CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page, leading to obvious performance benefits.
Ну ок, независимо от общего дерева. Почему тогда элементы пропадают. Как это работает-то ответа так и нет? Для табличек ок, на дивку добавил - всё сломалось.
Потому что contain: strict - это алиас к contain: size layout paint, а contain: size указывает, что элемент рендерится независимо от размеров дочерних элементов.
В то же время, на table автоматически задан display: table, который очень серьезно перекручивает рендеринг. (Как именно перекручивает — я точно не знаю).
Соответственно, нужно задавать либо contain: strict + display: table; либо contain: strict + height: 800px; либо contain: layout + paint.
size указывает, что элемент рендерится независимо от размеров дочерних элементов
ну так это противоречие. если задать дивке, то она и ее содержимое не отрендерится.
Нету тут противоречия. Если задаете contain: size, то нужно задавать высоту divа, потому что иначе его высота рассчитывается независимо от дочерних элементов — т.е. 0px. Контент будет рендериться, как только у него будет указана высота.
Типичный кейс для этой штуки:
contain: strict;
height: 400px;
overflow: auto;
contain - это как раз свойство, позволяющее реализовать нечто похожее на виртуализацию, но средствами браузера.
Как я в десять раз ускорил работу таблицы Google одной строкой CSS