[!info] related notes

• 前端高频入口: frontend-interview-high-frequency-moc
• AI 岗位表达: how-to-understand-ai-frontend-engineer-role-interview-question, ai-web-engineer-project-storytelling
• 工程主线: 前端工程化 MOC, React MOC

同花顺 AI 前端开发工程师（B2C）笔试+面试准备

这是复合型岗位，考察传统前端基础 + AI 应用工程能力，不是”会写页面就行”。

这篇怎么用

这篇不是题库堆砌页，而是备考入口页。使用方式建议分三步：

1. 先看题目是否“自己能口头答出来”
2. 答不出来时，顺着后面的知识笔记去补
3. 补完后，回到这页重新用 30 到 60 秒复述

如果某个链接笔记只能帮你“知道名词”，但还不足以“直接答题”，那就说明该主题还没有真正掌握。

这类岗位面试官真正想看什么

• 传统前端基础是否扎实
• React / 工程化 / 性能 / SSR 是否过关
• 你是不是只会用 AI 工具，还是已经形成稳定工作流
• 你能不能把“AI 提效”讲成可复用的方法，而不是泛泛地说用了 Cursor
• 你排查问题、做验证闭环、做质量控制的能力是否在线

岗位画像

官方职责：

• WEB 前端开发与维护
• 用 AI 工具完成模块编码
• 建设物料库/基础库沉淀可复用 AI 资产
• 把 AI 用到代码生成/AICR/AI 重构
• 搭监控告警和性能优化体系
• 排查线上问题

同花顺 2026 年同步在招「前端开发（AI Native）」和「前端开发工程师（AI应用方向）」社招，说明是持续投入方向。

笔试真题（按题型分类）

DOM / CSS

• 鼠标移到一个 100×100 的 div 上，颜色从红变黑，同时变成圆形，动画时间 200ms → css-animation 如何实现 CSS 动画
• 页面动态加载 script，并在加载完成后执行回调 → javascript-dom script 标签动态加载
• 改变元素宽度会触发回流还是重绘 → reflow-vs-repaint-interview-question 回流重绘原理
• 子元素如何从下往上排列 → flex flex-direction: column-reverse
• 多个按钮统一绑定点击事件，如何判断点的是哪个 → event-bubbling-capturing-delegation-interview-question 事件委托

JS / ES6 / 语言机制

• let [head, ...tail] = [1,2,3,4] 解构赋值输出题 → ecmascript-syntax-basics ES6 解构赋值
• 计算属性名对象取值输出题 → js对象 对象属性访问与计算属性名
• setTimeout + Promise + console.log 输出顺序（事件循环）→ event-loop-interview-question 事件循环原理
• 类方法解构后调用，this 丢失导致的输出/报错 → call-apply-bind-interview-question this 绑定机制
• 箭头函数与普通函数的区别 → ecmascript-functions 箭头函数 vs 普通函数
• 函数声明和函数表达式提升的输出题 → ecmascript-syntax-basics 函数提升
• 0.1 + 0.2 !== 0.3 的原因 → ecmascript-type-conversion 浮点数精度问题

算法 / 数据结构

• 小球下落反弹，总路程计算 → 算法面试题型 MOC 找对应算法笔记
• 判断出栈顺序是否合法 → 算法面试题型 MOC 栈相关算法
• 判断第三个字符串是否由前两个字符串交错组成 → 算法面试题型 MOC 字符串 DP
• n 个石头，每次取 1 或 2，有多少种取法 → 算法面试题型 MOC 斐波那契 DP
• 输入一年经过的秒数，输出月日时分秒 → 算法面试题型 MOC 时间戳转换
• 二分查找一定比顺序查找快吗 → binary-search-algorithm 二分查找适用场景
• 查找数组中出现次数大于一半的数字 → 算法面试题型 MOC 摩尔投票法

网络 / 系统

• IM 已读标志在客户端和网络上的流转过程 → computer-networking-moc 网络协议相关
• 同一个程序 A 服务器正常、B 服务器异常，如何排查 → ci工作区排障经历 排查思路
• DNS、TCP、HTTP → computer-networking DNS/TCP/HTTP 原理
• 对称加密与非对称加密区别 → asymmetric-encryption 加密算法对比
• 输入 URL 到页面渲染全过程 → browser-url-to-page-interview-question URL 到页面渲染
• HTTP1.1 vs HTTP2 → http1-http2 HTTP1.1 vs HTTP2

笔试题库随机抽题，不同人拿到的不一样。部分考生还碰到过 jQuery 和 C++。

面试高频题

传统前端线（仍会考）

• HTTP 状态码、缓存机制 → HTTP 缓存
• flex 布局 → flex-vs-grid-interview-question Flex vs Grid
• Vue 全家桶、动态组件加载、性能优化 → vue-moc Vue 相关笔记
• React/Vue 区别、diff、Fiber → react-moc React 核心概念
• 同源策略、跨域、BFC → cross-origin-and-cors-interview-question 跨域与 CORS
• 回流重绘、CSS 动画 → reflow-vs-repaint-interview-question 回流重绘
• 事件捕获和冒泡 → event-bubbling-capturing-delegation-interview-question 事件机制
• 节流防抖、图片格式 → debounce-vs-throttle-interview-question 节流防抖 + frontend-engineering-performance-optimization 图片格式选择
• Node 与浏览器事件循环 → event-loop-interview-question 事件循环 vs js-event-loop Node.js 事件循环

AI/AIGC 前端线（2025 年新增）

• React Hooks 深层考察 → react-hooks-interview-deep-dive React Hooks 面试深度解析
• 全局状态管理（Redux/Zustand）→ react-state-management-selection
• React 18 自动批处理 → react-performance-overview React 18 新特性
• Next.js 选型、SSR/CSR/SEO → csr-ssr-ssg CSR vs SSR vs SSG
• FCP/TTI/P90/P95 指标采集 → first-paint-vs-time-to-interactive 性能指标
• SSR Hydration、水合不匹配 → react-hydration-mismatch Hydration 原理
• Docker/部署链路 → docker-moc Docker 部署
• Cursor/GPT 实际使用比例 → cursor-vs-traditional-ide-interview-question Cursor 使用
• 如何准备 AI 编码上下文 → ai-assisted-frontend-development-workflow AI 编码工作流
• Prompt 设计技巧 → ai-code-review-and-refactoring Prompt 工程
• AI Agent / Tool Call / Function Call → function-calling Function Call
• MCP（Model Context Protocol） → mcp MCP 是什么
• 是否自己对接过大模型官方 API → ai-chat-and-streaming-ui 大模型 API 对接
• 现场用 AI 工具在 10 分钟内还原网页 → ai-assisted-frontend-development-workflow AI 还原页面

高频题至少要答到什么程度

DOM / CSS

• 动态加载 script：至少会写 createElement('script') + onload + onerror + appendChild
• 动画题：至少知道这类 hover 切换题优先用 transition
• 事件委托：至少会用 event.target，更稳的是 closest() + data-*

JS / 语言机制

• 事件循环：至少能分清同步、微任务、宏任务的基本顺序
• this 丢失：至少知道“调用位置决定 this”，解构方法后 this 容易断
• 计算属性名：至少能讲清 [key] 和 key: 的区别
• 浮点数精度：至少知道二进制小数无法精确表达某些十进制小数

React / 工程化

• Hooks：至少能讲到闭包、依赖数组、不可变更新、useRef 与 state 的边界
• 状态管理：至少能讲清本地状态、Context、外部 store 的边界
• SSR / Hydration：至少知道“服务端先出 HTML，客户端再接管”
• 性能指标：至少知道 FCP、TTI 是什么，P90/P95 是怎么反映长尾体验的

AI 工程能力

• AI 编码上下文：至少知道要给目标、范围、约束、输出格式、验证方式
• Function Calling：至少知道模型不是真正执行函数，而是生成工具调用请求
• MCP：至少知道它是工具 / 资源接入协议，不只是“另一个 API 名词”
• AI 工具还原页面：至少能讲出“拆结构 -> 出骨架 -> 人工 review -> 再补细节”的流程

备考优先级（按命中率排序）

第一优先：React + 工程化

• react-hooks-interview-deep-dive - React Hooks 面试深度解析
• react-state-management-selection - 状态管理设计
• react-ssr-vs-hydration-vs-server-components - Next.js SSR/Hydration
• react-hydration-mismatch - 水合不匹配问题
• first-paint-vs-time-to-interactive - 性能指标采集

第二优先：AI 工具工作流

• cursor-vs-traditional-ide-interview-question - Cursor 实际使用
• ai-code-review-and-refactoring - Prompt 设计
• ai-assisted-frontend-development-workflow - AI 编码工作流

第三优先：AI 工程能力

• function-calling - Tool Call / Function Call
• docker-mcp-toolkit - MCP 概念与使用
• ai-chat-and-streaming-ui - 流式输出前端实现
• ai-output-uncertainty-and-ux - AI 结果不稳定的体验设计

第四优先：浏览器与网络

• browser-url-to-page-interview-question - URL 输入到渲染
• http-cache - 强缓存/协商缓存
• event-loop-interview-question - 事件循环
• cross-origin - 同源/跨域
• http1-http2 - HTTP1.1 vs HTTP2
• reflow-vs-repaint-interview-question - 回流重绘

第五优先：手写题 + 排障

• debounce-and-throttle - 节流防抖手写
• 系统排障/业务抽象题

备考顺序建议

1. 先刷熟：JS 输出题 + 事件循环 + this + Promise
2. 再过一遍：回流重绘/缓存/HTTP/URL 渲染链路
3. 重点准备：React/Next.js/性能监控/APM/SSR Hydration
4. 单独准备：AI coding 工作流题（Cursor 怎么用、Prompt 怎么写、怎么让 AI 帮你还原页面、怎么做人类 review、怎么解释 Agent / Tool Call / MCP）

这轮已经补强的关键知识点

• event-bubbling-capturing-delegation-interview-question：已经补到能回答“多个按钮统一绑定点击事件，如何判断点的是哪个”
• javascript-dom：已经补了动态加载 script 并在完成后回调的代码写法
• css-animation：已经补了 hover 变色 + 变圆 + 200ms 的直接解法
• js对象：已经补了对象属性访问和计算属性名输出题
• ai-assisted-frontend-development-workflow：已经补了“如何准备 AI 编码上下文”和“10 分钟内还原网页”的答法
• function-calling / mcp：已经补到能回答两者分别解决什么问题
• ai-chat-and-streaming-ui：已经补到能回答“是否自己对接过大模型官方 API”
• first-paint-vs-time-to-interactive / ai-frontend-monitoring-metrics：已经补到能回答 FCP / TTI / P90 / P95 怎么理解和怎么采
• browser-url-to-page-interview-question：已经补到能按 DNS -> TCP/TLS -> HTTP -> 渲染主线完整回答
• react-performance-overview / react-state-management-selection：已经补到能回答 React 性能优化和状态管理选型的工程判断

注意事项

• 笔试形式：不同批次不一样，有的统一考试日 2 小时，有的发链接后 48 小时内入场。以收到的邮件为准。
• 题型有选择题、简答题、代码题，纯文本作答，不是交互式 IDE。
• 同场可能还有 MBTI/性格测试。

相关链接

• frontend-interview-high-frequency-moc - 前端八股文导航
• ai-agent-creation - AI Agent 入门
• ai-module - AI 前端工程相关笔记

实际

很奇怪 总分 70分（2选择，10问答）

选择

contain、auto、cover、100% 100% 把图片作为封面不会剪裁 div 相邻兄弟选择器 +

问答

1. 点击隐藏所有 宽度 大于 100 px 的图片
2. 正则替换 怎么只替换 div 不报错 <div> 、</div>
3. 一个代码是否有问题
4. 两种方式实现垂直居中
5. 函数柯里化、实现一个 add()()
6. var 变量提升和 函数变量提升

Related notes

• 前端工程化MOC
• 前端基础MOC
• CSS MOC
• ECMAScript MOC