新成为赞助商 ->

价格登录 / 注册

获得完整访问权限

开始使用

新成为赞助商 ->

价格登录 / 注册

获得完整访问权限

推荐

75

GFE 75

前端面试最重要的75个问题。

在浏览器中编码

官方解答

测试用例

追踪您的进度

最小的练习题列表，让您在准备过程中获得最大的收益。涵盖了前端面试中最常问到的主题。由全球顶尖公司资深到员工前端面试官的专业知识创建。

所有练习题目

搜索问题

题目列表

防抖实现一个函数，通过延迟函数执行，直到其最后一次执行尝试后经过指定时间，来限制函数可以执行的次数。
语言
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 BoardBuild a job board that displays the latest job postings from Hacker News
可用的框架
AccordionBuild an accordion component that a displays a list of vertically stacked sections with each containing a title and content snippet
可用的框架
动态消息（例如 Facebook）设计一个类似于 Facebook 和 Twitter 的动态消息用户界面
主题
可访问性性能
自动补全设计一个在 Google 和 Facebook 搜索中看到的自动补全组件
主题
可访问性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` 之间的区别
主题
Web APIJavaScript
描述 `<script>`、`<script async>` 和 `<script defer>` 之间的区别
主题
HTMLJavaScript
解释 JavaScript 中的“hoisting”（变量提升）概念
主题
JavaScript
JavaScript 中使用 `let`、`var` 或 `const` 创建的变量有什么区别？
主题
JavaScript
JavaScript 中的闭包是什么？你将如何/为什么要使用它？
主题
闭合JavaScript
描述 JavaScript 和浏览器的事件冒泡
主题
Web APIJavaScript
解释 JavaScript 中的事件委托
主题
Web APIJavaScript
JavaScript 变量 `null`、`undefined` 和未声明的区别是什么？
主题
JavaScript
解释 JavaScript 中 CommonJS 模块和 ES 模块的区别
主题
JavaScript
JavaScript 运行时中的事件循环是什么？
主题
JavaScript
在 JavaScript 中使用 Promise 而不是回调有什么优缺点？
主题
异步JavaScript
描述块格式化上下文 (BFC) 及其工作原理。
主题
CSS
描述 `z-index` 以及如何形成堆叠上下文。
主题
CSS
解释浏览器如何确定哪些元素与 CSS 选择器匹配。
主题
浏览器CSS
解释你对盒子模型的理解，以及你将如何在 CSS 中告诉浏览器以不同的盒子模型渲染你的布局。
主题
CSS
你是否想使用 `translate()` 而不是 `absolute` 定位，或者反过来？为什么？
主题
CSS性能
`* { box-sizing: border-box; }` 是什么作用？
主题
CSS
什么是 CSS `display` 属性？你能举几个例子说明它的用法吗？
主题
CSS
relative、fixed、absolute、sticky 和 static 定位元素有什么区别？
主题
CSS
设计或开发多语言网站时，您必须注意哪些事项？
主题
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 the states
可用的框架
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 ExplorerBuild 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 of items between two lists
可用的框架
Nested CheckboxesBuild a nested checkboxes component with parent-child selection logic
可用的框架
Modal DialogBuild a reusable modal dialog component that can be opened and closed
可用的框架
Data TableBuild a users data table with pagination features
可用的框架
Undoable Counter高级Build a counter with a history of the values and ability to undo/redo actions
可用的框架
图片轮播高级设计一个水平滚动的图片轮播组件
主题
可访问性性能UI 组件
模态对话框高级设计一个模态/对话框组件，该组件显示一个覆盖页面内容的窗口
主题
可访问性UI 组件
旅行预订（例如 Airbnb）高级设计一个类似 Airbnb 和 Expedia 的旅行预订网站
主题
性能搜索引擎优化
聊天应用（例如 Messenger）高级设计一个类似 Messenger 和 Slack 的聊天应用程序
主题
网络
视频流（例如 Netflix）高级设计一个类似 Netflix 和 YouTube 的视频流应用程序
主题
网络性能
Google Docs高级设计一个类似 Google Docs 和 Notion 的协作编辑器
主题
网络

筛选器

JavaScript

OOP

CSS

HTML

可访问性

国际化

性能

网络

异步

浏览器

闭合

递归

搜索引擎优化

UI 组件

Web API

谷歌

亚马逊

苹果

字节跳动

微软

抖音

Uber

领英

Atlassian

Stripe

Lyft

爱彼迎

Dropbox

GFE 75 - 前端面试的 Blind 75

正在寻找最重要的前端面试问题来练习，并附有答案和测试用例？

试试 GFE 75，这是一份由大厂前面试官精心挑选的 75 个最重要的前端面试问题列表，可以让你用最少的时间获得最大的收获。这些问题的选择，保证了对关键主题和模式的充分重复和覆盖。

此外，列表中的每个问题都由经验丰富的工程师解决，在多个框架和语言中提供解决方案/答案，包括 JavaScript、TypeScript、React、Vue、Angular、Svelte（如果适用）。

GFE 75 中集成的编码工作区允许您直接在浏览器中练习，模拟您在真实面试中将面临的实际情况。

为了快速判断您的答案是否符合期望标准，您还可以根据我们的自动化测试用例运行您的代码，这些测试用例再次由前面试官编写，以反映面试过程的真实需求。

GFE 75 涵盖的主题包括：

浏览器和语言 polyfill
异步操作
可访问性
高阶函数
DOM API
常见 JS 实用函数
HTML、CSS、JS 基础知识
表单
组件设计
状态设计
网络

页脚

订阅我们的新闻通讯

电子邮件

练习

开始使用
JavaScript 函数
用户界面编码
系统设计
测验

指南

前端面试指南
前端系统设计手册
React 面试指南
行为面试指南

学习计划

1 周计划
1 个月计划
3 个月计划

公司

价格
路线图
关于我们
团队
联系我们
成为赞助商新
成为联盟成员
职业发展
博客
Medium
DEV Community

LinkedIn Discord GitHub Twitter / X

© 2025 Codeney Pte Ltd. 保留所有权利。