Common Interview Questions
Easy
What is the role of HTML in a web application?
HTML defines the structure and semantic meaning of content on a web page. It provides elements like headings, forms, and links that the browser parses into the DOM. CSS and JavaScript then enhance presentation and behavior.
What is CSS responsible for?
CSS controls layout, styling, and visual presentation of HTML elements. It separates concerns by keeping styling independent from structure. Modern CSS also handles responsiveness, animations, and theming.
What is JavaScript primarily used for in the browser?
JavaScript enables dynamic behavior and interactivity in web pages. It can manipulate the DOM, handle events, and communicate with servers asynchronously. It runs in a single-threaded environment with an event loop.
What is the DOM?
The DOM is a tree-like, in-memory representation of the HTML document. Browsers expose it as an API that JavaScript can read and modify. Changes to the DOM are reflected visually after rendering.
What is an event in the browser?
An event represents a user or system action, such as a click or network response. Events propagate through the DOM via capturing and bubbling phases. Event listeners allow code to react to these events.
What is responsive design?
Responsive design ensures a UI adapts to different screen sizes and devices. It relies on flexible layouts, media queries, and relative units. The goal is usability across desktop, tablet, and mobile.
What is a browser?
A browser is a client application that fetches, parses, and renders web content. It includes components like a networking layer, JavaScript engine, and rendering engine. Browsers enforce security boundaries such as the same-origin policy.
What is a HTTP request in frontend context?
The frontend issues HTTP requests to fetch data or resources from servers. These are typically made using APIs like fetch or XMLHttpRequest. Responses are handled asynchronously.
What is a script tag?
A script tag tells the browser to load and execute JavaScript. Scripts can be inline or external. Their placement and attributes affect execution order and performance.
What is accessibility (a11y)?
Accessibility ensures applications are usable by people with disabilities. It involves semantic HTML, keyboard navigation, and assistive technology support. Many requirements are enforced by standards like WCAG.
Medium
What is the browser rendering pipeline?
The pipeline includes parsing HTML into the DOM, CSS into the CSSOM, and combining them into a render tree. Layout calculates element geometry, and paint draws pixels. Performance issues often arise from layout thrashing or excessive repainting.
What is the JavaScript event loop?
The event loop coordinates execution of synchronous code, microtasks, and macrotasks. It allows JavaScript to handle async operations despite being single-threaded. Promise callbacks run before timer callbacks.
What is CORS and why does it exist?
CORS controls cross-origin HTTP requests initiated by browsers. It prevents unauthorized access to resources across origins. Servers explicitly allow origins via response headers.
What is state in frontend applications?
State represents mutable data that affects UI rendering. Changes to state trigger re-renders in most frameworks. Poor state management leads to bugs and performance issues.
What is the difference between localStorage and cookies?
localStorage stores key-value data entirely on the client with no automatic server transfer. Cookies are sent with HTTP requests and can be scoped and secured. Cookies are commonly used for authentication.
What is a SPA?
A Single Page Application loads a single HTML document and updates the UI dynamically. Navigation is handled client-side without full page reloads. This shifts complexity from the server to the browser.
What is hydration?
Hydration attaches JavaScript behavior to server-rendered HTML. It allows fast initial render while enabling interactivity. Mismatches between server and client output can cause errors.
What are web APIs?
Web APIs are browser-provided interfaces like DOM, Fetch, and Storage. They are not part of the JavaScript language itself. JavaScript acts as the glue to access these capabilities.
What is debouncing vs throttling?
Debouncing delays execution until events stop firing. Throttling limits execution to a fixed interval. Both are used to control high-frequency events like scrolling.
What is semantic HTML?
Semantic HTML uses elements that convey meaning, not just structure. Examples include article, nav, and button. It improves accessibility, SEO, and maintainability.
Hard
What causes layout thrashing?
Layout thrashing happens when code repeatedly reads and writes layout-affecting properties. This forces the browser to recalculate layout multiple times per frame. It severely degrades performance.
How does the same-origin policy work?
The same-origin policy restricts access between resources from different origins. An origin is defined by scheme, host, and port. It is a core browser security mechanism.
What are microtasks and macrotasks?
Macrotasks include timers and I/O callbacks, while microtasks include promise reactions. After each macrotask, all microtasks are drained. This ordering affects async control flow.
What are reflows and repaints?
Reflow recalculates layout, while repaint redraws pixels without layout changes. Reflows are more expensive than repaints. Efficient UIs minimize both.
How does garbage collection impact frontend performance?
Garbage collection pauses can block the main thread. Excessive allocations increase GC pressure. Long-lived objects and closures can cause memory leaks.
What is tree shaking?
Tree shaking removes unused code during bundling. It relies on static analysis of ES modules. Poor module design can prevent effective tree shaking.
What are web workers?
Web workers run JavaScript in background threads. They cannot access the DOM directly. They are used for CPU-intensive tasks to keep the UI responsive.
What is critical rendering path optimization?
It focuses on minimizing resources needed for initial render. Techniques include code splitting and inlining critical CSS. The goal is faster time-to-first-paint.
How does browser caching work?
Browsers cache resources based on HTTP headers. Cache validation uses ETag or Last-Modified headers. Incorrect caching leads to stale or redundant downloads.
What are hydration mismatches?
Hydration mismatches occur when server-rendered HTML differs from client output. They can cause warnings or full re-renders. Common causes include non-deterministic rendering.