Summary of "СЛОЖНОЕ собеседование на SENIOR frontend разработчика на 400K: react, typescript, javascript🔥ЧАСТЬ 1"

Overview

This is a summary of a recorded senior frontend interview (comfortable tone, not overly formal). The candidate (also the video author) targeted a compensation range of roughly 300–400k depending on responsibilities. Interviewers asked a mix of basic and in‑depth questions, and the coding/whiteboard tasks were reasonable for a senior role.

Preliminaries

Brief HR‑style discussion about the candidate’s background.
Candidate noted several leadership responsibilities:
- Led multiple projects and made architectural decisions.
- Set up build tools from scratch and wrote custom plugins.
- Also mentioned many past workplaces had tools preconfigured, so manual config was less often required.
Camera issues were mentioned at the start.

Recruitment logistics

Candidate has other offers and a short deadline to decide (mentions of deadlines such as Wednesday/Friday).
Candidate prioritizes team and project fit over a modest salary difference.

Browser internals

The interview covered the typical sequence of steps and internals involved when a page loads and renders:

DNS lookup and caching.
Server connection and retrieval of resources (HTML/CSS/JS).
Rendering pipeline:
- DOM and CSSOM creation.
- Layout (calculating boxes, widths/heights).
- Painting and compositing.
Reflows/repaints are triggered when styles or layout change.
Caching behavior (browser caches resources to avoid repeated network lookups).

Storage and cookies

localStorage vs sessionStorage:
- localStorage: persistent across sessions.
- sessionStorage: persists until the tab/window is closed.
Typical size limits:
- Storage APIs like localStorage/sessionStorage are commonly around ~5 MB (browser dependent).
- Cookies are much smaller (~4 KB).
Cookies:
- Can be set by the server.
- Can be flagged Secure and HttpOnly for authentication/security.

CSS

Specificity hierarchy discussed (simplified):
- Inline styles > ID selectors > class/attribute/pseudo‑class selectors > element selectors.
Use of pseudo‑classes and complex selectors:
- Candidate worked through a task to target the last link without a tabindex inside a menu, relying on :last-child and :not() patterns and occasionally consulting docs for exact syntax.
Other notes:
- Pointer-related CSS properties were mentioned.
- Candidate prefers minimal use of SVG when possible.

Event handling and propagation

Event propagation concepts:
- Capturing phase (top → target) vs bubbling phase (target → top).
- stopPropagation() can prevent further bubbling.
Candidate demonstrated understanding of when to use capturing vs bubbling and how to stop propagation.

JavaScript history and features

Candidate recalled many ES features (modules, arrow functions, generators, etc.).
Not focused on reciting exact ECMAScript version numbers, but showed general familiarity with language evolution.

Data types and copying

Primitives vs reference types:
- Primitives are copied by value.
- Objects and arrays are copied by reference.
Practical implications:
- Be careful with shared references; shallow vs deep cloning matters to avoid unintended shared mutations.

Asynchrony and the event loop

Basic event loop concepts covered:
- Call stack.
- Microtasks (examples: Promises, Mutation Observers).
- Macrotasks (examples: setTimeout, setInterval).
Execution order:
- Synchronous code runs first.
- Microtasks run next (microtask queue is drained before the next macrotask).
- Macrotasks run after microtasks.
Candidate walked through a console ordering example — showed overall understanding but had minor confusion about exact ordering details in that example.