前端面试基准与面试题大纲
重要通知
。
基本概况
参考资料
- 面试群：https://github.com/febobo/web-interview
- 前端面试宝典：https://xz-fe-interview.gitbook.io/fe-interview/
- 七梦前端面试真题题库：https://github.com/DrebeTeam/QM-FE-Interview
- 面腾讯、美团、天眼查等七家大厂前端有感：https://mp.weixin.qq.com/s/OmKNtiqAJUaUAVM2ih7pFQ
技术亮点、项目亮点、工作经历等都没有眼前一亮的地方，属于平庸类型。技术深度与复杂度（一）、项目挑战性（二）、前端成果输出（三）、名校与知企（四），这几样，至少要占一样，否则就淘汰了。
学习精神、奋斗精神、强大的执行力
第一、如何看到35岁的转折点？以及障碍？以及限制？ 第二、面试对象：前端前辈大牛、企业负责人，侧重点不同，表现内容则不同。
《前端大厂面试宝典》 https://www.zhihu.com/tardis/bd/art/402701310?source_id=1001 https://www.zhihu.com/tardis/bd/art/370311673?source_id=1001
- 面试者：
- 初面反馈：通过/不通过
- 前端职级：
- 具体理由
- 闪光点：。
- 具有深入技术细节的研究成果：。
- 参与或主导过中大型项目产品的成果：。
- 具有人效比高预期输出的团队带领经验：。
- 具有学习精神与奋斗精神的输出成果：。
- 与当前招聘岗位匹配程度：。
- 考察范围
- 生态技术栈的掌握度
- 大型项目的开发经验
- 疑难复杂技术的经历
- 前端团队效益的产出
- 前端工程化
- 前端架构设计
- 前端性能优化
- 前端提效与产研协同
javascript前端面试考点多
https://juejin.im/post/5aae076d6fb9a028cc6100a9 12个HTML和CSS必须知道的重点难点问题：https://juejin.im/post/5a954add6fb9a06348538c0d https://mp.weixin.qq.com/s/OmKNtiqAJUaUAVM2ih7pFQ
月薪6万
精通JavaScript
数据结构、算法、设计模式
前端架构
Vue3源码
webpack、vite：编写插件、优化构建编译流程、手写构建编译功能
攻克了哪些重大技术与疑难技术
3D、Three.js、webGL、webGPU
构建发布自动化系统
在你到目前为止做过的所有事情中，有哪一件事情可以证明你的学习能力很强？
- 同样的一件事情，实现了同样的目标交付，但是你的学习成本更少更低？
- 同样的一件事情，付出了相同的学习成本，但是你的产出价值更多更高？
基准目标
- 扎实的前端技术积累与健全的前端技术储备。
- 高效率的执行力与高效益的成果输出保障。
- 随时能够快速响应实现市场的业务需求，同时能够高效迭代更新产品的显著价值。
- 满足技术中心部门在不同阶段的规划实施落地与目标攻克实现。
资源文档
- 牛客网：https://www.nowcoder.com/
- LeetCode：https://leetcode-cn.com/
前端团队人才标准
前端团队需要什么样的前端人才？
现状可用性（可以解决当前什么问题）、未来可塑性（能够解决未来什么问题）
技术技能
扎实的技术功底，在技术层面能够持续性自我驱动提升与强化。
- Vue3生态技术栈：HTML5、CSS3、JavaScript、Vue、Vue-router、Pinia、Element-Plus、Fetch、Lodash、TypeScript、git、vite、ESLint等。
- node.js生态技术栈：node.js、koa、PM2。
- React生态技术栈：React、react-router、Redux等。
项目经验
- 能够胜任目前前端团队所负责或可能负责的多形态产品项目。
- 能够胜任新项目。
团队协同
具备团队高效协同协作的工作要求。
符合前端团队用人标准
- 坚决践行前端统一组织与调度，遵守前端团队基本纪律、建设规范与阶段性指标，维护前端团队形象与效益。
- 积极性、奋斗性、协作性、自驱精神，清晰的前端职业发展规划。
- 随时能够快速响应实现市场的业务需求，同时能够高效迭代更新产品的显著价值。
- 满足技术中心部门在不同阶段的规划实施落地与目标攻克实现。
其他综合评估
- 目前能够给前端团队带来什么效益？
- 未来能够给前端团队带来什么效益？
- 符合技术中心部门用人标准。
- 符合公司价值观，能够参与、辅助、驱动与引领实现公司的愿景和使命。
用两分钟介绍你认为自己在前端行业上做得比别人更好的地方：。 在你做过的业务中，哪些需求实现最能体现出你的技术亮点，这些技术难在哪里，具体的成果产出是什么：
在你工作中有用到设计模式的需求场景吗，这些设计模式在业务上的具体实现过程：。
数据结构中的栈、堆、队列之间有什么区别：。 在你工作中有用到哪些数据结构吗，为什么会选择这些数据结构：。
在你工作中有用到哪些算法吗，为什么会选择这些算法：。 快速排序与冒泡排序的设计原理与相关差异：。
React18的Fiber双缓存的实现过程：。
node.js的模块加载优先级：。 node.js事件驱动模型的具体实现过程：。
浏览器的主线程是什么：。 熟悉HTTP协议吗，HTTP协议不同版本之间有什么区别，HTTP2的多路复用实现原理是什么，二进制分帧数据层的实现过程是什么，熟悉HTTP3吗：。 HTTP中TCP的三次握手实现过程：。 HTTPS中TLS的三次握手实现过程：。
熟悉Chrome的Core Web Vitals性能衡量指标吗：。 做过前端性能优化吗，在优化过程中有用到哪些性能衡量指标：。 最大内容绘制(LCP)是指什么，这个指标的优化措施有哪些：。 首字节时间(TTFB)是指什么，这个指标的优化措施有哪些：。 总阻塞时间(TBT)是指什么，这个指标的优化措施有哪些：。
引起内存泄漏的原因有哪些，怎么去排查前端页面是否存在内存泄漏：。 布局计算、渲染与绘制对内存泄漏存在哪些影响？
git中merge与rebase有什么区别：。
带过多少人的前端团队，有关注过人效比吗，你带过的团队人效比最高是多少：。 做过前端团队的提效工作吗，采取了哪些实现方法，说说具体实施过程：。
前端版本发布上线后对页面与资源有做缓存吗：。 前端版本发布上线后如何解决用户本地缓存还是旧页面与旧资源的问题：。 如何解决前端与后端发布上线时间没有同时发布导致接口的数据结构与字段出现不匹配的问题：。 有没有考虑到前端非覆盖式发布的实现：。 前端非覆盖式发布具体如何实现：。
有过能够体现学习精神与奋斗精神的具体经历吗，具体成果输出是什么：。
了解掌握前端的哪些新技术吗：。 说说你对前端行业的看法与自己的职业规划：。
web component web workers webAssembly
前端综合知识
自我介绍
用三分钟作一下自我介绍，重点突出你技术亮点与项目难点，以及你的核心优势？
基础试题
熟悉ECMAScript的标准与规范吗？目前的最新版本是多少，它对你有什么帮助？
谈谈在浏览器中输入一个URL到返回网页内容完整呈现的整个实现流程？
聊聊在浏览器中一个已有网页内容的Tab，输入新的网页URL后Enter，已有的网页内容什么时候被新的网页URL替换？
HTTPS协议的握手机制？
熟悉HTTP协议吗，HTTP协议不同版本之间有什么区别，HTTP2的多路复用实现原理是什么，二进制分帧数据层的实现过程是什么，熟悉HTTP3吗？
HTTP缓存的设计原理？
聊聊网页资源的加载机制，即网页中的各种资源在浏览器中的加载机制？
聊聊网页资源的执行机制，即网页中的各种资源在浏览器中的执行机制？
前端跨域解决方案
前端安全解决方案
前端异常错误解决方案
JavaScript
- JavaScript的原型与原型链，原型链在哪些场景中会表现出他的优势与缺陷？
- JavaScript的数据类型，以及各种类型的存在缺陷问题，如果去优化解决这些自身存在的缺陷？
- JavaScript的高阶函数？
- JavaScript中的Proxy对象与Reflect对象的实现原理与应用场景？
- JavaScript中async与defer的功能与差异？ JS的运行时是什么，包括哪些东西：。 JS中堆内存与栈内存之间有什么差异：。 JS的事件循环模型的具体实现过程：。
浏览器的同步加载、异步加载、延迟加载与并行加载的差异：。 JS中同步执行、异步执行、延迟执行与并行执行的差异：。 JS的数据类型有几种：。 Proxy对象与Object对象中defineProperty方法之间有什么差异：。 Reflect对象与Object对象之间有什么差异：。 Map对象与Set对象之间有什么差异：。
TypeScript
- TS中类型与接口的区别是什么：。
- TS中装饰器的实现原理是什么，有哪些常见的类型：。
- TS中联合类型与映射类型是什么：。
Vue3
- Vue3的生命周期与每个钩子函数的作用与使用场景？
- Vue3具备哪些新特性，它解决了Vue2存在的哪些问题？
- 谈谈Vue3中模板字符串渲染工作流程？
- Vue3响应式系统的设计原理？
- Vue3中diff算法的时间复杂度，以及具体实现过程：。
- Vue3的通信机制，在具体业务实现中用到哪些方法？ 熟悉Vue3生命周期钩子吗，在业务场景中具体实现了什么需求：。 Vue3中用到了哪些设计模式：。 Vue3中用到了哪些数据结构：。 Vue3中用到了哪些相关算法：。 Vue3中插件的实现原理与具体类型：。 Proxy对象与Reflect对象在Vue3中有哪些地方具体用到：。 Vue3中Virtual DOM的实现过程：。 熟悉JS写的snabbdom库吗：。
React
HTML5
- HTML5语义化标签的理解，在实际工作中如何更好地利用好语义化标签？
- HTML文档中如何实现各种资源的预解析、预连接、预获取、预渲染与预加载等？
- 关注PV（Page View）页面访问量、IV（Initialization Vector）独立IP访问数、UV（Unique Visitor）独立访客访问数、QPS（Query Per Second）每秒处理请求数这些指标吗？
CSS3
- 谈谈CSS中BFC布局的原理，以及触发BFC布局的条件？
- 谈谈弹性盒子的扩展比率与收缩比率？
设计模式、数据结构、算法
- 在工作中用过哪些设计模式，主要准守哪些设计原则？代理模式、中介者模式、观察者模式、前端控制器模式、拦截过滤器模式
- 在具体项目开发场景中设计过哪些数据结构，列举的这些数据结构适合运用在什么场景中，这些数据结构存在什么缺陷？
- 数据结构中的栈、堆、队列的之间有什么区别：。
- 在具体项目开发场景中设计过哪些算法，列举的这些算法适合运用在什么场景中，这些算法存在什么缺陷？
- 谈谈快速排序与冒泡排序的设计原理与具体实现？
项目经验
- 意愿倾向: 辅助性、主导性、驱动性。
- 代码版本、工程协同、分工协作、争议解决、矛盾冲突。
- 业务场景、技术难题、工程思维。
- 在工作中参与的产品项目，有什么显著的亮点，遇到过什么挑战，解决过什么复杂的场景问题？
职业发展
- 你是属于参与辅助性人才，还是驱动引领性人才？如何看待职场发展的自驱精神、"ALL IN 目标"精神、"ALL IN 效益"精神？
- 谈谈对前端岗位的认知，是否具备明确的前端职业规划，如何在前端领域保持自身的技术技能提升？如何增强自身的前端显著竞争力？
浏览器
网页生命周期
- 在浏览器中输入一个URL到URL网页内容完整呈现的整个流程。
- 在浏览器中一个已有网页内容的Tab，输入新的网页URL后Enter，已有的网页内容什么时候被新的网页URL替换？
当新输入的网页URL HTML文档加载完成后，已有网页内容就被替换。这时如果新的网页资源加载延时或执行卡顿，就会出现页面空白问题，直到网页资源加载并执行，才能渲染呈现完整的网页内容。
网页资源加载机制
网页资源执行机制
前端跨域解决方案
前端安全解决方案
前端HTTP缓存实现机制
javascript核心知识
事件循环
String字符串
Number数字
- 精度问题
Array数组
Object对象
HTML5核心知识
CSS3核心知识
前端架构设计
设计模式
设计原则
前端性能优化
Vue3生态技术栈
Vue3
基于什么样的动机与诉求，将Vue2升级到Vue3，在升级的过程中，遇到哪些业务技术兼容问题？
Vue3相对于Vue2，它具备哪些新特性，它解决了Vue2存在的哪些缺陷弊端或冗余问题？
Vue3的源码设计原理
模板字符串渲染流程
组件渲染流程
更新渲染流程
响应式实现原理
vue-router源码设计原理
pinia源码设计原理