Frontend General Questions

Browser & Rendering

1. What happens when you type a URL in the browser and press Enter?

1. DNS lookup — converts the domain name to an IP address.
2. TCP connection — the browser establishes a connection to the server (with TLS handshake for HTTPS).
3. HTTP request — the browser requests the HTML file.
4. HTML parsing — the browser parses HTML top to bottom, building the DOM tree.
5. CSS parsing — CSS files are downloaded and parsed into the CSSOM tree.
6. JavaScript execution — scripts are downloaded and run (blocking if not deferred/async).
7. Render tree — DOM + CSSOM = render tree (visible elements only).
8. Layout — calculate position and size of each element.
9. Paint — fill in pixels on screen.
10. Compositing — layers are combined.

2. What is the critical rendering path?

The sequence of steps the browser takes to render the first frame: parse HTML → parse CSS → run JavaScript → build render tree → layout → paint. Optimising the critical rendering path (minimising render-blocking resources, reducing critical CSS, deferring scripts) directly improves the time until the user sees something meaningful.

3. What is reflow and repaint?

A reflow (layout) happens when the browser recalculates positions and sizes — triggered by adding/removing DOM elements, changing sizes, and reading layout properties like offsetHeight. A repaint happens when visual properties change (colour, background) without layout changes. Reflow is expensive; batch DOM changes together and avoid reading layout properties in loops to prevent "layout thrashing".

4. What is CORS?

Cross-Origin Resource Sharing is a browser security mechanism that restricts JavaScript from making HTTP requests to a different origin (protocol + domain + port) than the page's own origin. The server explicitly allows cross-origin requests by including Access-Control-Allow-Origin headers in the response. CORS is enforced by the browser — it does not apply to server-to-server requests.

Performance

5. What are Core Web Vitals?

Google's metrics for measuring user experience:

• LCP (Largest Contentful Paint) — how fast the largest visible element loads. Target: under 2.5s.
• FID (First Input Delay) / INP (Interaction to Next Paint) — responsiveness to user interaction. Target: under 200ms.
• CLS (Cumulative Layout Shift) — how much the layout unexpectedly shifts. Target: under 0.1. Caused by images without dimensions, dynamically injected content.

6. How would you optimise a slow web page?

Common optimisations:

• Compress and serve images in modern formats (WebP, AVIF)
• Add width and height attributes to images to prevent CLS
• Use loading="lazy" on below-the-fold images
• Minify and bundle CSS/JS
• Use a CDN for static assets
• Add defer or async to scripts
• Enable HTTP caching (cache-control headers)
• Reduce third-party scripts
• Use font-display: swap for web fonts

7. What is lazy loading?

Lazy loading defers loading resources (images, scripts, components) until they are needed — usually until they scroll near the viewport. For images: <img loading="lazy"> is native and widely supported. For JavaScript modules: dynamic import() loads a module only when needed. Lazy loading reduces initial page load time and saves bandwidth for content the user may never see.

8. What is debouncing and throttling?

Debouncing delays a function's execution until a certain time has passed since the last call. Useful for search inputs — wait until the user stops typing before making an API request. Throttling ensures a function runs at most once per specified interval regardless of how many times it's called. Useful for scroll events and window resize handlers.

Security

9. What is XSS and how do you prevent it?

Cross-Site Scripting (XSS) is an attack where malicious JavaScript is injected into a web page and executed in victims' browsers. Prevention: never use innerHTML with user-supplied data — use textContent instead. Also: Content Security Policy (CSP) headers, sanitise HTML on the server if rich text is needed, encode output, use frameworks that escape by default.

10. What is CSRF and how do you prevent it?

Cross-Site Request Forgery tricks an authenticated user's browser into making unintended requests (e.g. a malicious page submitting a hidden form to your bank). Prevention: CSRF tokens (unique token per session included in forms), SameSite=Strict cookies (prevent cookies from being sent in cross-site requests), verify the Origin header on the server.

11. What should you never store in localStorage?

Never store authentication tokens, passwords, session IDs, or any sensitive personal data in localStorage. It is accessible via JavaScript — any XSS attack can read everything in localStorage. Use HttpOnly secure cookies for authentication tokens instead (not accessible to JavaScript).

12. What is Content Security Policy?

CSP is an HTTP header that tells the browser which sources of content (scripts, styles, images) are trusted and allowed to load. It is one of the most effective defences against XSS — even if an attacker injects a <script> tag, the browser blocks it if the source is not in the policy. Example: Content-Security-Policy: script-src 'self' only allows scripts from the same origin.

Tooling & Ecosystem

13. What is npm and what does package.json contain?

npm (Node Package Manager) is the registry and CLI for installing JavaScript packages. package.json describes a project: its name, version, scripts (e.g. npm run build), dependencies (packages needed to run), and devDependencies (packages needed only during development). package-lock.json locks exact dependency versions for reproducible installs.

14. What is a bundler? Name some examples.

A bundler takes your JavaScript modules and their dependencies and combines them into a small number of optimised output files. It also transforms code (TypeScript, JSX), tree-shakes unused code, and processes CSS. Examples: Vite (modern, fast), webpack (powerful, widely used), Rollup (great for libraries), Parcel (zero-config).

15. What is the difference between a library and a framework?

A library is a collection of functions/tools you call from your code — you control the application flow (e.g. React is often called a library). A framework provides the structure and calls your code according to its conventions — it controls the flow ("inversion of control") (e.g. Angular, Next.js). The distinction matters less with modern tools that blur the line.

Behavioural Questions

16. Tell me about a time you fixed a difficult bug.

What they want to know: your debugging process, persistence, and ability to communicate the problem and solution. Mention: how you reproduced it, what tools you used (DevTools, console, git bisect), your hypothesis and testing process, and the fix. Mention what you learned to prevent it in future.

17. How do you stay up to date with frontend development?

What they want to know: genuine interest and self-improvement habits. Good answers include: following MDN updates, reading changelogs, specific newsletters (CSS-Tricks, Frontend Focus, JavaScript Weekly), building side projects with new technologies, Twitter/X developers you follow, YouTube channels.

18. How do you handle a disagreement with a colleague about a technical approach?

What they want to know: collaboration, communication, and maturity. Good answer: listen to understand their reasoning, explain your own with specifics (not just opinions), propose a small experiment or prototype to compare approaches objectively, and ultimately defer to the team decision even if not your preference.

19. Describe your process when you get a new feature to build.

What they want to know: planning, communication, and quality mindset. Good answer: understand requirements fully (ask clarifying questions), break it into smaller tasks, consider edge cases and error states, write the code with tests, review your own diff before PR, and communicate progress.

20. What do you find most challenging about frontend development?

What they want to know: self-awareness and honesty. Pick a real challenge and — crucially — explain how you are working to improve it. Bad answer: "nothing, I find it all easy." Good answers: browser compatibility, accessibility, performance optimisation, keeping up with the pace of change.