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

75 запитань для співбесіди з теми Браузер і продуктивність (Junior) - з правильними відповідями, поясненнями й посиланнями на документацію.

Пройти цей тест
  1. 1.Ви вводите URL і натискаєте Enter. Який порядок кроків найближчий до того, що браузер робить спочатку?
  2. 2.Що браузер будує з HTML, який розбирає?
  3. 3.Що таке render tree?
  4. 4.Який порядок етапів рендерингу правильний після побудови render tree?
  5. 5.Що відбувається на етапі layout (reflow)?
  6. 6.Що таке critical rendering path?
  7. 7.Чому CSS називають render-blocking?
  8. 8.Що звичайний <script src> без async чи defer робить із розбором HTML?
  9. 9.Чим відрізняються defer і async у скрипта?
  10. 10.Як за замовчуванням завантажується <script type="module">?
  11. 11.Чим відрізняються події DOMContentLoaded і load?
  12. 12.Що таке preload scanner у браузері?
  13. 13.Які три метрики сьогодні є Core Web Vitals?
  14. 14.Що вимірює LCP (Largest Contentful Paint)?
  15. 15.Яке значення LCP вважається «добрим»?
  16. 16.Що вимірює INP (Interaction to Next Paint)?
  17. 17.Яке значення INP вважається «добрим»?
  18. 18.Що вимірює CLS (Cumulative Layout Shift)?
  19. 19.Яка зміна найімовірніше зменшить CLS через зображення?
  20. 20.Що вимірює TTFB (Time to First Byte)?
  21. 21.Що вимірює FCP (First Contentful Paint)?
  22. 22.Чим відрізняються лабораторні (lab) і польові (field) дані?
  23. 23.Який інструмент дає лабораторний звіт про продуктивність із порадами прямо в Chrome?
  24. 24.Чому Lighthouse не може показати INP у звичайному аудиті завантаження сторінки?
  25. 25.Що таке довга задача (long task) у головному потоці?
  26. 26.Чому важкий JavaScript робить сторінку повільною навіть після завантаження?
  27. 27.Що робить loading="lazy" в <img>?
  28. 28.Чому не варто додавати loading="lazy" до hero-зображення вгорі сторінки?
  29. 29.Що srcset разом із sizes в <img> дозволяє браузеру?
  30. 30.Які формати зображень зазвичай дають менші файли, ніж JPEG і PNG, за подібної якості?
  31. 31.Що робить font-display: swap?
  32. 32.Що таке FOIT?
  33. 33.Який простий спосіб пришвидшити завантаження зображень, не змінюючи їхнього вмісту?
  34. 34.Що робить <link rel="preload">?
  35. 35.Що робить <link rel="preconnect" href="https://cdn.example.com">?
  36. 36.Для чого призначений <link rel="prefetch">?
  37. 37.Що робить dns-prefetch?
  38. 38.Що означає Cache-Control: max-age=3600?
  39. 39.Чим відрізняються no-cache і no-store?
  40. 40.Для чого використовують ETag?
  41. 41.Що означає відповідь 304 Not Modified?
  42. 42.Навіщо збирачі додають хеш вмісту в імена файлів, як-от app.3f9a1c.js?
  43. 43.Яка політика кешування підходить HTML-сторінці сайту, що часто оновлюється й використовує хешовані URL ресурсів?
  44. 44.Що означає Cache-Control: private?
  45. 45.Де може кешуватися HTTP-відповідь на шляху до користувача?
  46. 46.Що зазвичай робить жорстке перезавантаження (Ctrl+Shift+R) з кешем?
  47. 47.Чому віддача текстових ресурсів із Brotli чи gzip покращує продуктивність?
  48. 48.Яка ключова перевага HTTP/2 над HTTP/1.1?
  49. 49.Як CDN пришвидшує сайт?
  50. 50.Чому редиректи погіршують швидкість завантаження сторінки?
  51. 51.Що робить два URL одним origin?
  52. 52.Чи є https://example.com і https://example.com:8443 одним origin?
  53. 53.Що за замовчуванням забороняє same-origin policy?
  54. 54.Що таке CORS?
  55. 55.Хто забезпечує дотримання CORS?
  56. 56.Фронтенд на https://app.com звертається до https://api.com і бачить помилку CORS. Де зазвичай потрібне виправлення?
  57. 57.Що таке preflight-запит CORS?
  58. 58.Який заголовок у відповіді дозволяє будь-якому origin її читати?
  59. 59.Що таке cross-site scripting (XSS)?
  60. 60.Який спосіб вставити введення користувача на сторінку безпечний щодо XSS?
  61. 61.Чому шаблони React і Vue зазвичай не спричиняють XSS, коли ви рендерите {userInput}?
  62. 62.Які три класичні типи XSS?
  63. 63.Що таке Content Security Policy (CSP)?
  64. 64.Якщо треба вставити HTML від користувача (наприклад, форматовані коментарі), що слід зробити?
  65. 65.Що робить прапорець HttpOnly у cookie?
  66. 66.Що робить прапорець Secure у cookie?
  67. 67.Що означає SameSite=Lax для cookie?
  68. 68.Чому зберігати токен автентифікації в localStorage вважають ризикованим?
  69. 69.Як cookies впливають на продуктивність?
  70. 70.Що таке mixed content?
  71. 71.Що робить заголовок Strict-Transport-Security (HSTS)?
  72. 72.Чому HTTPS обов'язковий для багатьох сучасних вебможливостей, як-от service workers?
  73. 73.Що означає Content-Encoding: br у відповіді?
  74. 74.Що атрибут <img decoding="async"> підказує браузеру?
  75. 75.Яка панель DevTools показує для кожного запиту час, розмір, статус і кешування?