Питання на співбесіді з браузера й продуктивності з відповідями

Приклади запитань

Кілька запитань із кожного рівня з правильною відповіддю й поясненням.

Браузер і продуктивність · Junior

1. Ви вводите URL і натискаєте Enter. Який порядок кроків найближчий до того, що браузер робить спочатку?

   Правильна відповідь: DNS-запит, TCP- (і TLS-) з'єднання, HTTP-запит, потім розбір HTML-відповіді

   Браузер має перетворити ім'я хоста на IP, відкрити з'єднання (плюс TLS для HTTPS) і надіслати запит, перш ніж отримає HTML для розбору.

2. Що браузер будує з HTML, який розбирає?

   Правильна відповідь: DOM - дерево вузлів документа

   HTML розбивається на токени, з яких складаються вузли DOM. CSS окремо розбирається в CSSOM; пізніше їх поєднують.

3. Що таке render tree?

   Правильна відповідь: Поєднання DOM і CSSOM, де є лише видимі вузли з обчисленими стилями

   Елементи з display: none і невізуальні вузли на кшталт <head> туди не потрапляють. Render tree - вхідні дані для layout.

4. Який порядок етапів рендерингу правильний після побудови render tree?

   Правильна відповідь: Layout, paint, composite

   Layout обчислює геометрію, paint заповнює пікселі шарів, а композитинг виводить шари на екран у правильному порядку.

Браузер і продуктивність · Middle

1. Які CSS-властивості зазвичай можна анімувати без запуску layout чи paint?

   Правильна відповідь: transform і opacity

   Їх може обробити компоновник (compositor) на вже відмальованому шарі, тож анімації лишаються плавними, навіть коли головний потік зайнятий.

2. Чим ризиковано додавати will-change: transform багатьом елементам?

   Правильна відповідь: Кожен може отримати власний шар компоновника, що коштує пам'яті GPU й іноді все сповільнює

   will-change - підказка для елементів, які от-от анімуватимуться, а не загальне прискорення. Зловживання призводить до «вибуху шарів».

3. Чому requestAnimationFrame кращий за setInterval(fn, 16) для візуальних оновлень?

   Правильна відповідь: Він запускається якраз перед рендерингом наступного кадру й зупиняється у фонових вкладках

   Таймери «пливуть» і не синхронізовані з кадрами, тож оновлення можуть губитися або виконуватися двічі. rAF також підлаштовується під екрани 120 Гц.

4. Що робить content-visibility: auto?

   Правильна відповідь: Пропускає роботу з рендерингу (layout і paint) для контенту поза екраном, доки той не наблизиться до видимої області

   На довгих сторінках це може значно скоротити початковий рендеринг. Поєднуйте з contain-intrinsic-size, щоб смуга прокрутки не стрибала.

Браузер і продуктивність · Senior

1. Що гарантує Site Isolation у Chromium?

   Правильна відповідь: Сторінки різних сайтів рендеряться в різних процесах ОС

   Після Spectre межі процесів стали головним захистом від того, щоб один сайт читав пам'ять іншого, зокрема cross-site iframe.

2. Чому браузери вимкнули SharedArrayBuffer за замовчуванням, а потім знову ввімкнули лише для cross-origin isolated сторінок?

   Правильна відповідь: Він дає таймери високої точності, корисні для атак Spectre; ізоляція гарантує, що в процесі немає cross-origin даних

   Із COOP і COEP сторінка не може підтягнути cross-origin ресурси, які на це не погодилися, тож Spectre-гаджету нема що секретного читати.

3. Після ввімкнення COEP: require-corp перестали вантажитися сторонні зображення. Які є варіанти?

   Правильна відповідь: Стороння сторона має надсилати Cross-Origin-Resource-Policy: cross-origin або віддавати через CORS; або використати COEP: credentialless

   credentialless вантажить no-cors cross-origin ресурси без cookies, тож вони не можуть містити секретів конкретного користувача.

4. Від чого, крім увімкнення ізоляції, захищає Cross-Origin-Opener-Policy: same-origin?

   Правильна відповідь: Cross-origin вікна, які ваша сторінка відкрила чи які відкрили її, втрачають посилання window.opener, що блокує багато XS-Leaks і tabnabbing

   Спливні вікна в окремій групі контекстів перегляду не можуть рахувати ваші фрейми, переводити вас на іншу сторінку чи вимірювати час через дескриптор вікна.

Збірні тести з цією темою

Запитання з кількох тем одразу - як на співбесіді на конкретну вакансію.