大家好，本文整理了前端中高级面试最常考、实际开发最常用的 20 道难点题，涵盖：
- 扫码登录、秒杀系统、虚拟滚动、断点续传
- WebSocket、权限系统、性能监控、PWA、水印防删
- SSG/SSR、虚拟列表、单点登录、埋点SDK、拖拽缩放
每道题都给出面试官最爱听的标准答案结构，面试直接背，开发直接用。
1. 前端如何实现扫码登录功能？
难度：困难 ⭐⭐⭐
核心回答重点：
- 后端生成唯一 scene 值（随机串+过期时间），返回二维码图片内容。
- 前端展示二维码，轮询 / WebSocket 长连接监听扫码状态。
- 手机扫码后，后端更新 scene 状态为已扫码；前端实时收到状态变更。
- 用户确认登录，后端返回 token、userInfo，前端存储并跳转主页。
- 安全机制：scene 一次性有效、过期自动刷新、防重复提交、防暴力扫描。
标准流程：
获取二维码 → 展示二维码 → 监听状态 → 已扫码 → 确认登录 → 获取token → 跳转主页
实战建议：
优先使用 WebSocket，性能远优于轮询；scene 必须唯一且短时有效。
2. 如何设计和优化秒杀系统的前端？
难度：困难 ⭐⭐⭐
核心回答重点：
- 前端防重复提交：按钮置灰、防抖、请求锁状态。
- 合并请求、减少请求次数、接口超时控制。
- 性能优化：页面预加载、数据预加载、资源缓存。
- 高并发：请求排队、失败重试、限流降级、骨架屏。
- 安全：接口签名、token 校验、防作弊、防篡改、防刷接口。
核心思想：
前端扛流量，后端控库存；能前端做的绝不麻烦后端。
3. 无限滚动如何自动回收上方内容（虚拟滚动）？
难度：困难 ⭐⭐⭐
核心回答重点：
- 采用 虚拟列表 思想：只渲染可视区域。
- 监听滚动高度，计算可视区范围，只保留可视区 DOM。
- 数据全部保留，只销毁视图，滚动回去可重新渲染。
- 使用 IntersectionObserver 监听元素是否可见，性能最优。
- 不监听 scroll 事件，避免卡顿、丢帧。
适用场景：
长列表、聊天记录、信息流、大数据表格。
4. 大文件断点续传如何实现并保证安全？
难度：困难 ⭐⭐⭐
核心回答重点：
- 文件按固定大小 切片（chunk） 。
- 每个切片带：hash、index、total、fileHash。
- 前端先计算 文件唯一 hash，传给后端查询已上传切片。
- 只传未上传切片，失败自动重试，支持暂停/继续。
- 全部传完通知后端 合并切片。
- 安全：文件 hash 校验、切片校验、权限校验、防止篡改。
5. 前端请求耗时统计工具如何设计？
难度：困难 ⭐⭐⭐
核心回答重点：
- 劫持 fetch/axios/XHR，统一拦截请求。
- 记录：开始时间、结束时间、耗时、URL、状态码、请求体。
- 统计指标：首屏时间、接口耗时、资源加载、白屏时间。
- 批量上报、防抖上报、采样上报，不影响业务。
- 输出：耗时排行、慢接口监控、异常告警。
6. WebAssembly 前端应用与简单计算？
难度：困难 ⭐⭐⭐
核心回答重点：
- C/C++ 编写核心计算逻辑，编译为 .wasm。
- JS 通过
WebAssembly.instantiate加载。 - JS ↔ WASM 互相调用函数、共享内存。
- 优势：计算极快、不阻塞主线程、安全、体积小。
- 适用：加密、解码、大量计算、图形渲染、AI 推理。
7. 图片裁剪、旋转、缩放功能实现？
难度：困难 ⭐⭐⭐
核心回答重点：
- 使用 Canvas 绘制原图。
- 裁剪：绘制选区、拖拽、定位。
- 旋转：
ctx.rotate(angle)。 - 缩放：
drawImage重绘调整尺寸。 - 支持预览、导出、下载、上传。
8. 前端角色权限系统设计？
难度：困难 ⭐⭐⭐
核心回答重点：
- 角色：super admin / admin / user / guest
- 权限：菜单、按钮、接口、数据 四级权限。
- 实现：
-
- 路由守卫控制页面访问
- 自定义指令控制按钮显隐
- 全局状态管理权限列表
- 权限实时更新，刷新保持状态。
9. Markdown 编辑器实时预览？
难度：困难 ⭐⭐⭐
核心回答重点：
- 左侧编辑区、右侧预览区。
- 使用
marked库将 md 转 HTML。 - 代码高亮：
highlight.js。 - 支持分屏、全屏、同步滚动。
10. SPA 首屏加载慢如何优化？
难度：中等 ⭐⭐⭐
核心回答重点：
- 路由懒加载、代码分割、按需加载
- 资源压缩、图片懒加载、CDN 加速
- SSR / SSG / 预渲染
- 强缓存、协商缓存
- 骨架屏、loading、资源优先级
11. 图片拖拽、缩放、旋转预览组件？
难度：困难 ⭐⭐⭐
核心回答重点：
- mousedown / mousemove / mouseup 实现拖拽
- 滚轮/双指手势实现缩放
- transform 位移，不触发重排
- 边界限制、双击还原、手势回弹
12. 单点登录 SSO 前端实现？
难度：中等 ⭐⭐⭐
核心回答重点：
- 一处登录，多系统自动登录。
- 统一鉴权中心，共享 token/ticket/cookie。
- 流程：
跳转鉴权中心 → 验证登录态 → 带回 token → 本系统自动登录。
13. WebSocket 实时聊天、在线状态？
难度：困难 ⭐⭐⭐
核心回答重点：
- 连接：open/message/error/close
- 消息结构：user/content/time/status
- 在线状态、正在输入、已读未读
- 心跳、断线重连、消息补发、持久化
- 桌面通知、声音提醒
14. 前端日志埋点 SDK 设计？
难度：中等 ⭐⭐⭐
核心回答重点：
- API：log/error/event/performance/user
- 自动埋点：页面、点击、请求、错误、性能
- 批量、防抖、节流、采样上报
- 设备信息、用户标识、环境信息
- 轻量、无侵入、可扩展
15. 页面水印 + 防止被删除？
难度：中等 ⭐⭐⭐
核心回答重点：
- Canvas 生成水印，全屏覆盖
- MutationObserver 监听 DOM 修改
- 一旦删除/隐藏，立刻自动重绘
- 多层水印、最高层级、不可点击
16. 移动端下拉刷新 + 上拉加载？
难度：中等 ⭐⭐⭐
核心回答重点：
- touchstart/touchmove/touchend 判断距离
- 下拉刷新：清空数据、重新请求
- 上拉加载：分页追加、合并列表
- 状态：刷新中、加载中、无更多数据
17. 响应式三栏布局（PC三栏、移动端单栏）？
难度：中等 ⭐⭐⭐
核心回答重点：
- @media 查询区分设备
- PC（>1200px）：flex 三栏等高
- 平板：双栏
- 移动端（<768px）：单栏垂直排列
18. Service Worker 实现离线访问？
难度：中等 ⭐⭐⭐
核心回答重点：
- 注册 SW，监听 install/activate/fetch
- 缓存 HTML/CSS/JS/图片
- 拦截请求：有网用网络，无网用缓存
- 支持 PWA 离线应用
19. 通用表格组件（分页、排序、筛选）？
难度：中等 ⭐⭐⭐
核心回答重点：
- 数据驱动：columns/data/pagination
- 分页：页码、页大小、总数
- 排序：asc/desc/default
- 筛选：输入、下拉、多选、远程筛选
20. EventBus 事件总线实现组件通信？
难度：中等 ⭐⭐⭐
核心回答重点：
- 发布订阅模式（pub/sub）
- 核心方法：on / off / emit / once
- 维护事件 map + 回调队列
- 跨组件、跨页面、无耦合通信
📌 面试速记总结（收藏必备）
- 扫码登录：唯一scene + WebSocket + 状态过期
- 秒杀：防重复提交 + 排队限流 + 预加载
- 虚拟滚动：可视区渲染 + IntersectionObserver
- 断点续传：文件切片 + hash + 秒传 + 重试
- 监控：劫持请求 + 批量上报 + 性能统计
- WASM：C/C++ 编译 + JS 互操作 + 高性能计算
- 图片处理：Canvas + 裁剪旋转缩放
- 权限：路由守卫 + 指令控制 + 四级权限
- MD 编辑器：marked + 代码高亮 + 实时预览
- 首屏优化：懒加载 + CodeSplit + SSR/CDN
本文 20 题都是前端中高级面试必考、实际开发必用的核心知识点，建议收藏，面试前快速过一遍，通过率大幅提升。
后续我会把每道题写成完整代码实战教程（含源码），关注不迷路。
你觉得哪道题最难？评论区告诉我！
