Две строки CSS, которые повышают производительность рендеринга в 7 раз!

Я отсеку все лишнее и перейду непосредственно к двум строчкам css, которые вам нужно добавить, чтобы повысить производительность примерно в 7 раз:

{
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Зачем вам это нужно?

В наше время веб-сайты должны быть оптимальными и производительными, у пользователей в интернете очень короткий промежуток внимания. По данным Doherty пороговое время отклика составляет 400 миллисекунд.

А теперь представьте себе сайт, например, Facebook, Instagram и т.д., который занимает больше времени, чем пороговое время? Никто не будет возвращаться на эти сайты снова.


Когда вы можете это использовать?

Чаще всего это используется, когда у вас есть огромный список/сетка данных, которые должны быть отображены в приложении.

Пример: Статический веб-сайт, например, спецификации, документация, блоги о путешествиях и т.д..

Хотелось бы услышать в комментариях, если у вас есть другие варианты использования.


Как это работает?

Браузер действует умно, пропуская работу по рендерингу с классом, который вы применили с content-visibility: auto.

Браузеру необходимо знать расположение DOM для того, чтобы произвести рендеринг, те элементы, которые не находятся в области просмотра, не рендерятся и фактически имеют пустое поле с contain-intrinsic-size, которое вы предоставили.

Короче говоря, весь рендеринг откладывается до достижения области просмотра, в которой браузер рендерит фактический макет с указанными вами шириной, высотой и стилями.

P.S: макеты, которые не находятся за пределами области просмотра, будут иметь height: 0, поэтому, когда отложенный макет попадет в область просмотра, они будут накладываться друг на друга, вот почему необходимо contain-intrinsic-size, Однако, не беспокойтесь, это просто запасные значения, браузер отобразит фактические значения, когда он будет рендерить в области просмотра.

Отсюда один недостаток — полосы прокрутки будут выглядеть странно и прыгать по местам, если contain-intrinsic-size не задан должным образом. 🙂


Поддержка браузеров

content-visibility полагается на CSS Containment Spec. В настоящее время content-visibility поддерживается в основном в хромовых технологиях на момент написания статьи.

Однако, поддержка content-visibility является неплохой функцией для high-end систем, но с развитием веб-разработок она скоро будет поддерживаться и во всех браузерах. Будем надеяться 🙂


Альтернативы

Существуют альтернативы для повышения производительности с помощью JavaScript, например, использование виртуализации списков, но кто хочет писать 100’s line of js и поддерживать его, когда вы можете сделать это в 2 строках css.

Читать далее; что вы можете сделать это в js:
react-window
react-virtualized


Отличная демонстрация и объяснение:


Дальнейшее чтение:

https://web.dev/content-visibility/#support
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

С уважением,

Оцените статью
Procodings.ru
Добавить комментарий