Frontend Interview Core Knowledge: 7 Modules from Basics to Advanced

The Assessment Logic of Frontend Technical Interviews

In technical interviews, frontend positions can never be passed by simply memorizing questions. What interviewers truly want to see is your depth of understanding of the knowledge system and your ability to solve problems in real-world scenarios. Many candidates treat frontend interview questions as a checklist to memorize item by item, overlooking that interviewers care more about whether you can connect scattered knowledge into a coherent system.

The assessment logic of frontend technical interviews can be summarized in three layers: whether your foundational knowledge is solid, whether your understanding of principles is deep, and whether your engineering practice shows thoughtful consideration. Foundational knowledge determines if you can do the work, understanding of principles determines if you can troubleshoot, and engineering thinking determines if you can make architectural decisions.

This article systematically breaks down the 7 most core modules in frontend development interviews, organizing high-frequency topics, answering strategies, and common follow-up questions for each module, helping you build a complete knowledge map from basics to advanced.

Module 1: JavaScript Core — Scope, Closures, Prototype Chain

Scope and Scope Chain

Scope is one of the highest-frequency topics in JavaScript interviews. JavaScript uses lexical scope (static scope), meaning a function's scope is determined at definition time, not at call time.

• Global scope: Variables defined at the outermost level have global scope and can be accessed anywhere
• Function scope: Variables defined inside a function can only be accessed within that function; the outside cannot directly access them
• Block scope: Variables declared with let and const have block scope, valid only within {}; var does not have block scope

The essence of the scope chain is the variable lookup path: when not found in the current scope, search continues up the outer scopes defined at creation time until reaching the global scope. A classic interview question is the difference between var and let in for loops — var causes all iterations to share the same variable, while let creates a separate binding for each iteration.

Closures

Closures are a must-know topic in frontend interview questions. Definition: a closure is formed when a function is bundled with its lexical environment reference, allowing the function to access variables from its outer scope even after the outer function has finished executing.

Core use cases for closures:

• Data encapsulation and private variables: Simulate private variables; the outside can only access them through exposed methods
• Function factories: Generate functions with specific behaviors based on parameters
• Callbacks and event handling: Maintain references to outer variables in asynchronous operations
• Module pattern: Use IIFE to create modules, exposing public APIs while hiding internal implementation

Common interview follow-up: Do closures cause memory leaks? The answer is no, not directly. But if a closure references unnecessary variables and remains alive for a long time, those variables cannot be garbage collected. The solution is to set references to null when no longer needed.

Prototype Chain

The prototype chain is the underlying mechanism for implementing inheritance in JavaScript. Every object has a __proto__ pointing to its constructor's prototype, forming a chain lookup path.

• Property lookup: When accessing an object property, first check the object itself; if not found, search up the __proto__ chain until reaching null
• constructor: The prototype has a default constructor property pointing to the constructor function itself
• instanceof: Checks whether the constructor's prototype exists in the object's prototype chain

High-frequency interview follow-up: Objects created with Object.create(null) have no prototype, making them suitable as clean dictionary objects. The essence of the new operator is creating an empty object, setting the prototype, executing the constructor, and returning the object.

Module 2: CSS — Layout, BFC, Responsive Design

Layout Solutions

CSS layout is a fundamental topic in frontend development interviews. From traditional float to modern flex and grid, interviewers expect you to clearly explain the applicable scenarios and limitations of each approach.

• Float layout: The mainstream approach in early days, requires clearing floats, suitable for text wrapping scenarios, no longer recommended for overall layout
• Flex layout: The first choice for one-dimensional layout, controlling alignment via main axis and cross axis, suitable for component-level arrangement
• Grid layout: The first choice for two-dimensional layout, controlling rows and columns simultaneously, suitable for page-level overall layout
• Positioned layout: absolute and fixed remove elements from document flow, suitable for overlays, fixed elements, and other special scenarios

Common interview question: What does flex:1 mean? It's shorthand for flex-grow:1, flex-shrink:1, flex-basis:0%, meaning flexible distribution of remaining space.

BFC (Block Formatting Context)

BFC is a CSS topic with high differentiation in technical interviews. A BFC is an independent rendering area where the layout of internal elements does not affect the outside.

Common conditions that trigger a BFC:

• Root element html
• float is not none
• overflow is not visible (e.g., hidden, auto, scroll)
• display is inline-block, table-cell, flex, grid
• position is absolute or fixed

Core applications of BFC: clearing floats (parent element triggers BFC to contain floating children), preventing margin collapsing (adjacent block-level elements within the same BFC have their margins collapsed), preventing elements from being covered by floats.

Responsive Design

The core of responsive design is ensuring pages display well on different devices:

• Media queries: Apply different styles based on viewport width, the most basic responsive technique
• Flexible units: rem based on root element font size, vw/vh based on viewport dimensions, % based on parent element
• Flexible images: max-width:100% ensures images don't exceed their container
• Mobile-first: Write mobile styles first, then progressively enhance desktop styles via min-width

When preparing for frontend interviews, many candidates focus only on reviewing knowledge points and neglect how to present these technical capabilities on their resume. A good frontend resume should clearly showcase your tech stack depth and project experience — use our resume tool to quickly generate a professional resume that highlights your technical strengths, leaving a positive impression before the technical interview even begins.

Module 3: Browser Principles — Rendering, Event Loop, Caching

Rendering Process

Browser rendering is an increasingly important topic in JavaScript interviews. From entering a URL to page rendering completion, the core process is:

1. Parse HTML to build DOM tree: Bytes → Characters → Tokens → Nodes → DOM tree
2. Parse CSS to build CSSOM tree: Similar to DOM tree construction, processing CSS rules
3. Compose render tree: DOM and CSSOM merge, excluding invisible elements (display:none, head, etc.)
4. Layout: Calculate the position and size of each node in the render tree
5. Paint: Draw the laid-out elements onto the screen
6. Composite: Combine different layers into the final image

High-frequency interview follow-up: What's the difference between the DOM tree and the render tree? The render tree doesn't include invisible elements; visibility:hidden is retained in the render tree (takes up space), while display:none is not in the render tree (takes no space).

Event Loop

The event loop is one of the most differentiating topics in frontend interview questions. JavaScript is a single-threaded language that achieves asynchronous non-blocking through the event loop.

• Call stack: Synchronous code executes in the call stack, following last-in-first-out
• Microtasks: Promise.then, MutationObserver, queueMicrotask. After each macrotask executes, all microtasks are cleared
• Macrotasks: setTimeout, setInterval, I/O, UI rendering. One macrotask is taken from the queue each time

Execution order: synchronous code → clear all microtasks → next macrotask → clear all microtasks → loop. Interview questions often test the execution order of setTimeout and Promise — the key is remembering "microtasks take priority over the next macrotask."

Browser Caching

Browser caching strategies are divided into strong caching and negotiated caching:

• Strong caching: Cache-Control (max-age, no-cache, no-store) and Expires. When strong cache is hit, the local cache is used directly without sending a request
• Negotiated caching: Last-Modified/If-Modified-Since and ETag/If-None-Match. Send a request to verify if the resource has been updated; a 304 response means use the cache

Common interview question: no-cache doesn't mean "no caching" — it means skip strong caching and go directly to negotiated caching; no-store is what truly prevents caching.

Module 4: Framework Principles — React/Vue Core Mechanisms

Virtual DOM and Diff Algorithm

Virtual DOM is a core concept shared by both React and Vue. It uses JavaScript objects to describe DOM structure, minimizing real DOM operations by comparing differences between old and new virtual DOMs (Diff).

Three major strategies of the Diff algorithm:

• Tree-level comparison: Only compare nodes at the same level, no cross-level comparison
• Component-level comparison: Same-type components continue comparing subtrees; different types are directly replaced
• Element-level comparison: Child nodes at the same level are matched for reuse using key identifiers

High-frequency interview follow-up: Why do lists need keys? Keys help the Diff algorithm identify which elements can be reused, avoiding unnecessary unmounting and recreation. Using index as key can cause incorrect reuse when list items are added or removed; unique identifiers should be used instead.

React Core Mechanisms

Core React topics in frontend development interviews:

• Fiber architecture: Splits rendering work into small units, supporting interruption and priority scheduling, avoiding long blocking of the main thread
• Hooks principles: useState, useEffect, and other Hooks are stored as linked list structures on Fiber nodes; call order must be stable
• Synthetic events: React uses event delegation, binding events to the root node instead of DOM elements, managing and dispatching uniformly

Vue Core Mechanisms

Core Vue topics in technical interviews:

• Reactivity principles: Vue2 uses Object.defineProperty to intercept getters/setters; Vue3 switched to Proxy for full object interception
• Dependency collection: Collect dependencies (Watchers) in getters, trigger update notifications in setters
• nextTick: Places callbacks in the microtask queue, ensuring execution after DOM updates
• Compilation optimization: Vue3's static hoisting, patch flags, and block trees reduce Diff overhead

Module 5: Engineering — Webpack/Vite and Build Optimization

Webpack Core Concepts

Webpack is a key focus in the engineering module of frontend interviews. Core concepts:

• Entry: Build entry point; Webpack starts resolving the dependency graph from the entry
• Output: Output configuration, specifying the path and naming rules for bundled files
• Loader: File transformers; Webpack can only understand JS, Loaders enable it to handle CSS, images, and other resources
• Plugin: Plugin mechanism that executes custom logic at specific hooks in the build process
• Module: Everything is a module — JS, CSS, and images are all modules that participate in the dependency graph after Loader processing

Build Optimization Strategies

Build optimization is a key differentiator of engineering capability in frontend development interviews:

• Code splitting: SplitChunksPlugin extracts common dependencies; dynamic import enables route-level lazy loading
• Tree Shaking: Based on ES Module static analysis, removes unused exported code
• Cache optimization: contenthash naming ensures hash doesn't change when content is unchanged, enabling long-term caching with CDN
• Build speed: thread-loader for multi-threaded compilation, caching (cache-loader or Webpack5 persistent cache), exclude to narrow Loader processing scope

Why Is Vite Fast

Vite leverages native browser ES Modules in development mode, compiling on demand and starting without bundling. Production mode uses Rollup for bundling, combined with pre-bundling (esbuild) for third-party dependencies. Common interview comparison: Webpack is bundle-based (bundle first, then start), while Vite is native ESM-based (load on demand without bundling).

Module 6: Performance Optimization — Loading and Rendering Performance

Loading Performance Optimization

Loading performance directly affects the user's first-screen experience and is a must-test module in technical interviews:

• Resource compression: Gzip/Brotli compression for transfer, WebP/AVIF formats for images, CSS/JS code minification
• Lazy loading: Image lazy loading (Intersection Observer), route lazy loading, component lazy loading
• Preloading: preload for critical resources, prefetch for resources likely needed in the future, preconnect for early connection establishment
• CDN acceleration: Deploy static resources to CDN, reduce network latency, leverage browser parallel download capability
• HTTP/2: Multiplexing, header compression, server push, reducing connection overhead

Rendering Performance Optimization

Rendering performance determines the smoothness of page interactions:

• Reduce reflow and repaint: Batch DOM modifications, use transform instead of top/left, use visibility instead of display toggling
• Compositing layer optimization: will-change and transform create independent compositing layers, avoiding impact on other elements
• Virtual lists: Large data lists only render the visible area, reducing DOM node count
• Debounce and throttle: Use debounce or throttle for high-frequency events like scroll/resize to reduce execution frequency
• Web Worker: Offload computation-intensive tasks to Worker threads, avoiding main thread blocking

High-frequency interview follow-up: How to diagnose performance issues? Use Chrome DevTools Performance panel to record flame charts, analyzing long tasks, layout shifts, and memory leaks; Lighthouse generates performance scores and optimization suggestions.

Module 7: Networking — HTTP/HTTPS and Security

HTTP Protocol

HTTP is a fundamental topic in the networking module of frontend interview questions:

• HTTP/1.1: Persistent connections (Keep-Alive), pipelining (has head-of-line blocking issues), caching mechanisms
• HTTP/2: Binary framing, multiplexing (solves head-of-line blocking), header compression (HPACK), server push
• HTTP/3: Based on QUIC protocol (UDP), solves TCP-level head-of-line blocking, 0-RTT connection establishment

Common interview question: What's the difference between GET and POST? Semantically, GET retrieves resources and POST submits data; GET parameters are in the URL, POST parameters are in the request body; GET is cacheable, POST is not; but fundamentally they're both HTTP requests, and POST can also pass parameters via URL.

HTTPS

HTTPS = HTTP + TLS, core process:

1. TCP three-way handshake: Establish a reliable connection
2. TLS handshake: Verify server certificate, negotiate encryption algorithms, exchange keys
3. Encrypted communication: Use the negotiated symmetric key to encrypt transmitted data

High-frequency interview follow-up: Why does TLS use asymmetric encryption for key exchange and symmetric encryption for data transmission? Asymmetric encryption is secure but slow; symmetric encryption is fast but key distribution is insecure. Combining both leverages their respective strengths.

Frontend Security

Frontend security is an essential topic in technical interviews:

• XSS (Cross-Site Scripting): Injecting malicious scripts into pages. Defense: escape user input, use CSP (Content-Security-Policy) to restrict script sources, set HttpOnly to prevent Cookie reading
• CSRF (Cross-Site Request Forgery): Using logged-in state to send forged requests. Defense: verify Referer/Origin, use CSRF Token, set SameSite Cookie attribute
• Clickjacking: Transparent iframe overlay on legitimate buttons. Defense: set X-Frame-Options or CSP frame-ancestors

3 High-Scoring Strategies for Frontend Interviews

Strategy 1: Structure Your Answers

Interviews are not memorization contests — your answers should have structure. The best answering pattern in technical interviews is "general-specific-general": first summarize the core concept in one sentence, then expand on details in points, and finally summarize application scenarios or caveats. For example, when asked "what is a closure," don't start by reciting the definition. First say "closures allow functions to remember the scope they were defined in," then expand on principles and applications, and finally mention memory considerations.

Strategy 2: Proactively Connect to Project Experience

Purely theoretical answers only prove you "know about" something; connecting to project experience proves you've "used it." When answering each knowledge point, proactively say "I encountered this issue in the XX project, and my approach was..." This is more convincing than simply reciting standard answers and is exactly what interviewers want to hear.

Strategy 3: Demonstrate Depth of Thinking

The purpose of interviewers' follow-up questions is not to make things difficult for you, but to probe the boundaries of your understanding. When encountering a question you can't answer, don't just say "I don't know" and stop. Instead, say "My understanding is... but I'm not certain about this point, my reasoning is..." Showing your reasoning process is more valuable than giving a correct but hollow answer.

FAQ

How deeply do I need to prepare for frontend interviews?

It depends on the target company's tier. Small and medium companies focus on foundational knowledge and project experience, while major tech companies dig into principles and system design. The preparation strategy for frontend interviews is "comprehensive basics, deep principles, standout projects" — ensuring you don't lose points on basic questions, can expand on principle questions, and have compelling stories for project questions.

Which is more important: JavaScript fundamentals or framework principles?

JavaScript fundamentals are the foundation; framework principles are the bonus. In interviews, JS fundamental questions are mandatory, while framework principle questions are differentiators. We recommend ensuring solid JS fundamentals first (scope, closures, prototype chain, async, event loop), then diving deep into framework principles. Without solid JS fundamentals, you can't explain framework principles thoroughly either.

What should I do when asked about a topic I don't know in an interview?

Don't panic, and don't make things up. Honestly say "I'm not deeply familiar with this point," then try to reason from related knowledge you do know. In technical interviews, interviewers care more about your learning ability and thinking process than whether you can answer every question correctly. Proactively saying "I'll focus on studying this area afterward" is also a plus.

How do I showcase engineering capability in interviews?

Engineering capability can't be demonstrated through theory alone — you need to tie it to specific projects. For example: "I configured Webpack's SplitChunks in my project, extracting common dependencies into a separate chunk, reducing first-screen load time by 40%." Speaking with data is more convincing than simply describing configurations.

In frontend interviews, which carries more weight: coding problems or knowledge Q&A?

At major tech companies, it's typically about half and half. Coding problems test algorithmic thinking and coding ability, while knowledge Q&A tests technical depth and communication skills. Neither should be neglected. We recommend alternating practice: one day on algorithm problems, one day on knowledge review, ensuring both skills improve in tandem.

Preparing for technical interviews is a long-term effort that requires careful refinement from knowledge systems to project experience. A strong frontend resume can build the interviewer's confidence before the technical round even starts — use our resume generator to precisely present your technical skills and project achievements, giving your interview an edge.