Browser & Web Performance Junior interview questions and answers

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

Take this quiz
  1. 1.You type a URL and press Enter. Which order of steps is closest to what the browser does first?
  2. 2.What does the browser build from the HTML it parses?
  3. 3.What is the render tree?
  4. 4.Which order of rendering stages is correct after the render tree is built?
  5. 5.What happens during the layout (reflow) stage?
  6. 6.What is the critical rendering path?
  7. 7.Why is CSS called render-blocking?
  8. 8.What does a classic <script src> without async or defer do to HTML parsing?
  9. 9.What's the difference between defer and async on a script?
  10. 10.How does <script type="module"> load by default?
  11. 11.What's the difference between the DOMContentLoaded and load events?
  12. 12.What is the browser's preload scanner?
  13. 13.Which three metrics are the Core Web Vitals today?
  14. 14.What does LCP (Largest Contentful Paint) measure?
  15. 15.What is a 'good' LCP value?
  16. 16.What does INP (Interaction to Next Paint) measure?
  17. 17.What is a 'good' INP value?
  18. 18.What does CLS (Cumulative Layout Shift) measure?
  19. 19.Which change is most likely to reduce CLS caused by images?
  20. 20.What does TTFB (Time to First Byte) measure?
  21. 21.What does FCP (First Contentful Paint) measure?
  22. 22.What's the difference between lab data and field data?
  23. 23.Which tool gives you a lab performance report with suggestions directly in Chrome?
  24. 24.Why can't Lighthouse report INP in a normal page-load audit?
  25. 25.What is a long task on the main thread?
  26. 26.Why does heavy JavaScript make a page feel slow even after it has loaded?
  27. 27.What does loading="lazy" on an <img> do?
  28. 28.Why shouldn't you add loading="lazy" to the hero image at the top of the page?
  29. 29.What does srcset with sizes on an <img> let the browser do?
  30. 30.Which image formats usually give smaller files than JPEG and PNG at similar quality?
  31. 31.What does font-display: swap do?
  32. 32.What is FOIT?
  33. 33.Which is a cheap way to make images download faster without changing their content?
  34. 34.What does <link rel="preload"> do?
  35. 35.What does <link rel="preconnect" href="https://cdn.example.com"> do?
  36. 36.What is <link rel="prefetch"> meant for?
  37. 37.What does dns-prefetch do?
  38. 38.What does Cache-Control: max-age=3600 mean?
  39. 39.What's the difference between no-cache and no-store?
  40. 40.What is an ETag used for?
  41. 41.What does a 304 Not Modified response mean?
  42. 42.Why do build tools put a content hash in file names like app.3f9a1c.js?
  43. 43.Which caching policy fits the HTML page of a frequently updated site that uses hashed asset URLs?
  44. 44.What does Cache-Control: private mean?
  45. 45.Where can an HTTP response be cached on its way to the user?
  46. 46.What does a hard reload (Ctrl+Shift+R) typically do with the cache?
  47. 47.Why does serving text resources with Brotli or gzip help performance?
  48. 48.What is a key benefit of HTTP/2 over HTTP/1.1?
  49. 49.How does a CDN make a site faster?
  50. 50.Why are redirects bad for page load speed?
  51. 51.What makes two URLs the same origin?
  52. 52.Are https://example.com and https://example.com:8443 the same origin?
  53. 53.What does the same-origin policy prevent by default?
  54. 54.What is CORS?
  55. 55.Who enforces CORS?
  56. 56.A frontend on https://app.com calls https://api.com and sees a CORS error. Where is the fix usually needed?
  57. 57.What is a CORS preflight request?
  58. 58.Which header in a response allows any origin to read it?
  59. 59.What is cross-site scripting (XSS)?
  60. 60.Which way of putting user input into the page is safe from XSS?
  61. 61.Why don't React and Vue templates usually cause XSS when you render {userInput}?
  62. 62.What are the three classic types of XSS?
  63. 63.What is Content Security Policy (CSP)?
  64. 64.If you must insert user-provided HTML (e.g. formatted comments), what should you do?
  65. 65.What does the HttpOnly flag on a cookie do?
  66. 66.What does the Secure flag on a cookie do?
  67. 67.What does SameSite=Lax mean for a cookie?
  68. 68.Why is storing an auth token in localStorage considered risky?
  69. 69.How do cookies affect performance?
  70. 70.What is mixed content?
  71. 71.What does the Strict-Transport-Security (HSTS) header do?
  72. 72.Why is HTTPS required for many modern web features like service workers?
  73. 73.What does Content-Encoding: br in a response mean?
  74. 74.What does <img decoding="async"> hint to the browser?
  75. 75.Which DevTools panel shows each request's timing, size, status and caching?