Статьи для тех, кто
выводит стек в прод
Материалы о React, Node.js, TypeScript и AI. Переведённый текст показывается, если он есть. Если нет — вы видите английский текст и пометку об этом.
Тег: Browser Rendering
Игнорирование отрисовки вне экрана с использованием content-visibility и contain-intrinsic-size
Узнайте, как функция видимости контента автоматически снижает затраты на форматирование длинных страниц, генерируемых сервером, почему обязательно использовать параметр contain-intrinsic-size, и как это сравнивается с виртуализацией.
12 мин чтенияМышление через отклонение: практическая модель того, как браузеры отображают страницы
Научитесь анализировать процесс отрисовки в браузере, задаваясь вопросом о том, какие изменения нарушают его работу, — от проблем с макетированием и затрат на отрисовку до процессов композиции, гидратации и стриминга.
11 мин чтенияОт шаблона стилей к экрану: какова роль CSS в работе браузера
От загрузки CSS до пикселей: как формируются DOM, CSSOM и дерево отрисовки, где происходит каскадирование стилей и какие источники стилей конкурируют за каждый элемент.
8 мин чтенияОт 66% до 185 пикселей: как браузеры определяют значения CSS перед формированием макета
Проследите за значением CSS на этапах его объявления, каскадирования, указания, вычисления, использования и фактического применения, чтобы понять, почему относительные единицы и трюк преобразования в rem ведут себя именно так.
8 мин чтенияКак каскад выбирает победителя: важность, специфичность и порядок источников
Узнайте, как браузеры решают конфликты между заявлениями CSS, как интерпретировать специфичность через четырехэтапное сравнение, и почему правила для состояния hover и !important так часто ставят вас в тупик.
11 мин чтенияОткуда берутся значения CSS при установке None: как работает наследование
Узнайте, как браузеры определяют, наследуется ли свойство, почему дочерние элементы получают вычисленное значение родителя, и как методы inherit и initial позволяют осуществлять явный контроль.
10 мин чтенияПерераспределение потока, перекраска, композит: сколько каждое изменение в CSS стоит браузеру
Ознакомьтесь с HTML и CSS через DOM, CSSOM, процессы формирования макета, отрисовки и композиции, узнайте, почему изменение ширины требует больше ресурсов, чем изменение цвета, и как избежать проблем с производительностью макета.
16 мин чтенияЖивые коллекции DOM, проблема смещения макета и объяснение разницы в атрибутах
DOM представляет собой динамическую структуру. Почему циклы в JavaScript пропускают элементы при работе с динамическими коллекциями, как операции чтения и записи вызывают частые изменения макета, и когда необходим метод getAttribute.
6 мин чтенияОбъяснение рендеринга в React: обновление состояния и отображение на пикселях экрана
Как фазы рендеринга, согласования и сохранения состояния в React связаны с процессом рендеринга в браузере: отрисовка лейаута, окраска и композиция изображения — от обновления состояния до фактических пикселей на экране.
17 мин чтения
О этих статьях
Оценка за 24 часа
Нужен такой же стек в операторском слое? Пришлите бриф — оценка за 24 часа.