# lgwebdream/fe-interview

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/lgwebdream-fe-interview).**

7,203 stars · 894 forks · JavaScript · NOASSERTION

## Links

- GitHub: https://github.com/lgwebdream/FE-Interview
- Homepage: https://lgwebdream.github.io/FE-Interview/
- awesome-repositories: https://awesome-repositories.com/repository/lgwebdream-fe-interview.md

## Topics

`angular` `css` `fe-interview` `frontend` `frontend-interview` `html` `interview` `interview-questions` `javascript` `js` `node` `react` `typescript` `vue`

## Description

This project is a comprehensive frontend interview preparation resource built around a question bank of over 1000 curated questions. It covers HTML, CSS, JavaScript, Vue, React, Node, TypeScript, Webpack, algorithms, and network security, with each question accompanied by a detailed answer explanation.

The content is organized into a hierarchical category tree for browsable exploration, and a daily question rotation algorithm presents one question per day for systematic review. A client-side search index enables instant filtering of questions by title or tag, and the entire question bank is pre-rendered into static HTML pages at build time for fast loading.

The project also includes a WeChat mini-program companion that delivers the interview practice experience directly on a smartphone, enabling mobile learning. Beyond the question bank, it provides hands-on JavaScript coding exercises for implementing core patterns like promises, debouncing, throttling, deep cloning, and function binding, along with reference materials on React lifecycle evolution, network and security concepts, and web performance optimization techniques.

## Tags

### Education & Learning Resources

- [Interview Question Banks](https://awesome-repositories.com/f/education-learning-resources/interview-question-banks.md) — Organizes all interview content around a central question bank with detailed answers and tags.
- [Detailed Answer Explanations](https://awesome-repositories.com/f/education-learning-resources/detailed-answer-explanations.md) — Provides in-depth analysis for each interview question to clarify underlying concepts. ([source](https://lgwebdream.github.io/FE-Interview/))
- [Frontend Framework Interview Questions](https://awesome-repositories.com/f/education-learning-resources/educational-resources/career-interview-community/interview-preparation-resources/web-mobile-platform-questions/framework-interview-questions/frontend-framework-interview-questions.md) — Presents a daily question-and-answer format to systematically refresh frontend knowledge. ([source](https://lgwebdream.github.io/FE-Interview/daily/))
- [Comprehensive Frontend Question Banks](https://awesome-repositories.com/f/education-learning-resources/educational-resources/career-interview-community/interview-preparation-resources/web-mobile-platform-questions/framework-interview-questions/frontend-framework-interview-questions/comprehensive-frontend-question-banks.md) — Lists over 1000 curated questions covering HTML, CSS, JavaScript, Vue, React, Node, TypeScript, Webpack, algorithms, and network security. ([source](https://cdn.jsdelivr.net/gh/lgwebdream/fe-interview@master/README.md))
- [JavaScript Interview Preparations](https://awesome-repositories.com/f/education-learning-resources/interview-preparation/javascript-interview-preparations.md) — Provides over 1000 frontend interview questions covering all major web technologies.
- [Daily Rotation Schedulers](https://awesome-repositories.com/f/education-learning-resources/interview-questions/authentic-question-banks/daily-rotation-schedulers.md) — Implements a daily question rotation algorithm for systematic review coverage.
- [JavaScript Coding Exercises](https://awesome-repositories.com/f/education-learning-resources/javascript-coding-exercises.md) — Provides hands-on exercises for implementing core JavaScript patterns like Promise, debounce, and deep clone.
- [Mobile Practice Platforms](https://awesome-repositories.com/f/education-learning-resources/educational-resources/career-interview-community/interview-preparation-resources/web-mobile-platform-questions/framework-interview-questions/mobile-framework-interview-questions/mobile-practice-platforms.md) — Uses a WeChat mini-program to let users practice interview questions on their smartphone. ([source](https://lgwebdream.github.io/FE-Interview/))
- [React Lifecycle References](https://awesome-repositories.com/f/education-learning-resources/lifecycle-method-references/react-lifecycle-references.md) — Documents the evolution of React component lifecycle methods and explains why older methods were deprecated.
- [Mobile Application Study Guides](https://awesome-repositories.com/f/education-learning-resources/professional-development-career/career-development/job-search-advancement/interview-resources/mobile-development-interview-questions/mobile-application-study-guides.md) — Delivers interview practice content through a WeChat mini-program for on-the-go study.

### Part of an Awesome List

- [Core Concepts](https://awesome-repositories.com/f/awesome-lists/devtools/core-concepts.md) — Covers fundamental JavaScript topics like promises, closures, and event loop through detailed explanations.
- [Custom Promise Implementations](https://awesome-repositories.com/f/awesome-lists/devtools/unhandled-rejection-handlers/promise-rejection-tracking/custom-promise-implementations.md) — Provides exercises for building a custom Promise implementation with resolve/reject logic and chained handlers. ([source](https://lgwebdream.github.io/FE-Interview/javascript/))
- [Layout Techniques](https://awesome-repositories.com/f/awesome-lists/devtools/css-styling-and-layout/layout-techniques.md) — Teaches CSS layout techniques for centering elements of unknown size using flexbox and grid.
- [Promise Implementations](https://awesome-repositories.com/f/awesome-lists/devtools/promise-implementations.md) — Includes hands-on exercises for building a custom promise implementation from scratch. ([source](https://lgwebdream.github.io/FE-Interview/program/))
- [Interview Preparation](https://awesome-repositories.com/f/awesome-lists/learning/interview-preparation.md) — Curated collection of essential frontend interview questions.

### Data & Databases

- [Client-Side Search Indexes](https://awesome-repositories.com/f/data-databases/search-indexing-technologies/search-indexing/search-and-indexing/local-resource-indexing/client-side-search-indexes.md) — Builds a lightweight in-memory search index for instant client-side filtering of questions.
- [HTTP Caching](https://awesome-repositories.com/f/data-databases/http-caching.md) — Describes how browsers cache HTTP responses, the differences between cache types, and which problems each strategy solves. ([source](https://lgwebdream.github.io/FE-Interview/http/))

### Programming Languages & Runtimes

- [Function Context Binding](https://awesome-repositories.com/f/programming-languages-runtimes/function-context-binding.md) — Provides exercises for binding a function to a specific context and preset arguments, creating a new function with a fixed this value. ([source](https://lgwebdream.github.io/FE-Interview/javascript/))
- [Object Cloning Techniques](https://awesome-repositories.com/f/programming-languages-runtimes/object-cloning-techniques.md) — Includes hands-on exercises for deep cloning nested data structures in JavaScript. ([source](https://lgwebdream.github.io/FE-Interview/javascript/))
- [Promise Collection Mapping](https://awesome-repositories.com/f/programming-languages-runtimes/promise-based-flow-control/promise-collection-mapping.md) — Provides exercises for combining multiple promises into a single aggregated result. ([source](https://lgwebdream.github.io/FE-Interview/program/))
- [WeChat Mini-Program Runtimes](https://awesome-repositories.com/f/programming-languages-runtimes/styling-languages/mini-program/wechat-mini-program-runtimes.md) — Delivers the interview practice experience inside a WeChat mini-program runtime.

### Software Engineering & Architecture

- [Closures](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/design-patterns/functional-design-patterns/functional-programming/closures.md) — Provides exercises for creating closures that retain access to outer scope variables, enabling private data and persistent state. ([source](https://lgwebdream.github.io/FE-Interview/javascript/))
- [Tree-Based Hierarchical Navigation](https://awesome-repositories.com/f/software-engineering-architecture/tree-traversal-algorithms/tree-based-hierarchical-navigation.md) — Organizes the question bank into a hierarchical category tree for browsable exploration.

### Testing & Quality Assurance

- [Debounce Utilities](https://awesome-repositories.com/f/testing-quality-assurance/function-call-tracking/debounce-utilities.md) — Delays function execution until a pause in activity, reducing unnecessary calls during rapid events like typing or scrolling. ([source](https://lgwebdream.github.io/FE-Interview/program/))

### Web Development

- [Function Execution Throttling](https://awesome-repositories.com/f/web-development/rate-limiting/function-execution-throttling.md) — Provides exercises for implementing throttle to cap function execution to a fixed interval during continuous events. ([source](https://lgwebdream.github.io/FE-Interview/javascript/))
- [HTTPS Configuration](https://awesome-repositories.com/f/web-development/https-configuration.md) — Explains the differences between HTTP and HTTPS, why HTTPS is more secure, and how to configure it. ([source](https://lgwebdream.github.io/FE-Interview/http/))
- [Load Time Reductions](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations/deferred-loading/media-lazy-loading/frame-lazy-loadings/load-time-reductions.md) — Applies code splitting, lazy loading, and caching to shorten initial page loads and improve perceived performance. ([source](https://lgwebdream.github.io/FE-Interview/javascript/))
- [Web Performance Optimizations](https://awesome-repositories.com/f/web-development/web-performance-optimizations.md) — Explains practical techniques like code splitting, lazy loading, caching, and preventing unnecessary re-renders.

### Content Management & Publishing

- [Static Site Generation](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/static-site-generators/static-site-generation.md) — Pre-renders question-and-answer pages into static HTML at build time for fast loading.

### Mobile Development

- [Interview Practice Mini Programs](https://awesome-repositories.com/f/mobile-development/mini-program-development/interview-practice-mini-programs.md) — Ships a WeChat mini-program companion that lets users browse and practice interview questions on their smartphone.

### Security & Cryptography

- [Cross-Origin Resource Sharing Policies](https://awesome-repositories.com/f/security-cryptography/cross-origin-resource-sharing-policies.md) — Explains HTTP vs HTTPS, caching strategies, same-origin policy, and CORS for web development.
- [Cross-Origin Security Policies](https://awesome-repositories.com/f/security-cryptography/cross-origin-security-policies.md) — Answers common interview questions about HTTP vs HTTPS, caching strategies, same-origin policy, and cross-origin solutions.

### System Administration & Monitoring

- [Asynchronous Event Loops](https://awesome-repositories.com/f/system-administration-monitoring/administrative-operations/linux-system-administration/networking/connection-lifecycle-management/parallel-network-i-o/event-driven-i-o/asynchronous-event-loops.md) — Explains how the event loop coordinates asynchronous tasks across timers, I/O callbacks, and other phases in JavaScript environments. ([source](https://lgwebdream.github.io/FE-Interview/node/))

### User Interface & Experience

- [Element Centering](https://awesome-repositories.com/f/user-interface-experience/element-centering.md) — Teaches how to center a div both horizontally and vertically without knowing its dimensions using CSS flexbox, grid, or transform techniques. ([source](https://lgwebdream.github.io/FE-Interview/css/))
- [Render Skipping Strategies](https://awesome-repositories.com/f/user-interface-experience/jsx-rendering-components/render-skipping-strategies.md) — Prevents component updates when inputs haven't changed, reducing rendering work and improving responsiveness. ([source](https://lgwebdream.github.io/FE-Interview/react/))