Browser & Web Performance Middle interview questions and answers

75 questions for a Browser & Web Performance (Middle) interview - with correct answers, explanations and links to the docs.

Take this quiz
  1. 1.What problem does this code cause?
  2. 2.Which CSS properties can usually be animated without triggering layout or paint?
  3. 3.What is the risk of adding will-change: transform to many elements?
  4. 4.Why is requestAnimationFrame better than setInterval(fn, 16) for visual updates?
  5. 5.What does content-visibility: auto do?
  6. 6.Why does a very large DOM (tens of thousands of nodes) hurt responsiveness?
  7. 7.What does CSS contain: layout paint tell the browser?
  8. 8.Which change usually causes only a repaint, without layout?
  9. 9.What is the main thread responsible for in a typical browser tab?
  10. 10.Which three parts make up the latency of a single interaction in INP?
  11. 11.A click handler does heavy, non-urgent work after updating the UI. How can you make the update appear sooner?
  12. 12.What is the advantage of scheduler.yield() over setTimeout(resolve, 0) for yielding?
  13. 13.When are Web Workers a good fit for improving INP?
  14. 14.What does Total Blocking Time (TBT) measure in a lab test?
  15. 15.Which INP value is reported for a page with many interactions?
  16. 16.A search box filters a 5 000-item list on every keystroke and typing feels laggy. Which fix helps INP the most?
  17. 17.What does presentation delay in INP mostly depend on?
  18. 18.What does requestIdleCallback do?
  19. 19.Why can third-party scripts hurt INP even if they load with async?
  20. 20.LCP can be split into four parts. Which list is correct?
  21. 21.The LCP image is set as a CSS background-image. Why does that often hurt LCP?
  22. 22.What does fetchpriority="high" on the LCP <img> do?
  23. 23.Why can a client-side rendered SPA have a poor LCP even on a fast network?
  24. 24.What does a 103 Early Hints response let the server do?
  25. 25.What does an image CDN typically do?
  26. 26.LCP is measured until when?
  27. 27.Which layout shifts are excluded from CLS?
  28. 28.How is the CLS value for a page visit computed?
  29. 29.How can you reduce CLS caused by web fonts?
  30. 30.A banner is inserted at the top of the page after an API call and pushes content down. What is the best fix?
  31. 31.Why are animations with transform better than animating top for CLS?
  32. 32.Why must a preloaded font have the crossorigin attribute?
  33. 33.What does <link rel="modulepreload"> do differently from preload?
  34. 34.What does code splitting with dynamic import() give you?
  35. 35.What does tree shaking rely on to remove unused code?
  36. 36.What is a facade for a heavy third-party embed, like a video player?
  37. 37.What does the Speculation Rules API allow?
  38. 38.Why should you avoid preloading too many resources?
  39. 39.What does Cache-Control: max-age=60, stale-while-revalidate=600 allow?
  40. 40.What is s-maxage used for?
  41. 41.What is the Vary response header for?
  42. 42.A response has no Cache-Control or Expires, but has Last-Modified. Can the browser cache it?
  43. 43.What does must-revalidate add to a cached response?
  44. 44.Which service worker caching strategy fits hashed static assets best?
  45. 45.Which strategy fits an API response that should be fresh but must also work offline?
  46. 46.What is the Cache Storage API (caches.open) compared to the HTTP cache?
  47. 47.Which cross-origin request is sent without a preflight?
  48. 48.The frontend sends fetch(url, { credentials: "include" }) to another origin. What must the response contain?
  49. 49.Your JS can't read a custom X-Total-Count header from a cross-origin response. Why?
  50. 50.What does Access-Control-Max-Age do?
  51. 51.A server reflects the request's Origin into Access-Control-Allow-Origin for an allowlist of sites. Which header should it also send?
  52. 52.Does a CORS error mean the request never reached the server?
  53. 53.What is an opaque response?
  54. 54.What is CSRF?
  55. 55.What is clickjacking and which header defends against it?
  56. 56.What does X-Content-Type-Options: nosniff do?
  57. 57.What does the integrity attribute (Subresource Integrity) protect against?
  58. 58.Why is <a href={userUrl}> dangerous if userUrl isn't validated?
  59. 59.What must a message event handler check before trusting event.data?
  60. 60.Why does CSP with 'unsafe-inline' in script-src provide little XSS protection?
  61. 61.How does a nonce-based CSP decide which inline scripts may run?
  62. 62.What does Referrer-Policy: strict-origin-when-cross-origin (the browser default) send?
  63. 63.What is the difference between same-site and same-origin?
  64. 64.What is the back/forward cache (bfcache)?
  65. 65.How can a page detect that it was restored from bfcache?
  66. 66.What is the most reliable moment to send analytics before the user leaves?
  67. 67.How can you mark custom points in time to see them in DevTools and measure them in code?
  68. 68.How do you collect LCP, INP and CLS from real users with little code?
  69. 69.What is CrUX (Chrome UX Report)?
  70. 70.What is the Server-Timing header useful for?
  71. 71.Why does Resource Timing show zeros for DNS, connect and request phases of some cross-origin resources?
  72. 72.What problem of HTTP/2 over TCP does HTTP/3 solve?
  73. 73.What does the Clear-Site-Data header do, for example on logout?
  74. 74.What does Permissions-Policy: camera=(), geolocation=(self) do?
  75. 75.Why does a third-party cookie set inside an embedded iframe often not work anymore?