InterviewWare
EN中文
开始训练开始训练

岗位练习 · 完整流程

前端开发工程师面试题：浏览器、React 与无障碍

围绕浏览器的真实行为练习前端开发工程师面试题：加载性能、事件循环、React 状态，以及对键盘和读屏用户同样可用的界面。

开始这类练习示例问题

早期体验期间免费。练习在应用内进行，需要登录账号。

准备清单前端工程师

  1. 01JavaScript 与 TypeScript
  2. 02渲染与性能
  3. 03React 与状态管理
  4. 04无障碍

下一次练习技术面试练习室

01常见题

按面试轮次整理的前端面试题

这些前端面试题由 InterviewWare 编写或改编，并非任何公司的真实面试题。题目按面试轮次分组，并列出面试官关注的信号和通常随之而来的追问。

题目面试官关注什么可能的追问
R1 · 经历与动机
Q01 介绍一个你上线过、如今会换种方式实现的界面。具体到某个组件或页面，说明当时受什么约束，以及现在会做的具体改动和理由。如果不做一次性重写，你会怎样逐步迁移？
R2 · 专业能力与案例
Q02 如何排查页面首屏加载缓慢？先测量——用性能面板或真实用户数据；把网络、JavaScript 执行和阻塞渲染的资源分开看；一次只改一处。实验室环境下 LCP 正常，真实用户数据却很差，可能是什么原因？
Q03 如何实现符合无障碍要求的模态对话框？打开时焦点移入、关闭后焦点归还，焦点限制在对话框内，Esc 可关闭，dialog 角色带有标签，背景内容不可交互。如果改用原生 <dialog> 元素，哪些工作可以省掉？
Q04 解释闭包，以及它可能在界面中引发的问题。先给出清晰定义，再举真实例子，比如事件处理函数或 effect 捕获了过期的值，并说明如何修复。React 的依赖数组和这个问题有什么关系？
Q05 解释事件循环：为什么长任务会让页面卡住？你会如何拆分它？调用栈、宏任务和微任务队列，以及任务之间的渲染时机；拆分任务、主动让出主线程，或放进 Web Worker。一个已 resolve 的 Promise，会让浏览器在其回调执行前先完成绘制吗？
Q06 什么时候把状态留在组件内、提升到父组件、放进 Context，或引入状态管理库？根据谁读写状态、变化频率来决定；提到 Context 带来的重复渲染成本；把服务端数据状态单独处理。Context 的值每次按键都会变化，它下面的组件树会发生什么？
Q07 一个一万行的列表滚动很卡，你如何定位原因并解决？先分析性能再动手；虚拟列表、行组件缓存、避免强制同步布局；同时考虑键盘操作和页面内查找是否受影响。虚拟列表会给读屏用户带来什么问题？如何缓解？
Q08 实现一个搜索联想输入框，如何保持响应流畅，并避免显示过期结果？防抖、取消或忽略乱序返回的请求、缓存最近的查询，以及符合无障碍要求的 combobox 模式。用户在慢速网络下快速输入，逐步说明他们会看到什么。
Q09 商品详情页用服务端渲染还是客户端渲染？你如何选择？在首屏速度、搜索可见性与交互性、服务器成本之间权衡；提到缓存和水合（hydration）开销；合适时采用混合方案。价格和库存每分钟都在变，你会缓存什么、缓存在哪一层？
R3 · 判断与协作
Q10 设计稿里的文字颜色不满足对比度要求，而下周就要上线，你怎么办？尽早提出并附上证据（对比度检测结果），给出保留设计意图的修改方案，并清楚最终由谁拍板。设计师不同意，你如何在不升级矛盾的情况下解决？

02试答一题

试答一道前端面试题

从上面的题目中挑一道，先写下你的回答。在你请求反馈之前，草稿只保存在当前浏览器。

练习题 · 前端工程师

如何排查页面首屏加载缓慢？

0 字
获取这道题的反馈

获取反馈需要注册免费账号（一步完成，无需银行卡）。草稿只保存在当前浏览器，注册后自动填入；在你提交之前不会上传。

03答题示例

我们的商品页在加载过程中布局会跳动，你会怎么修复？

中级岗位回答提纲，约两分钟。 示意内容：由 InterviewWare 编写，并非真实候选人的回答。

  1. 01

    测量

    我会先用性能面板录制页面加载，查看布局偏移记录，找出是哪些元素在移动。

  2. 02

    原因

    常见原因是图片没有设置尺寸、字体加载较晚，或在已有内容上方插入了横幅。

  3. 03

    修复

    给图片设置宽高或 aspect-ratio，为横幅预留空间，并为字体设置合适的 font-display 策略和尺寸相近的备用字体。

  4. 04

    验证

    最后对比修复前后的布局偏移分数，既看实验室数据，也看真实用户数据。

04答题建议

前端面试答题要点

这样答更有效

  1. T1讲浏览器在做什么，而不只是会调用哪个框架 API。
  2. T2任何性能结论都要有前后测量数据，并说明用的是什么工具。
  3. T3回答任何组件题，都主动提到键盘、触屏和读屏用户——不要等面试官问。
  4. T4比较方案时，说明每种方案给用户带来的代价，而不只是给开发者的。
如何进行 AI 模拟面试练习

前端面试常见误区

  1. M1还没找到瓶颈，就回答“加 React.memo”“上 CDN”。
  2. M2把无障碍理解成最后补几个 aria-label。
  3. M3用教科书的话解释闭包或事件循环，却举不出界面中的例子。
  4. M4谈性能时忽略慢速网络和低端手机。
  5. M5按流行程度选状态管理库，而不是看状态实际怎么使用。

05国内求职

国内前端面试怎么准备

校招别只背八股，社招要讲工程

前端校招面试通常从基础问起：JavaScript（闭包、原型、this、事件循环）、CSS 布局、浏览器渲染和网络，再加一两道手写题（防抖节流、Promise、深拷贝）和一道算法题；社招的重点转向工程和项目：性能优化做过什么、怎么量化、组件库或状态管理怎么设计、跨团队怎么推进。校招同学不要只背“八股”，每个知识点最好配一个自己踩过的坑。

前端几轮面试和三轮模拟的对应

国内前端面试一般是两到三轮技术面加 HR 面。对照 InterviewWare：R1 经历与动机，大致对应自我介绍和项目概述；R2 专业能力与案例，对应基础题、手写题和项目深挖；R3 判断与协作，对应与设计、产品、后端协作中的分歧处理。手写题可以在技术练习室用 JavaScript 练，但练习室目前以通用算法题为主，没有专门的前端手写题。

性能优化类深挖，先备好数据

前端项目深挖常见的追问有：“首屏时间从多少优化到了多少？怎么测的？”“这个组件为什么这样拆？”“兼容性问题怎么处理的？”。准备时，最好能给出优化前后的数据和测量方式——说不清数据来源的优化，很难经得住追问。

06推荐工具

前端面试练习工具

  1. 技术面试练习室

    在浏览器里用 JavaScript 完成练习室的题目；其中的 LRU 缓存模拟，很适合练习讲解基于 Map 的缓存实现。

    JS · Python公开用例

  2. 对话式 AI 模拟面试

    粘贴岗位描述，让追问围绕团队真正列出的框架和要求展开。

    4 位面试官R1–R3文字 · 语音

  3. 学习积累与间隔复习

    把讲得不够清楚的知识点（比如事件循环）存成卡片，按间隔反复复习，直到能讲得干净利落。

    间隔复习重答对比

更多方向

探索更多方向

早期体验 · 免费

今天，记下第一轮练习。

带上简历或岗位描述，或者只写下想要的岗位。从第一个回答开始，训练日志就会记录你的进步。

开始训练用量与定价