Pytania rekrutacyjne z przeglądarki i wydajności (Middle) z odpowiedziami

75 pytań na rozmowę rekrutacyjną z tematu Przeglądarka i wydajność (Middle) - z poprawnymi odpowiedziami, wyjaśnieniami i linkami do dokumentacji.

Rozwiąż ten test
  1. 1.Jaki problem powoduje ten kod?
  2. 2.Które właściwości CSS zwykle można animować bez wywoływania layoutu ani paint?
  3. 3.Jakie jest ryzyko dodania will-change: transform wielu elementom?
  4. 4.Dlaczego requestAnimationFrame jest lepszy od setInterval(fn, 16) do aktualizacji wizualnych?
  5. 5.Co robi content-visibility: auto?
  6. 6.Dlaczego bardzo duży DOM (dziesiątki tysięcy węzłów) pogarsza responsywność?
  7. 7.Co CSS contain: layout paint mówi przeglądarce?
  8. 8.Która zmiana zwykle powoduje tylko odmalowanie, bez layoutu?
  9. 9.Za co odpowiada główny wątek w typowej karcie przeglądarki?
  10. 10.Z jakich trzech części składa się opóźnienie pojedynczej interakcji w INP?
  11. 11.Handler kliknięcia po aktualizacji UI wykonuje ciężką, niepilną pracę. Jak sprawić, by aktualizacja pojawiła się szybciej?
  12. 12.Jaka jest przewaga scheduler.yield() nad setTimeout(resolve, 0) przy oddawaniu wątku?
  13. 13.Kiedy Web Workery dobrze pomagają poprawić INP?
  14. 14.Co mierzy Total Blocking Time (TBT) w teście laboratoryjnym?
  15. 15.Jaka wartość INP jest raportowana dla strony z wieloma interakcjami?
  16. 16.Pole wyszukiwania filtruje listę 5000 elementów przy każdym naciśnięciu klawisza i pisanie się zacina. Co najbardziej pomoże INP?
  17. 17.Od czego głównie zależy presentation delay w INP?
  18. 18.Co robi requestIdleCallback?
  19. 19.Dlaczego skrypty zewnętrzne mogą pogarszać INP, nawet gdy ładują się z async?
  20. 20.LCP można rozbić na cztery części. Która lista jest poprawna?
  21. 21.Obraz LCP jest ustawiony jako CSS background-image. Dlaczego to często pogarsza LCP?
  22. 22.Co robi fetchpriority="high" na <img> z LCP?
  23. 23.Dlaczego SPA renderowane po stronie klienta może mieć słaby LCP nawet w szybkiej sieci?
  24. 24.Na co pozwala serwerowi odpowiedź 103 Early Hints?
  25. 25.Co zwykle robi image CDN?
  26. 26.Do kiedy mierzony jest LCP?
  27. 27.Które przesunięcia layoutu są wyłączone z CLS?
  28. 28.Jak obliczana jest wartość CLS dla wizyty na stronie?
  29. 29.Jak zmniejszyć CLS powodowany przez fonty webowe?
  30. 30.Baner jest wstawiany na górze strony po wywołaniu API i spycha treść w dół. Jakie rozwiązanie jest najlepsze?
  31. 31.Dlaczego animacje przez transform są lepsze dla CLS niż animowanie top?
  32. 32.Dlaczego font w preload musi mieć atrybut crossorigin?
  33. 33.Co <link rel="modulepreload"> robi inaczej niż preload?
  34. 34.Co daje code splitting z dynamicznym import()?
  35. 35.Na czym opiera się tree shaking przy usuwaniu nieużywanego kodu?
  36. 36.Czym jest fasada dla ciężkiego osadzenia zewnętrznego, np. odtwarzacza wideo?
  37. 37.Na co pozwala Speculation Rules API?
  38. 38.Dlaczego należy unikać preloadowania zbyt wielu zasobów?
  39. 39.Na co pozwala Cache-Control: max-age=60, stale-while-revalidate=600?
  40. 40.Do czego służy s-maxage?
  41. 41.Do czego służy nagłówek odpowiedzi Vary?
  42. 42.Odpowiedź nie ma Cache-Control ani Expires, ale ma Last-Modified. Czy przeglądarka może ją cache'ować?
  43. 43.Co must-revalidate dodaje do odpowiedzi w cache?
  44. 44.Która strategia cache w service workerze najlepiej pasuje do statycznych zasobów z hashem?
  45. 45.Która strategia pasuje do odpowiedzi API, która ma być świeża, ale działać też offline?
  46. 46.Czym jest Cache Storage API (caches.open) w porównaniu z cache HTTP?
  47. 47.Które żądanie cross-origin jest wysyłane bez preflightu?
  48. 48.Frontend wysyła fetch(url, { credentials: "include" }) do innego originu. Co musi zawierać odpowiedź?
  49. 49.Twój JS nie może odczytać własnego nagłówka X-Total-Count z odpowiedzi cross-origin. Dlaczego?
  50. 50.Co robi Access-Control-Max-Age?
  51. 51.Serwer odbija Origin żądania w Access-Control-Allow-Origin dla listy dozwolonych serwisów. Jaki nagłówek powinien też wysłać?
  52. 52.Czy błąd CORS oznacza, że żądanie nigdy nie dotarło do serwera?
  53. 53.Czym jest odpowiedź opaque?
  54. 54.Czym jest CSRF?
  55. 55.Czym jest clickjacking i który nagłówek przed nim chroni?
  56. 56.Co robi X-Content-Type-Options: nosniff?
  57. 57.Przed czym chroni atrybut integrity (Subresource Integrity)?
  58. 58.Dlaczego <a href={userUrl}> jest niebezpieczne, jeśli userUrl nie jest walidowany?
  59. 59.Co handler zdarzenia message musi sprawdzić, zanim zaufa event.data?
  60. 60.Dlaczego CSP z 'unsafe-inline' w script-src daje małą ochronę przed XSS?
  61. 61.Jak CSP oparta na nonce decyduje, które skrypty inline mogą działać?
  62. 62.Co wysyła Referrer-Policy: strict-origin-when-cross-origin (domyślna w przeglądarkach)?
  63. 63.Czym różni się same-site od same-origin?
  64. 64.Czym jest back/forward cache (bfcache)?
  65. 65.Jak strona może wykryć, że została przywrócona z bfcache?
  66. 66.Jaki jest najpewniejszy moment na wysłanie analityki, zanim użytkownik wyjdzie?
  67. 67.Jak oznaczyć własne punkty w czasie, by widzieć je w DevTools i mierzyć w kodzie?
  68. 68.Jak zbierać LCP, INP i CLS od prawdziwych użytkowników małą ilością kodu?
  69. 69.Czym jest CrUX (Chrome UX Report)?
  70. 70.Do czego przydaje się nagłówek Server-Timing?
  71. 71.Dlaczego Resource Timing pokazuje zera dla faz DNS, połączenia i żądania niektórych zasobów cross-origin?
  72. 72.Jaki problem HTTP/2 przez TCP rozwiązuje HTTP/3?
  73. 73.Co robi nagłówek Clear-Site-Data, np. przy wylogowaniu?
  74. 74.Co robi Permissions-Policy: camera=(), geolocation=(self)?
  75. 75.Dlaczego ciasteczko stron trzecich ustawione w osadzonym iframe często już nie działa?