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

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

Пройти цей тест
  1. 1.Яку проблему спричиняє цей код?
  2. 2.Які CSS-властивості зазвичай можна анімувати без запуску layout чи paint?
  3. 3.Чим ризиковано додавати will-change: transform багатьом елементам?
  4. 4.Чому requestAnimationFrame кращий за setInterval(fn, 16) для візуальних оновлень?
  5. 5.Що робить content-visibility: auto?
  6. 6.Чому дуже великий DOM (десятки тисяч вузлів) погіршує чуйність?
  7. 7.Що CSS contain: layout paint повідомляє браузеру?
  8. 8.Яка зміна зазвичай спричиняє лише перемальовування, без layout?
  9. 9.За що відповідає головний потік у типовій вкладці браузера?
  10. 10.З яких трьох частин складається затримка однієї взаємодії в INP?
  11. 11.Обробник кліку після оновлення UI виконує важку нетермінову роботу. Як зробити, щоб оновлення з'явилося швидше?
  12. 12.У чому перевага scheduler.yield() над setTimeout(resolve, 0) для поступки потоком?
  13. 13.Коли Web Workers добре підходять для покращення INP?
  14. 14.Що вимірює Total Blocking Time (TBT) у лабораторному тесті?
  15. 15.Яке значення INP звітується для сторінки з багатьма взаємодіями?
  16. 16.Поле пошуку фільтрує список із 5000 елементів на кожне натискання клавіші, і ввід «гальмує». Що найбільше допоможе INP?
  17. 17.Від чого здебільшого залежить presentation delay в INP?
  18. 18.Що робить requestIdleCallback?
  19. 19.Чому сторонні скрипти можуть погіршувати INP, навіть коли вантажаться з async?
  20. 20.LCP можна розкласти на чотири частини. Який список правильний?
  21. 21.LCP-зображення задано як CSS background-image. Чому це часто погіршує LCP?
  22. 22.Що робить fetchpriority="high" на LCP-<img>?
  23. 23.Чому SPA з клієнтським рендерингом може мати поганий LCP навіть у швидкій мережі?
  24. 24.Що дає серверу відповідь 103 Early Hints?
  25. 25.Що зазвичай робить image CDN?
  26. 26.До якого моменту вимірюється LCP?
  27. 27.Які зсуви макета не враховуються в CLS?
  28. 28.Як обчислюється значення CLS для візиту на сторінку?
  29. 29.Як зменшити CLS через вебшрифти?
  30. 30.Банер вставляється вгорі сторінки після API-запиту й зсуває контент униз. Яке рішення найкраще?
  31. 31.Чому анімації через transform кращі для CLS, ніж анімація top?
  32. 32.Чому шрифт у preload мусить мати атрибут crossorigin?
  33. 33.Що <link rel="modulepreload"> робить інакше, ніж preload?
  34. 34.Що дає розбиття коду (code splitting) з динамічним import()?
  35. 35.На що спирається tree shaking, щоб видалити невикористаний код?
  36. 36.Що таке фасад (facade) для важкого стороннього вбудовування, як-от відеоплеєра?
  37. 37.Що дозволяє Speculation Rules API?
  38. 38.Чому не варто робити preload для надто багатьох ресурсів?
  39. 39.Що дозволяє Cache-Control: max-age=60, stale-while-revalidate=600?
  40. 40.Для чого використовують s-maxage?
  41. 41.Для чого потрібен заголовок відповіді Vary?
  42. 42.Відповідь не має Cache-Control чи Expires, але має Last-Modified. Чи може браузер її кешувати?
  43. 43.Що додає must-revalidate до закешованої відповіді?
  44. 44.Яка стратегія кешування в service worker найкраще підходить для хешованих статичних ресурсів?
  45. 45.Яка стратегія підходить для API-відповіді, що має бути свіжою, але працювати й офлайн?
  46. 46.Чим Cache Storage API (caches.open) відрізняється від HTTP-кешу?
  47. 47.Який cross-origin запит надсилається без preflight?
  48. 48.Фронтенд надсилає fetch(url, { credentials: "include" }) на інший origin. Що має містити відповідь?
  49. 49.Ваш JS не може прочитати власний заголовок X-Total-Count із cross-origin відповіді. Чому?
  50. 50.Що робить Access-Control-Max-Age?
  51. 51.Сервер віддзеркалює Origin запиту в Access-Control-Allow-Origin для списку дозволених сайтів. Який заголовок він має надсилати ще?
  52. 52.Чи означає помилка CORS, що запит так і не дійшов до сервера?
  53. 53.Що таке opaque-відповідь?
  54. 54.Що таке CSRF?
  55. 55.Що таке clickjacking і який заголовок від нього захищає?
  56. 56.Що робить X-Content-Type-Options: nosniff?
  57. 57.Від чого захищає атрибут integrity (Subresource Integrity)?
  58. 58.Чому <a href={userUrl}> небезпечний, якщо userUrl не перевірено?
  59. 59.Що має перевірити обробник події message, перш ніж довіряти event.data?
  60. 60.Чому CSP із 'unsafe-inline' у script-src майже не захищає від XSS?
  61. 61.Як CSP на основі nonce вирішує, яким inline-скриптам можна виконуватися?
  62. 62.Що надсилає Referrer-Policy: strict-origin-when-cross-origin (типова в браузерах)?
  63. 63.Чим відрізняються same-site і same-origin?
  64. 64.Що таке back/forward cache (bfcache)?
  65. 65.Як сторінка може дізнатися, що її відновлено з bfcache?
  66. 66.Який найнадійніший момент, щоб надіслати аналітику перед тим, як користувач піде?
  67. 67.Як позначити власні моменти часу, щоб бачити їх у DevTools і вимірювати в коді?
  68. 68.Як зібрати LCP, INP і CLS від реальних користувачів, написавши мало коду?
  69. 69.Що таке CrUX (Chrome UX Report)?
  70. 70.Для чого корисний заголовок Server-Timing?
  71. 71.Чому Resource Timing показує нулі для фаз DNS, з'єднання й запиту деяких cross-origin ресурсів?
  72. 72.Яку проблему HTTP/2 поверх TCP розв'язує HTTP/3?
  73. 73.Що робить заголовок Clear-Site-Data, наприклад, під час виходу з акаунта?
  74. 74.Що робить Permissions-Policy: camera=(), geolocation=(self)?
  75. 75.Чому стороння cookie, встановлена всередині вбудованого iframe, часто більше не працює?