Pytania rekrutacyjne System Design z odpowiedziami
Projektowanie frontendu i systemów webowych: renderowanie, API, cache, autoryzacja, real-time, skalowanie, wdrożenia.
225 pytań na rozmowę rekrutacyjną z tematu System Design z odpowiedziami i wyjaśnieniami - poziomy Junior, Middle i Senior. Przykładowe pytania, testy online i zadania z kodu.
- Caching
- API
- Auth
- Real-time
- Scalability
Pytania według poziomu
Junior
Podstawowe pojęcia i składnia · 50 pytań
Middle
Praktyka, niuanse i optymalizacja · 50 pytań
Senior
Architektura, mechanizmy wewnętrzne, przypadki brzegowe · 50 pytań
Przykładowe pytania
Kilka pytań z każdego poziomu z poprawną odpowiedzią i wyjaśnieniem.
System Design · Junior
- Co dzieje się, gdy użytkownik wpisuje adres strony i naciska Enter?
Poprawna odpowiedź: DNS → połączenie (TCP/TLS) → żądanie HTTP → odpowiedź → renderowanie strony
Przeglądarka ustala IP przez DNS (z cache na każdym poziomie), nawiązuje połączenie i handshake TLS, wysyła żądanie, dostaje HTML, parsuje go, ładuje CSS/JS/obrazki, buduje DOM i CSSOM oraz wykonuje layout i malowanie. To klasyczne pytanie otwierające rozmowę o wydajności.
- Do czego służy DNS?
Poprawna odpowiedź: Zamienia nazwy domen na adresy IP serwerów
DNS to rozproszona „książka telefoniczna” internetu. Odpowiedzi są cache'owane (przeglądarka, system, dostawca) na czas TTL. Szyfrowanie to zadanie TLS, a kopie treści blisko użytkownika - CDN.
- Czym HTTPS różni się od HTTP?
Poprawna odpowiedź: Ruch jest szyfrowany, a autentyczność serwera weryfikowana przez TLS
TLS chroni przed podsłuchem i podmianą danych, a certyfikat potwierdza, że rozmawiasz z prawdziwym serwerem. Wiele nowoczesnych API przeglądarki (Service Worker, geolokalizacja, HTTP/2 w przeglądarkach) działa tylko przez HTTPS.
- Co oznacza zasada REST „zasoby + metody HTTP”?
Poprawna odpowiedź: URL identyfikuje zasób, a metoda akcję:
GET /users/1,DELETE /users/1REST używa rzeczowników w URL i semantyki metod HTTP: GET czyta, POST tworzy, PUT/PATCH aktualizują, DELETE usuwa. Czyni to API przewidywalnym, a cache i proxy rozumieją sens żądań.
System Design · Middle
- Od czego poprawnie zaczynać odpowiedź na zadanie z frontend system design?
Poprawna odpowiedź: Od doprecyzowania wymagań i ograniczeń
Popularny szkielet RADIO: Requirements (funkcjonalne i niefunkcjonalne), Architecture (komponenty i przepływy danych), Data model (stan kliencki), Interface (API), Optimizations (wydajność, a11y, i18n, bezpieczeństwo). Bez wymagań łatwo zaprojektować nie ten system.
- Dlaczego paginacja kursorowa jest lepsza od paginacji przez przesunięcie (
offset) dla feedu?Poprawna odpowiedź: Brak duplikatów przy wstawieniach i szybko na głębokich stronach
Przy
offsetnowe posty przesuwają wycinek i użytkownik widzi powtórzenia;OFFSET 100000jest drogi dla bazy. Kursor („po rekordzie z id X”) jest stabilny i wydajny na indeksie. Minus: nie da się przeskoczyć na stronę 57, więc dla tabel z numerami stronoffsetbywa odpowiedniejszy. - Jak zaprojektować nieskończony feed z tysiącami postów?
Poprawna odpowiedź: Ładowanie kursorowe przez
IntersectionObserveri wirtualizacja listyElement-strażnik przy końcu listy uruchamia ładowanie kolejnej strony. Wirtualizacja trzyma w DOM tylko widoczne elementy. Uwzględnia się też: przywracanie pozycji przy powrocie, obrazki z wymiarami, nowe posty na górze bez „skoku” feedu.
- Co ważne jest przy projektowaniu autouzupełniania (autocomplete)?
Poprawna odpowiedź: Debounce, anulowanie nieaktualnych żądań, cache, obsługa klawiatury
Plus minimalna długość zapytania, obsługa wyścigów odpowiedzi, podświetlanie dopasowań, stan „nic nie znaleziono”, wzorzec ARIA combobox. Dla małego stałego słownika można filtrować na kliencie (czasem z trie), dla dużych - wyszukiwanie po stronie serwera.
System Design · Senior
- Co mówi twierdzenie CAP?
Poprawna odpowiedź: Przy podziale sieci trzeba wybierać między spójnością a dostępnością
Consistency, Availability, Partition tolerance: podział sieci w systemie rozproszonym jest nieunikniony, a w tym momencie system albo odrzuca część żądań (CP), albo odpowiada możliwie nieaktualnymi danymi (AP). W normalnej pracy kompromis dotyczy spójności i opóźnienia (PACELC).
- Użytkownik zaktualizował profil, odświeżył stronę i zobaczył stare dane. Która gwarancja została naruszona?
Poprawna odpowiedź: Read-your-writes: użytkownik powinien widzieć własne zmiany
Typowa przyczyna to odczyt z repliki, do której zmiana jeszcze nie dotarła, lub nieaktualny cache. Rozwiązania: przez jakiś czas po zapisie czytać „swoje” dane z węzła głównego, aktualizować cache kliencki odpowiedzią mutacji, używać
updateTagzamiast unieważniania SWR. - Czym grozi wybór klucza shardowania „według daty utworzenia”?
Poprawna odpowiedź: Wszystkie nowe rekordy trafią do jednego sharda - powstanie gorąca partycja
Shardowanie rozdziela dane między węzły; klucz powinien równomiernie rozkładać obciążenie i pasować do zapytań. Monotoniczny klucz koncentruje zapis w ostatnim shardzie. Często używa się hasha od id użytkownika lub klucza złożonego.
- Po co consistent hashing przy dodawaniu węzłów cache?
Poprawna odpowiedź: Przy zmianie liczby węzłów przenosi się tylko niewielka część kluczy
Z
hash(key) % Nzmiana N przenosi prawie wszystkie klucze, a cache masowo chybia. Pierścień hashy (z wirtualnymi węzłami) przenosi tylko ~1/N kluczy. Używa się go w rozproszonych cache'ach, CDN, bazach.
Testy łączone z tym tematem
Pytania z kilku tematów naraz - jak na rozmowie rekrutacyjnej na konkretne stanowisko.
Zadania z kodu
Napisz rozwiązanie prosto w przeglądarce, a testy od razu je sprawdzą. Klasyka rozmów rekrutacyjnych: debounce, throttle, deepClone, Promise.all, EventEmitter, cache LRU i inne.
Otwórz zadania →