Статті для тих, хто
виводить стек у прод
Матеріали про React, Node.js, TypeScript і AI. Перекладений текст показується, якщо він є. Якщо ні — ви бачите англійський текст і примітку про це.
Тег: Browser Rendering
Пропуск рендерингу поза екраном за допомогою content-visibility та contain-intrinsic-size
Дізнайтеся, як параметр content-visibility: auto зменшує витрати на форматування на довгих сторінках, які генеруються сервером, чому обов’язково використовувати параметр contain-intrinsic-size, та як це порівнюється з віртуалізацією.
12 хв читанняМислення через недійсність: практична модель того, як браузери відображають сторінки
Навчіться міркувати щодо відображення в браузері, ставлячи запитання про те, що скасовується кожною зміною — від проблем із макетуванням та витрат на зображення до процесів композиції, гідратації та стрімінгу.
11 хв читанняВід стилівки до екрана: яке місце займає CSS у процесі роботи браузера
Від завантаження до пікселів: як створюються DOM, CSSOM та дерево відображення, де відбувається каскадування стилів та які джерела стилів конкурують за кожен елемент.
8 хв читанняВід 66% до 185px: як браузери обчислюють значення 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: оновлення стану для пікселів екрана
Як фази render, reconciliation та commit у React пов’язані з процесом відображення в браузері: layout, paint та composite, від оновлення стану до фактичних пікселів екрана.
17 хв читання
Про ці статті
Оцінка за 24 години
Потрібен такий стек в операторському шарі? Надішліть бриф — оцінка за 24 години.