Frontend Interview Preparation Guide

This guide covers essential topics for frontend interviews, focusing on conceptual understanding rather than coding challenges. It’s designed to help you prepare for interviews at companies like Kuaishou that focus on React, Next.js, and general frontend knowledge.

HTML & CSS Fundamentals

Critical Rendering Path

• Document Object Model (DOM): How browsers parse HTML into a tree structure
• CSS Object Model (CSSOM): How CSS is processed
• Render Tree: Combination of DOM and CSSOM
• Layout/Reflow: Calculating element positions and dimensions
• Paint: Filling in pixels
• Composite: Layering elements in the correct order

CSS Specificity

• Specificity hierarchy: Inline styles > IDs > Classes/attributes/pseudo-classes > Elements
• Calculating specificity: 1-0-0-0 for inline, 0-1-0-0 for ID, 0-0-1-0 for class, 0-0-0-1 for element
• !important: Overrides normal rules but should be avoided

Box Model

• Content, padding, border, and margin: How they affect element sizing
• box-sizing: content-box vs. border-box
• Collapsing margins: When and why vertical margins collapse

Positioning and Layout

• Static, relative, absolute, fixed, sticky: Different positioning methods
• Flexbox: Main axis, cross axis, flex-grow, flex-shrink, flex-basis
• Grid: Templates, areas, auto-placement, fractional units
• Media queries: Responsive design implementation

CSS Preprocessors

• Sass/SCSS: Variables, nesting, mixins, partials, inheritance
• Less: Similar to Sass with different syntax
• Benefits: Maintainability, reusability, organization

JavaScript Core Concepts

Closures

• Definition: Function + lexical environment where it was declared
• Use cases: Data privacy, partial application, maintaining state
• Memory implications: Preventing memory leaks

function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Scope

• Global scope: Variables available throughout code
• Function scope: Variables defined within functions
• Block scope: Variables defined within blocks (let, const)
• Lexical scope: How nested functions access variables from parent scopes

Prototypes and Inheritance

• Prototype chain: How JavaScript objects inherit properties
• Constructor functions: Creating objects with shared methods
• Object.create(): Creating objects with specific prototypes
• Class syntax: Syntactic sugar over prototypal inheritance

// Prototypal inheritance
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  return `Hello, my name is ${this.name}`;
};

// Class syntax (ES6+)
class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    return `Hello, my name is ${this.name}`;
  }
}

this Keyword

• Global context: this refers to the global object
• Function context: Depends on how the function is called
• Method context: this refers to the object the method belongs to
• Arrow functions: this is lexically bound to surrounding context
• Binding methods: bind(), call(), apply()

Event Loop and Asynchronous JavaScript

• Call stack: Where function calls are tracked
• Task queue: Where callbacks from async operations wait
• Microtask queue: Higher priority queue (Promises)
• Event loop algorithm: How tasks get moved to the call stack
• setTimeout, Promises, async/await: Different ways to handle async code

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

// Output: Start, End, Promise, Timeout

ES6+ Features

• let/const: Block-scoped variables
• Arrow functions: Shorter syntax and lexical this
• Template literals: String interpolation
• Destructuring: Extracting values from objects and arrays
• Spread/rest: Working with multiple values
• Default parameters: Fallback values for function arguments
• Classes: Syntactic sugar for constructor functions
• Modules: Import/export syntax
• Optional chaining: Safe access to nested properties obj?.prop?.field
• Nullish coalescing: Default values only for null/undefined value ?? default

DOM and Browser APIs

DOM Manipulation

• Selectors: getElementById, querySelector, etc.
• Creating/modifying elements: createElement, appendChild, innerHTML, textContent
• Event handling: addEventListener, event delegation, bubbling vs. capturing
• Performance concerns: Batch DOM updates, documentFragment

Browser Storage

• Cookies: Small, sent with HTTP requests, security concerns
• localStorage: Persistent, larger capacity (5MB), synchronous
• sessionStorage: Cleared when session ends
• IndexedDB: For larger structured data
• Cache API: Used with Service Workers

Browser Rendering Performance

• Layout thrashing: Forcing multiple reflows
• Debouncing and throttling: Limiting frequent events
• requestAnimationFrame: Syncing with the browser’s rendering cycle
• Web Workers: Offloading heavy computation

React Deep Dive

Virtual DOM

• Concept: Lightweight representation of the actual DOM
• Reconciliation: How React efficiently updates the DOM
• Fiber architecture: Enables concurrent mode and time-slicing
• Keys: How React tracks element identity

Component Types

• Function vs. Class components: Different approaches, same result
• Pure components: Automatic shallow comparison optimization
• Higher-order components (HOCs): Functions that enhance components
• Render props: Sharing code via props
• Compound components: Related components that work together

State Management

• Component state: Local state within components
• Lifting state up: Sharing state between components
• Context API: Avoiding prop drilling
• Redux: Predictable state container
  • Actions, reducers, store, middleware
  • Redux Toolkit simplifications
• Zustand/Recoil/Jotai: Modern alternatives

Hooks

• useState: Managing local state
• useEffect: Side effects (data fetching, subscriptions)
• useContext: Consuming React context
• useReducer: Complex state logic
• useCallback/useMemo: Performance optimizations
• useRef: Persisting mutable values
• Custom hooks: Extracting reusable logic

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

React Performance Optimization

• Preventing unnecessary renders: React.memo
• Code splitting: React.lazy and Suspense
• Virtualization: Efficiently rendering large lists
• Web Vitals: Core Web Vitals metrics in React applications
• React Profiler: Identifying performance bottlenecks

React Router

• Declarative routing: Managing navigation in SPAs
• Route parameters and query strings: Accessing URL data
• Nested routes: Creating complex layouts
• Navigation guards: Preventing unauthorized access
• Code-splitting at route level: Reducing bundle size

Next.js Concepts

Rendering Methods

• Server-side rendering (SSR): getServerSideProps
• Static site generation (SSG): getStaticProps, getStaticPaths
• Incremental Static Regeneration (ISR): Revalidation
• Client-side rendering: When to use it
• Server Components vs. Client Components: Next.js 13+ App Router

Data Fetching Strategies

• API routes: Creating backend endpoints
• SWR/React Query: Data fetching and caching
• GraphQL integration: Working with Apollo or Relay
• Serverless functions: Using Next.js as a backend

Advanced Next.js Features

• Image optimization: next/image
• Middleware: Customizing request handling
• Internationalization: Multi-language support
• Authentication patterns: Various approaches
• Deployment strategies: Vercel vs. self-hosting

Network and Protocols

HTTP

• Request/response cycle: How web communication works
• HTTP methods: GET, POST, PUT, PATCH, DELETE
• Status codes: 200s, 300s, 400s, 500s
• Headers: Content-Type, Authorization, Cache-Control

HTTP/2 and HTTP/3

• Multiplexing: Multiple requests over one connection
• Server push: Proactively sending resources
• Header compression: Reducing overhead
• QUIC protocol: UDP-based transport (HTTP/3)

RESTful Services

• Resource-oriented architecture: Designing APIs
• Statelessness: No client session on server
• HATEOAS: Hypermedia as the engine of application state
• GraphQL alternatives: Different approach to APIs

Caching

• Browser cache: Cache-Control, ETag, Last-Modified
• CDN caching: Edge distribution of assets
• Service Worker cache: Offline capabilities
• Cache invalidation strategies: Time-based, version-based

CORS

• Same-origin policy: Security restriction
• Cross-Origin Resource Sharing: Controlled relaxation
• Preflight requests: OPTIONS method for complex requests
• Credentials: Including cookies in cross-origin requests

Web Security

XSS (Cross-Site Scripting)

• Stored XSS: Malicious script stored on server
• Reflected XSS: Script included in request
• DOM-based XSS: Vulnerability in client-side code
• Prevention: Content Security Policy, sanitization, escaping

CSRF (Cross-Site Request Forgery)

• Attack mechanism: Tricking users into unwanted actions
• Prevention: CSRF tokens, SameSite cookies
• Double Submit Cookie: Additional protection layer

Authentication Best Practices

• JWT: Structure, signing, common pitfalls
• OAuth 2.0/OpenID Connect: Delegated authentication
• Secure cookies: HttpOnly, Secure, SameSite flags
• Multi-factor authentication: Additional security layer

Content Security Policy

• Script-src: Controlling JavaScript sources
• Frame-ancestors: Preventing clickjacking
• Report-uri: Monitoring violations
• Implementation: Headers vs. meta tags

Performance Optimization

Core Web Vitals

• Largest Contentful Paint (LCP): Loading performance
• First Input Delay (FID): Interactivity
• Cumulative Layout Shift (CLS): Visual stability
• Interaction to Next Paint (INP): Responsiveness to interactions

Resource Optimization

• Images: Format selection, compression, responsive images
• JavaScript: Bundling, code splitting, tree shaking
• CSS: Critical CSS, removing unused styles
• Fonts: Font loading strategies, subset embedding

Caching Strategies

• HTTP caching: Cache-Control, ETag
• Service Worker caching: Cache API, strategies
• Application state caching: Memoization, persistent storage

Lazy Loading

• Images and iframes: Native lazy loading
• Components: Dynamic imports with React.lazy
• Routes: Code splitting in routers
• Intersection Observer API: Custom lazy loading

Performance Measurement

• Lighthouse: Automated audits
• Chrome DevTools: Performance panel, Memory panel
• Web Vitals measurement: Real User Monitoring (RUM)
• Custom performance marks: Performance API

Frontend Architecture

Component Design

• Atomic design: Atoms, molecules, organisms, templates, pages
• Micro-frontends: Breaking monoliths into smaller apps
• Design systems: Consistent UI/UX across applications
• Component libraries: Building reusable component collections

State Management Approaches

• Centralized vs. distributed: Different paradigms
• Unidirectional data flow: Predictable state changes
• Immutability: Benefits for state management
• Reactive programming: Working with observable streams

Testing Strategies

• Unit testing: Testing isolated components
• Integration testing: Testing component interactions
• End-to-end testing: Testing entire flows
• Testing Library, Jest, Cypress: Popular tools
• Test-driven development: Writing tests before implementation

// React Testing Library example
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter when button is clicked', () => {
  render(<Counter />);
  
  const button = screen.getByRole('button', { name: /increment/i });
  const counter = screen.getByText(/count: 0/i);
  
  fireEvent.click(button);
  
  expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});

Build Tools and Module Bundlers

• Webpack, Vite, esbuild: Different bundling approaches
• Babel: JavaScript transpilation
• PostCSS: CSS transformations
• Code splitting: Optimizing bundle size
• Production optimizations: Minification, compression

CI/CD for Frontend

• Continuous integration: Automated testing on commits
• Continuous deployment: Automated deployments
• Preview environments: Testing changes before production
• A/B testing infrastructure: Testing features with real users

Behavioral Interview Preparation

Talking About Past Projects

• STAR method: Situation, Task, Action, Result
• Focus on impact: Business value of your work
• Technical challenges: How you overcame difficulties
• Collaboration: Working with other teams/disciplines

System Design Questions

• Requirements gathering: Clarifying the problem
• User flows: Mapping out user interactions
• Architecture decisions: Explaining your choices
• Trade-offs: Acknowledging limitations
• Scalability considerations: Planning for growth

Common Frontend Design Questions

• News feed design: Infinite scrolling, updates
• Chat application: Real-time considerations
• E-commerce product page: Performance, accessibility
• Dashboard with real-time updates: Data visualization

Culture Fit Questions

• Teamwork examples: Collaboration stories
• Conflict resolution: Handling disagreements
• Learning approach: How you stay updated
• Work style preferences: Remote/office, communication

Interview Preparation Checklist

Before the Interview

• Research the company and their products
• Review the job description for required skills
• Prepare questions to ask interviewers
• Review recent portfolio projects
• Practice explaining technical concepts simply
• Set up your environment for potential coding exercises

Technical Review

• HTML semantics and accessibility
• CSS layouts and responsive design
• JavaScript core concepts
• React fundamentals and patterns
• Performance optimization techniques
• Browser APIs and DOM manipulation
• Network requests and REST APIs
• State management approaches

Mock Interview Practice

• Technical explanation practice
• Whiteboarding practice
• Coding exercise practice
• System design practice
• Behavioral question practice

Common Interview Questions

HTML & CSS

1. How does the browser’s rendering engine work?
2. Explain the CSS box model.
3. How would you make a website responsive?
4. What are the different ways to visually hide content?
5. Explain CSS specificity and the cascade.

JavaScript

1. What is closure and how would you use it?
2. Explain event delegation.
3. What is the difference between == and ===?
4. How does prototypal inheritance work?
5. Explain the event loop in JavaScript.
6. What is hoisting?
7. Explain async/await and how it relates to Promises.

React

1. How does the Virtual DOM work?
2. Explain the component lifecycle (or hooks equivalents).
3. What are keys in React and why are they important?
4. How would you optimize a React application’s performance?
5. What is the difference between state and props?
6. Explain context API and when you would use it.
7. How do you handle side effects in React?

Next.js

1. Explain the different rendering methods in Next.js.
2. How does Next.js handle routing?
3. What are API routes in Next.js?
4. Explain the purpose of _app.js and _document.js.
5. How would you implement authentication in a Next.js app?

Web Performance

1. How would you diagnose and fix performance issues?
2. Explain Core Web Vitals and how to improve them.
3. What techniques would you use to optimize loading times?
4. How does code splitting improve performance?
5. Explain browser caching and how to leverage it.

Architecture & Design

1. How would you structure a large-scale React application?
2. What state management approach would you use and why?
3. How would you design a component library?
4. Explain your testing strategy for a frontend application.
5. How would you handle API integration in a frontend application?

Final Tips

1. Be honest about your knowledge: It’s okay to say “I don’t know” and explain how you would find the answer.
2. Think aloud: Explain your thought process during coding or design questions.
3. Ask clarifying questions: Ensure you understand what the interviewer is asking.
4. Show enthusiasm: Demonstrate your passion for frontend development.
5. Follow up: Send a thank you email and address any questions you felt you could have answered better.

---

Remember that interviews are also an opportunity for you to evaluate the company. Prepare thoughtful questions about their technology stack, development processes, and team culture to determine if it’s the right fit for you.