获得完整访问权限
New questions added in 11月 2026 ->
获得完整访问权限
推荐
75

GFE 75

Most important 75 questions for front end interviews, selected by a panel of Senior Front End Engineers from big tech companies.
在浏览器中编码
官方解答
全面的测试用例
最重要的练习题列表，让您在准备过程中获得最大的收获，涵盖最有用和最常被问到的前端面试主题。与来自顶级公司的资深前端面试官小组合作创建。

所有练习题目

题目列表

  • 防抖实现一个函数，通过延迟函数执行，直到其最后一次执行尝试后经过指定时间，来限制函数可以执行的次数。
    语言
  • Array.prototype.reduce实现 Array.prototype.reduce() 方法
    语言
  • Classnames实现一个有条件地将 CSS 类名连接在一起的函数
    语言
  • 扁平化实现一个函数，该函数将数组递归地扁平化为单层深度。
    语言
  • 节流高级实现一个函数，通过限制其在一段时间内可以执行的次数来控制函数的执行。
    语言
  • Todo ListBuild a Todo list that lets users add new tasks and delete existing tasks
    可用的框架
  • Contact FormBuild a contact form which submits user feedback and contact details to a back end API
    可用的框架
  • Holy GrailBuild the famous holy grail layout consisting of a header, 3 columns, and a footer
    可用的框架
  • TabsBuild a tabs component that displays a list of tab elements and one associated panel of content at a time
    可用的框架
  • Job Board高级Build a job board that displays the latest job postings from Hacker News
    可用的框架
  • AccordionBuild an accordion component that displays a list of vertically stacked sections with each containing a title and content snippet
    可用的框架
  • News Feed (e.g. Facebook)Design a news feed user interface similar to Facebook and Twitter
    主题
    可访问性性能
  • AutocompleteDesign an autocomplete component seen on Google and Facebook search
    主题
    可访问性UI 组件
  • 类型工具 II实现实用程序以确定 JavaScript 中非原始变量类型
    语言
  • Promise.all实现 Promise.all() 函数，如果所有输入元素都已解决，则解析为结果数组，否则拒绝。
    语言
  • 数据合并高级实现一个函数，用于合并来自同一用户的数据行
    语言
  • 深拷贝实现一个对值进行深拷贝的函数
    语言
  • 事件发射器实现一个可以订阅和发出事件的类，这些事件会触发附加的回调函数
    语言
  • getElementsByStyle高级实现一个函数，以获取使用指定样式呈现的所有 DOM 元素
    语言
  • Function.prototype.call实现 Function.prototype.call() 函数，该函数使用给定的 `this` 值和提供的参数调用该函数
    语言
  • 列表格式实现一个函数，将项目列表格式化为单个可读字符串
    语言
  • Map Async Limit实现一个函数，该函数使用异步映射函数映射一个项目数组，同时不超过并发限制
    语言
  • 深度相等实现一个确定两个值是否相等的函数
    语言
  • Promise.any实现 Promise.any() 函数，当任何一个输入元素被解决时，它就会被解决
    语言
  • 深度 Omit实现一个函数，该函数从对象中删除指定的键及其对应的值，包括嵌套对象或数组。
    语言
  • Promisify实现一个函数，该函数接受一个遵循常见错误优先回调风格的函数，并返回一个返回 Promise 的版本
    语言
  • Memoize实现一个函数，该函数返回一个函数的记忆化版本，该函数接受单个参数
    语言
  • Squash Object实现一个函数，在将输入对象压扁成单层深度后，返回一个新对象
    语言
  • getElementsByClassName实现一个函数，获取包含指定类的所有 DOM 元素
    语言
  • 描述浏览器中 cookie、`sessionStorage` 和 `localStorage` 之间的区别以下都是在客户端（本例中为用户的浏览器）上存储数据的机制。localStorage 和 sessionStorage 都实现了 Web Storage API 接口…
    主题
    Web APIJavaScript
  • 描述 `<script>`、`<script async>` 和 `<script defer>` 之间的区别所有这些方式（<script>、<script async> 和 <script defer>）都用于在 HTML 文档中加载和执行 JavaScript 文件，但它们在浏览器处理脚本的加载和执行方式上有所不同…
    主题
    HTMLJavaScript
  • 解释 JavaScript 中的“hoisting”（变量提升）概念Hoisting（变量提升）是一种 JavaScript 机制，在编译阶段，变量和函数声明会被“提升”到其包含作用域的顶部。 变量声明…
    主题
    JavaScript
  • JavaScript 中使用 `let`、`var` 或 `const` 创建的变量有什么区别？在 JavaScript 中，let、var 和 const 都是用于声明变量的关键字，但它们在作用域、初始化规则、是否可以重新声明或重新赋值以及在声明前访问时的行为方面存在显着差异：
    主题
    JavaScript
  • JavaScript 中的闭包是什么？你将如何/为什么要使用它？在 Kyle Simpson 撰写的 "You Don't Know JS" (YDKJS) 一书中，闭包定义如下：
    主题
    闭合JavaScript
  • 描述 JavaScript 和浏览器的事件冒泡事件冒泡是一种 DOM 事件传播机制，其中一个事件（例如点击）从目标元素开始，冒泡到文档的根。这允许祖先元素也响应事件…
    主题
    Web APIJavaScript
  • 解释 JavaScript 中的事件委托事件委托是 JavaScript 中的一种技术，它将单个事件监听器附加到父元素，而不是将事件监听器附加到多个子元素。当子元素上发生事件时，该事件会冒泡到 DOM…
    主题
    Web APIJavaScript
  • JavaScript 变量 `null`、`undefined` 和未声明的区别是什么？未声明 变量是在您将值分配给先前未使用 var、let 或 const 创建的标识符时创建的。未声明的变量将在全局范围内定义，在当前范围之外。在严格模式下，当您尝试分配给未声…
    主题
    JavaScript
  • 解释 JavaScript 中 CommonJS 模块和 ES 模块的区别在 JavaScript 中，模块是可重用的代码片段，封装了功能，使其更易于管理、维护和构建应用程序。模块允许您将代码分解为更小、更易于管理的部分，每个部分都有自己的作用…
    主题
    JavaScript
  • JavaScript 运行时中的事件循环是什么？事件循环是JavaScript运行时环境中的一个概念，涉及异步操作如何在JavaScript引擎中执行。它的工作原理如下： JavaScript 引擎开始执行脚本，将同步操作放在调用堆栈上…
    主题
    JavaScript
  • 在 JavaScript 中使用 Promise 而不是回调有什么优缺点？Promise 提供了一种比回调更简洁的替代方案，有助于避免回调地狱，并使异步代码更具可读性。它们有助于轻松编写顺序和并行的异步操作。但是，使用 Promise…
    主题
    异步JavaScript
  • 描述块格式化上下文 (BFC) 及其工作原理。块格式化上下文 (BFC) 是网页视觉 CSS 渲染的一部分，其中会布局块级盒子。浮动、绝对定位的元素、inline-blocks、table-cells、table-caption 以及 overflow 值不为…
    主题
    CSS
  • 描述 `z-index` 以及如何形成堆叠上下文。CSS 中的 z-index 属性控制重叠元素的垂直堆叠顺序。z-index 仅影响已定位的元素（具有 position 值不为 static 的元素）及其后代或 flex 项目。 在没有任何 z-index…
    主题
    CSS
  • 解释浏览器如何确定哪些元素与 CSS 选择器匹配。这个问题与关于 编写高效 CSS 的问题相关。浏览器从最右侧（关键选择器）到左侧匹配选择器。浏览器根据关键选择器过滤 DOM…
    主题
    浏览器CSS
  • 解释你对盒子模型的理解，以及你将如何在 CSS 中告诉浏览器以不同的盒子模型渲染你的布局。CSS 盒子模型描述了为文档树中的元素生成的矩形框，并根据视觉格式化模型进行布局。每个框都有一个内容区域（例如文本、图像等）和可选的周围 padding、border 和 margin…
    主题
    CSS
  • 你是否想使用 `translate()` 而不是 `absolute` 定位，或者反过来？为什么？translate() 是 CSS transform 属性的一个可能值。使用 translate() 时，元素仍然占据其原始空间（有点像 position…
    主题
    CSS性能
  • `* { box-sizing: border-box; }` 是什么作用？* { box-sizing: border-box; } 使页面上的每个元素都使用 box-sizing: border-box 方法来计算元素的 height 和 width。
    主题
    CSS
  • 什么是 CSS `display` 属性？你能举几个例子说明它的用法吗？display 属性的常见值：none、block、inline、inline-block、flex、grid、table、table-row、table-cell、list-item。
    主题
    CSS
  • relative、fixed、absolute、sticky 和 static 定位元素有什么区别？定位元素是指其计算后的 position 属性为 relative、absolute、fixed 或 sticky 的元素。 static：默认位置；元素将像通常一样流入页面。top、right、bottom、left 和…
    主题
    CSS
  • 设计或开发多语言网站时，您必须注意哪些事项？设计和开发多语言网站是国际化 (i18n) 的一部分。
    主题
    HTML国际化
  • block、inline 和 inline-block 有什么区别？
    主题
    CSS
  • 柯里化实现一个函数，该函数将接受多个参数的函数转换为一个可以重复调用，每次只接受一个参数的函数。
    语言
  • HTML 序列化器高级实现一个将对象序列化为带有缩进的 HTML 字符串的函数
    语言
  • JSON.stringify高级实现一个将 JavaScript 值转换为 JSON 字符串的函数
    语言
  • Star RatingBuild a star rating component that shows a row of star icons for users to select the number of filled stars corresponding to the rating
    可用的框架
  • Image CarouselBuild an image carousel that displays a sequence of images
    可用的框架
  • Progress BarsBuild a list of progress bars that fill up gradually when they are added to the page
    可用的框架
  • Like ButtonBuild a Like button that changes appearance based on its state
    可用的框架
  • Traffic LightBuild a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely
    可用的框架
  • Digital ClockBuild a 7-segment digital clock that shows the current time
    可用的框架
  • StopwatchBuild a stopwatch widget that can measure how much time has passed
    可用的框架
  • File Explorer高级Build a file explorer component to navigate files and directories in a tree-like hierarchical viewer
    可用的框架
  • Tic-tac-toeBuild a tic-tac-toe game that is playable by two players
    可用的框架
  • Transfer ListBuild a component that allows transferring items between two lists
    可用的框架
  • Nested Checkboxes高级Build a nested checkboxes component with parent-child selection logic
    可用的框架
  • Modal Dialog高级Build a reusable modal dialog component that can be opened and closed
    可用的框架
  • Data TableBuild a user data table with pagination features
    可用的框架
  • Undoable Counter高级Build a counter with a history of the values and ability to undo/redo actions
    可用的框架
  • Image Carousel高级Design a horizontally-scrolling image carousel component
    主题
    可访问性性能UI 组件
  • Modal Dialog高级Design a modal/dialog component that shows a window overlaying the contents on the page
    主题
    可访问性UI 组件
  • Travel Booking (e.g. Airbnb)高级Design a travel booking website like Airbnb and Expedia
    主题
    性能搜索引擎优化
  • Chat App (e.g. Messenger)高级Design a chat application like Messenger and Slack
    主题
    网络
  • Video Streaming (e.g. Netflix)高级Design a video streaming application like Netflix and YouTube
    主题
    网络性能
  • Google Docs高级Design a collaborative editor like Google Docs and Notion
    主题
    网络

GFE 75 - Blind 75 for Front End Interviews

Looking for the most important front end interview questions to practice, with answers and test cases?

Try GFE 75, a list of 75 most important front end interview questions curated by big tech ex-interviewers to give you the most mileage for your time. These questions were chosen such that there is sufficient repetition and coverage of key topics and patterns.

Furthermore, each question in the list has been solved by experienced engineers, providing solutions / answers in multiple frameworks and languages, including JavaScript, TypeScript, React, Vue, Angular, Svelte where applicable.

The coding workspace integrated into GFE 75 allows you to practice directly in your browser, simulating the actual conditions you'll face in a real interview.

To quickly tell if your answers meet the expectation criteria, you're also able to run your code against our automated test cases, which were again written by ex-interviewers to reflect the real demands of the interview process.

Topics covered by GFE 75 include:

  • Browser and language polyfills
  • Async operations
  • Accessibility
  • Higher order functions
  • DOM APIs
  • Common JS utility functions
  • HTML, CSS, JS fundamentals
  • Forms
  • Component design
  • State design
  • Networking