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

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

Rozwiąż ten test
  1. 1.Wpisujesz URL i naciskasz Enter. Która kolejność kroków jest najbliższa temu, co przeglądarka robi najpierw?
  2. 2.Co przeglądarka buduje z parsowanego HTML?
  3. 3.Czym jest render tree?
  4. 4.Która kolejność etapów renderowania jest poprawna po zbudowaniu render tree?
  5. 5.Co dzieje się na etapie layoutu (reflow)?
  6. 6.Czym jest critical rendering path?
  7. 7.Dlaczego CSS nazywa się render-blocking?
  8. 8.Co zwykły <script src> bez async ani defer robi z parsowaniem HTML?
  9. 9.Czym różni się defer od async w skrypcie?
  10. 10.Jak domyślnie ładuje się <script type="module">?
  11. 11.Czym różnią się zdarzenia DOMContentLoaded i load?
  12. 12.Czym jest preload scanner przeglądarki?
  13. 13.Które trzy metryki są dziś Core Web Vitals?
  14. 14.Co mierzy LCP (Largest Contentful Paint)?
  15. 15.Jaka wartość LCP jest „dobra”?
  16. 16.Co mierzy INP (Interaction to Next Paint)?
  17. 17.Jaka wartość INP jest „dobra”?
  18. 18.Co mierzy CLS (Cumulative Layout Shift)?
  19. 19.Która zmiana najpewniej zmniejszy CLS powodowany przez obrazy?
  20. 20.Co mierzy TTFB (Time to First Byte)?
  21. 21.Co mierzy FCP (First Contentful Paint)?
  22. 22.Czym różnią się dane laboratoryjne (lab) od danych terenowych (field)?
  23. 23.Które narzędzie daje laboratoryjny raport wydajności z sugestiami bezpośrednio w Chrome?
  24. 24.Dlaczego Lighthouse nie może raportować INP w zwykłym audycie ładowania strony?
  25. 25.Czym jest długie zadanie (long task) w głównym wątku?
  26. 26.Dlaczego ciężki JavaScript sprawia, że strona działa wolno nawet po załadowaniu?
  27. 27.Co robi loading="lazy" w <img>?
  28. 28.Dlaczego nie warto dodawać loading="lazy" do obrazu hero na górze strony?
  29. 29.Na co srcset razem z sizes w <img> pozwala przeglądarce?
  30. 30.Które formaty obrazów zwykle dają mniejsze pliki niż JPEG i PNG przy podobnej jakości?
  31. 31.Co robi font-display: swap?
  32. 32.Czym jest FOIT?
  33. 33.Jaki jest tani sposób na szybsze pobieranie obrazów bez zmiany ich treści?
  34. 34.Co robi <link rel="preload">?
  35. 35.Co robi <link rel="preconnect" href="https://cdn.example.com">?
  36. 36.Do czego służy <link rel="prefetch">?
  37. 37.Co robi dns-prefetch?
  38. 38.Co oznacza Cache-Control: max-age=3600?
  39. 39.Czym różni się no-cache od no-store?
  40. 40.Do czego służy ETag?
  41. 41.Co oznacza odpowiedź 304 Not Modified?
  42. 42.Po co narzędzia buildowe dodają hash treści do nazw plików, np. app.3f9a1c.js?
  43. 43.Jaka polityka cache pasuje do strony HTML często aktualizowanego serwisu, który używa URL-i zasobów z hashem?
  44. 44.Co oznacza Cache-Control: private?
  45. 45.Gdzie może być cache'owana odpowiedź HTTP w drodze do użytkownika?
  46. 46.Co zwykle twarde przeładowanie (Ctrl+Shift+R) robi z cache?
  47. 47.Dlaczego serwowanie zasobów tekstowych z Brotli lub gzip pomaga wydajności?
  48. 48.Jaka jest kluczowa zaleta HTTP/2 nad HTTP/1.1?
  49. 49.Jak CDN przyspiesza serwis?
  50. 50.Dlaczego przekierowania szkodzą szybkości ładowania strony?
  51. 51.Co sprawia, że dwa URL-e mają ten sam origin?
  52. 52.Czy https://example.com i https://example.com:8443 to ten sam origin?
  53. 53.Czemu domyślnie zapobiega same-origin policy?
  54. 54.Czym jest CORS?
  55. 55.Kto egzekwuje CORS?
  56. 56.Frontend na https://app.com wywołuje https://api.com i widzi błąd CORS. Gdzie zwykle trzeba to naprawić?
  57. 57.Czym jest żądanie preflight w CORS?
  58. 58.Który nagłówek w odpowiedzi pozwala dowolnemu originowi ją odczytać?
  59. 59.Czym jest cross-site scripting (XSS)?
  60. 60.Który sposób wstawienia danych od użytkownika na stronę jest bezpieczny wobec XSS?
  61. 61.Dlaczego szablony React i Vue zwykle nie powodują XSS, gdy renderujesz {userInput}?
  62. 62.Jakie są trzy klasyczne typy XSS?
  63. 63.Czym jest Content Security Policy (CSP)?
  64. 64.Jeśli musisz wstawić HTML od użytkownika (np. formatowane komentarze), co należy zrobić?
  65. 65.Co robi flaga HttpOnly w ciasteczku?
  66. 66.Co robi flaga Secure w ciasteczku?
  67. 67.Co oznacza SameSite=Lax dla ciasteczka?
  68. 68.Dlaczego trzymanie tokenu uwierzytelniania w localStorage uważa się za ryzykowne?
  69. 69.Jak ciasteczka wpływają na wydajność?
  70. 70.Czym jest mixed content?
  71. 71.Co robi nagłówek Strict-Transport-Security (HSTS)?
  72. 72.Dlaczego HTTPS jest wymagany dla wielu nowoczesnych funkcji webowych, jak service workery?
  73. 73.Co oznacza Content-Encoding: br w odpowiedzi?
  74. 74.Co <img decoding="async"> podpowiada przeglądarce?
  75. 75.Który panel DevTools pokazuje dla każdego żądania czas, rozmiar, status i cache?