Вопросы на собеседовании frontend-разработчика на английском

Пример ответа · EN

The browser resolves the domain through DNS, opens a connection with TLS and sends an HTTP request. It parses the HTML into the DOM and the CSS into the CSSOM, then builds the render tree. After layout and paint, the page appears. I usually go deeper into the step that matters for the problem, such as a slow server response.

Пример ответа · EN

Both attributes let the HTML parser continue while the script downloads. A deferred script runs after parsing finishes, in document order, so I use defer for application code that needs the DOM. An async script runs as soon as it loads, in any order, which suits independent scripts such as analytics. For classic scripts, both work only with an external src.

Пример ответа · EN

When several rules target the same element, the browser compares their selectors by weight: IDs first, then classes, attributes and pseudo-classes, then element types. The higher weight wins, and if the weights are equal, the later rule wins. Origin, !important and cascade layers are checked before specificity. I keep selectors flat so that overrides stay predictable.

Пример ответа · EN

A stacking context is a group of elements that is layered as one unit. It is created by the root element, by a positioned element with a z-index other than auto, and by properties such as opacity below one, transform or isolation: isolate. Children inside it cannot rise above elements outside the group, whatever their z-index is. That explains many bugs where z-index seems to do nothing.

Пример ответа · EN

Flexbox lays out items along one axis, so I use it for toolbars, button groups and lists that wrap. Grid controls rows and columns together, which suits page layouts and card grids that must align in both directions. They work well together: a Grid layout can contain Flexbox components. I decide by whether alignment is needed in one direction or two.

Пример ответа · EN

For font sizes, an em is relative to the parent element, so nested components can grow or shrink unexpectedly. A rem is relative to the root element, which keeps sizes consistent across the page. Both respect the user's browser font settings better than fixed pixels. I still use em for padding that should scale with a component's own text.

Пример ответа · EN

A closure is a function together with the variables from the scope where it was created. The function keeps access to those variables even after the outer function has returned. For example, a counter factory can return a function that increments a private count. I use closures for private state and callbacks, but I watch for large objects kept alive by mistake.

Пример ответа · EN

For a regular function, this depends on how the function is called. A method call sets it to the object before the dot, call, apply and bind set it explicitly, and new sets it to the new instance. In strict mode, a plain call leaves it undefined. Arrow functions do not have their own this; they take it from the surrounding scope.

Пример ответа · EN

The var keyword is function-scoped and its declaration is hoisted, so it can be read as undefined before the assignment. Both let and const are block-scoped, and accessing them before the declaration throws an error because of the temporal dead zone. The const keyword prevents reassignment, but an object stored in it can still change. I use const by default and let when the value changes.

Пример ответа · EN

After the current script finishes, the event loop runs all queued microtasks before it takes the next task. Promise reactions are microtasks, while a setTimeout callback is a task, even with a zero delay. So a then callback runs first. This matters when code relies on timing, and it is also why an endless chain of microtasks can block rendering.

Пример ответа · EN

Most events bubble up from the target to its ancestors. With delegation, I attach one listener to a parent and use event.target to find the child that was clicked. That avoids adding a listener to every item and also works for items added later. I use closest() so that clicks on nested elements are handled correctly.

Пример ответа · EN

Each object has an internal link to a prototype object. When a property is not found on the object itself, JavaScript looks it up along the prototype chain until it reaches null. The class syntax is built on the same mechanism: methods live on the prototype and are shared by instances. That is why changing a prototype affects every object linked to it.

Пример ответа · EN

Browsers apply the same-origin policy, so by default a script cannot read a response from another origin. CORS lets the server allow it with headers such as Access-Control-Allow-Origin. For requests that are not simple, the browser first sends a preflight OPTIONS request. The fix belongs on the server; disabling checks in the browser only hides the problem locally.

Пример ответа · EN

I would record a profile in the browser's Performance panel while scrolling and look for long tasks and dropped frames. Then I check whether the time goes to JavaScript, layout or paint. Common causes are heavy scroll handlers, forced layout in a loop and large repaints. I fix the main cause and measure again instead of applying every optimisation at once.

Пример ответа · EN

Server-Sent Events send a one-way stream of text messages from the server over plain HTTP, and the browser reconnects automatically. WebSockets provide a two-way channel, which suits chats, collaborative editing or games. For a live feed of notifications, I would start with SSE because it is simpler to run. I choose WebSockets when the client must send frequent messages too.

Пример ответа · EN

A label gives the input an accessible name, so screen readers announce what the field is for. It also makes the label clickable, which enlarges the target on touch screens. I connect them with the for attribute or by wrapping the input. A placeholder is not a replacement, because it disappears once the user starts typing.

Пример ответа · EN

I use a visually-hidden utility class that clips the element to one pixel and takes it out of the layout without display: none. Both display: none and visibility: hidden remove content from the accessibility tree. For icon buttons, an aria-label can also provide the name. I check the result with a screen reader rather than relying on the code alone.