前端面经

一面4.231.聊简历上的内容，优化白屏时间，这个时间是怎么监测的？有哪些指标？2.你用过哪些AI工具？聊聊它们在使用体验上的区别（豆包，deepseek)3.介绍localStorage,sessionStorage,cookie4.cookie放在哪？顺便说一下强缓存和协商缓存5.讲一下http状态码，要说出具体的6.跨域，同一域名不同路径，或同一域名打开多个标签，它们共享同一个localStorage和sessionStorage吗？为什么？7.如果我想统一域名下多次存储本地数据，每次不超过5M(localStorage现状的大小），但总量大于5M，有什么办法？8.用flex画一个色子的59.两数组按顺序合并再去重10.for..in和for..of什么区别？for..in..循环的数据类型是什么？二面4.25先问了项目，讲一下项目里的亮点和难点然后是一些常规八股，跨域和浏览器缓存啥的接下来两道手写题，一个是用vue手写一个通知窗口的组件（原题是react的，面试官看我主vue就让我用vue)；另一个是m元钱随机分给n个人，最大可分到m/2,最小可分到0.5最后聊了一下ai，你对ai的看法是什么，用过哪些ai工具

是的，没错，我还没似。😃一面大概50分钟左右😘0. 问实习期间遇到的困难1. CSS选择器、优先级、属性选择器2. display:flex后会发生什么3. JS怎么写异步代码4. JS事件循环、宏任务、微任务5. js常用数组方法，哪些改变了原数组6. 看代码：promise异步代码那种7. 手撕promise.all，先问我怎么一起发十个请求，答曰promiseall，那手写一下吧，原来是这样丝滑转场的。8. React和Vue的区别9. 虚拟dom和真实dom的区别和优势10. useState为什么返回数组11. 组件通信12. 父组件如何调用子组件方法(forwardRef)13. ref的作用，和useState的区别，ref是否实时更新14. React hooks为什么不能写在判断语句中15. 优化React代码(useMemo、useCallback)，缓存这些值有什么作用16. React组件怎么插到原生dom里(ReactDom.render、ReactDom.createPortal)17. ts，谈对ts的理解，与js的区别，type和interface的区别18. get和post的区别19. http状态码20. tcp为什么三次握手聊家常：怎么学习前端的、后端技术栈，node、看什么书反问：流程：三面技术+一面hr，部门：杭州有道mooc。合着杭州有道就这一个研发部门😅。总结：八股盛宴🤗3.31，收到消息了，一面已挂。还在的兄弟们加油吧。准备收拾收拾上班去了

一面(1h)1. 讲一个你参与过的项目，你在项目中的职责、使用的技术栈以及遇到的问题。2. BFC的作用及触发条件，使用场景讲一下。3. 在项目中，你使用过哪些ES6特性？4. 常见的HTTP状态码有哪些？分别表示什么含义？5. 前端缓存机制讲一下，如何利用前端缓存机制优化性能？6. HTTPS相较于HTTP有哪些优势？讲一下HTTPS的加密原理。7. 请求头中包含哪些重要信息？如何通过请求头实现跨域资源共享（CORS）？8. Vue的响应式原理是什么？如何实现数据的双向绑定？9. Vue的响应式原理中，为什么直接通过索引修改数组元素无法触发更新？如何解决？  10. 在使用Webpack时，你采取了哪些优化措施？11. 地图中大量标记点（Markers）的渲染性能如何优化？13. 实现一个函数，计算二叉树的最大深度。● 题目描述：二叉树的深度是指从根节点到最远叶子节点的最长路径上的节点数。请实现一个函数，接收一个二叉树的根节点作为输入，返回该二叉树的最大深度。● 输入输出要求：输入一个二叉树的根节点，输出一个整数，表示二叉树的最大深度。● 示例：// 示例二叉树：//     3//    / \//   9  20//     /  \//    15   7// 最大深度为3const root = {  val: 3,  left: { val: 9, left: null, right: null },  right: { val: 20, left: { val: 15, left: null, right: null }, right: { val: 7, left: null, right: null } }};console.log(maxDepth(root)); // 输出：314. 编写一个函数，实现两个二进制数字符串的相加，并返回结果字符串。● 题目描述：给定两个表示二进制数的字符串，编写一个函数将它们相加，并返回相加后的结果字符串。输入和输出都为字符串，且只包含字符 '0' 和 '1'。● 输入输出要求：输入两个字符串形式的二进制数，输出一个字符串，表示两个输入二进制数的和。● 示例：const a = "1101";const b = "1011";console.log(addBinary(a, b)); // 输出："11000"二面(1h)1. 讲一下你的前端模块化的理解。2. HTTP/2 解决 HTTP/1.1什么问题？3. 在你的项目中，你是如何设计埋点方案统计用户点击“加入购物车”的行为？4. Hash 模式和历史模式（History API）的路由跳转差异，如何实现服务端兼容。5. Vue 2 的 Object.defineProperty 和 Vue 3 的 Proxy 在响应式处理数组时的区别是什么？  6. 讲一下Vue 的异步更新策略，以及 nextTick 的实现原理。  7. Loader 和 Plugin 在 Webpack 中的作用有何不同？举例说明常见应用场景。  8. Webpack 热更新（HMR）的实现原理，包括客户端和服务端的协作流程。9. 手写一个支持异步链式调用的 Promise 基础版本，需包含 resolve 和 then 方法。 10. 给定数组 nums，判断是否存在三个元素 a, b, c 使得 a + b + c = 0。 11. 设计一个地图搜索框的自动补全功能。三面(40min)1. 讲一个你觉的最有成就感的项目？2. 平时用那个地图软件，你觉的百度地图和高德地图有什么区别？3. 在很多人协作开发中，若遇到接口定义不一致或代码冲突，你会如何推动问题解决？4. 你有没有团队中主动分享或推动技术方案的经历。5. 平时是怎么学习前端的？了解的最新的技术是什么 ？6. 未来3-5年，你希望在前端领域达到什么目标？地图的业务场景实现个人成长？7. 给定两个非递减整数数组 nums1（长度为 m+n）和 nums2（长度为 n），将 nums2 合并到 nums1 中，保持非递减顺序。

这次专门在一周截止时间前一天面的，超过了邮件48h，链接还能用这次需要手机扫码锁机，有几条血泪教训：① 一知半解没学好的领域，在最初的选择学习过的范围里不要选，因为真的会问，对我这种略懂皮毛的，八股真答不上来，换题也不会② 不要出其他动静，在被八股拷打脚趾抠地时，我下意识边抠手边回答，就是两个手指指甲盖相互磨那种很细微的声音，都被捕获并进行了异常声音识别提示，所以面试老老实实不要出其他动静。③ 记得关浏览器倍速，刚打开ai面试官以2.5倍速说完，什么都没反应过来的我：啊？题目如下：岗位热情度：为什么选前端，怎么学习各种学过的知识选择（确定后续提问方向）八股，每道题可换题，30s思考，5分钟作答：DNS解析过程，DNS prefetch作用？HTTP状态码301 302主要区别，应用场景和对搜索引擎优化的影响？什么是交换机和路由器？工作原理？解释css中自定义属性和预处理器变量，如css或less中的变量的区别，并讨论它们各自的优缺点。请解释CSS中的transform属性的作用，并列举至少3种操作类型。什么是单向数据流，它主要解决什么问题？说说这种开发方式的优点和缺点。什么是vue的全局状态管理为什么需要全局状态管理？有哪些常用的状态管理库？解释虚拟滚动virtual scrolling的实现原理及其性能优化方向。请列举至少3种调整JavaScript执行顺序来避免阻塞页面渲染的方式。项目：描述你最近参与的一个前端项目，并解释你是如何设计其架构的，包括技术栈的选择和理由。在这个项目中，你是如何确保前后端之间的数据传输安全性和完整性的？你是否使用了任何特定的安全措施或协议来保护数据？在处理用户认证和授权方面，你们采取了哪些措施来确保只有授权用户才能访问和操作这些数据呢？场景题：你正在开发一个活动页面，需要提供H5和小程序版本，请描述主要的实现方案以及方案间的差别。怎么封装和复用通用代码。你提到了x种实现方案，包括....，在选择这x种方案时，你会如何评估和决定哪种方案更适合当前的项目需求和团队资源？具体来说，你会考虑哪些因素来做出这个决策？综合素质：描述一次你在学校或实习中遇到一个新问题，并不能依赖已有知识解决。你是如何找到相关资源并学习解决方案的？在你使用这些方法解决问题的过程中，如何评估和验证你找到的解决方案的有效性和可靠性呢？自从投腾讯以来，面了两次ai，捞了三次一面，快碎了，打算面完下次把简历撤了，等沉淀一下再来面经有帮助的话麻烦送朵花~我想兑换牛客的周边

流程：意愿度问答（视频）→不定性选择→单选选择→专项问答（视频）其中选择题是纯选用过/会什么技术之类，不涉及技术考察专项问答，每问限时五分钟，分为三部分，分别是八股、项目提问、素质考察问题，其中八股每道题有一次换题机会。总体而言面试比较放松，但是ai只会读题干，遇到回答不上来的问题不会有任何提示，ai面试官感觉纯读题+展示功能，没什么交互。题干在屏幕的左上方，ai人物在中间，如果没有直视摄像头会一直提示，虽然好像没什么影响，但是突然弹出来会影响思路，所以对摄像头在键盘的面试者很不友好，读个题目都会提示直视摄像头。问题难度感觉总体还行，但我准备不充分，很多还是没答上来，建议八股部分如果第一道题能回答尽量回答，选择换题可能换到更不了解的题OTZ以下为面经：1. 请说说你为什么想要应聘前端岗位，在这方面做了哪些准备。2. 选择题多选■ 学过的计算机相关的课程■ 使用过的语言■ 使用过的框架■ 进行过哪些前端样式开发（动画过渡、布局、预处理器、组件化……）■……单选■ 最擅长的语言（前端方面）■ 最擅长的语言（算法方面）■ 最擅长的框架■……3. 请描述浏览器提供常用的调试工具，举例说明其在开发中的应用。4. 请详细解释下TCP和UDP的区别，它们各自的使用场景是什么？5. 请解释响应式设计的基本原则，并讨论如何使用媒体查询来实现一个复杂的响应式布局。6. 请说明如何在vue中的创建和使用自定义指令。7. 请问什么是异步加载？请列举至少三种常用的异步加载技术。8. 请列举常用的CSS预处理器，并解释其解决的问题和带来好处。9. 描述你最近参与的一个前端项目，并解释你是如何设计其架构的，包括技术栈的选择和理由。10. 在这个项目中，你提到前端需要处理复杂的数据关系并进行实时响应。请具体说明你是如何设计前端与后端的数据交互机制的，例如数据的传输格式接口设计的原则，以及如何确保实时性和性能的优化。11. 能否具体说明你是如何处理接口的版本管理和兼容性问题的？12. 开发一个即时通讯系统的前端页面时，你会如何设计消息的存储和同步机制？如何处理用户切换设备后的消息同步问题？13. 在用户选择同步消息时，你提到了会将数据库的内容进行同步到所有设备的信息中。这里涉及到数据一致性的问题，请问在同步过程中，如果出现网络延迟或部分设备未在线的情况，你会如何确保消息的最终一致性？14. 工作中需要面对全新领域的时候，你是怎么做的？能否举例说明？15. 描述一次你在没有明确指示的情况下，主动承担任务或解决问题的经历。面经有帮助的话麻烦送朵花~我想兑换牛客的周边   

如题，整理了几个冬春期间的面经，还有几个懒得听了2025.1滴滴自我介绍可以介绍下项目吗项目难点CSS 水平垂直居中？border box 和 content box 区别BFC 相关？ 触发条件？JS 基本数据类型函数作用域看输出，函数原型链输出事件循环题目防抖和节流哈希路由和 history 路由浏览器输入 url 到展示经历了哪些流程类组件和函数组件的区别类组件生命周期？useEffect 和 useLayoutEffect 区别，哪个先执行？useMemo 和 useCallback 的区别？useMemo 的理解对于 react vdom 的理解？2025.2wxg2.10lc322...

3.27一面50分钟1. 实习提问2. 计算机网络：osi七层网络模型、http和https区别、https加密的过程、为什么后面不继续使用非对称加密？3. css两栏布局，不用flex4. codingman5. 不均匀的硬币，实现一个公平的游戏6. eventemitter发布订阅模式7. 反问😂一面就挂了，基本都答出来了，二面机会也不给嘛😢有没有友友懂得，是不是遇上kpi了😤

人生第二次面试  1.  vue2,3区别2. 说说你的职业规划（不知道）3. VUE2合VUE3的响应式原理的区别4. VUE组件传值区别5. 如果我前端打开页面直接卡死，就是直接死掉，怎么查看问题，怎么解决6. 我构建打包过程要20分钟，打包体积有几个G，怎么优化7. 前端怎么监控错误8. 说说闭包9. 说说防抖节流10. 说说你项目中的一个难点，如何实现的，解决过程面试官很好，问题很基础，面了25分钟左右，没有算法手撕我以为我要死了。明天二面。

一、个人背景教育：本科双非+211硕工作：网易1年半B端+C端工作经验岗位：前端工程师结果：8月同时拿到了字节、百度、pdd的offer，最后入职字节，现字节某部门前端二、字节面试经过1️⃣技术一面自我介绍+项目经历+离职原因+职业规划会问一些基础的技术题，大部分都是leetcode中等难度的题项目部分会问你技术难点是什么，怎么解决的，有了怎样的产出离职原因和职业规划社招的人应该都知道怎么说，这里就不多赘述2️⃣技术二面自我介绍+项目经历先问算法题然后问你在项目里是怎么做一些提效工作的产生了什么样的收益，这时候会比较关注数据指标，可以把自己的结果量化一下3️⃣技术三面自我介绍+项目经历先问算法题这时候面试官对项目的考察会更细致关于项目里的难点，如果是提效的技术，要确定：做这个提效的技术产出和收益，以及有没有推广出去，团队成员的使用评价。4️⃣hr面主要是看你对于这份工作接受的意愿，心态上可以轻松一些三、总结面了这么多大厂，从我个人经验来说，要想增加拿offer的机率，有以下几个方面* 选岗上-选岗位相关度高的，仔细看岗位JD，不要为了进大厂而投，我投过腾讯、B站、米哈游，因为岗位不相关都没过，工作也是双向选择的过程，不能强求* 简历上-体现项目产出，按照难点-性能优化-量化指标的逻辑去写，没有产出的可以写写自己是怎么高效工作的* 面试上-leetcode算法题准备到中等难度，同时要多关注行业的新动态，比如AI方面的，对自己经手的项目熟悉* 心态上-多准备不要焦虑，与其一直刷经验贴，不如再去熟悉一下算法题          

本人双非本，211计算机硕。22年毕业后来广州。大部分会根据简历上做的项目和你介绍的点去问，建议把自己简历上写的点弄清楚，好去介绍。1. 自我介绍；2. 如何解决浏览器适配、兼容性3. 如何解决js css html新功能的兼容性问题；工程化是如何搭建的；4. css的样式的权重具体是怎么计算的5. 比如一个p元素，没有给他定义样式，那它的样式是怎么来的？他们的优先级是什么？[浏览器默认样式、继承样式、全局样式/重置样式]6.  进程与线程的区别7. js事件轮询（宏任务微任务，优先级）和nodejs事件轮训、浏览器的事件循环机制，8. 打开一个浏览器，浏览器自身它是有多个进程还是只有一个线程9、浏览器有哪些进程10、新开一个tab页，是新开了一个进程还是线程11、nodejs，优点是高并发？为什么它是单线程的还能实现高并发；12. 跨域的解决办法；除了配置代理，nigix、cors，前端还有什么解决跨域的方法；13. 什么是正向代理反向代理；14. 小程序性能优化做哪些内容；多平台的兼容性和稳定性15. 数据量大的情况下，除了虚拟滚动，分页，还有什么其他方法16. 输入url到它整个渲染过程做了那些事，具体说一下浏览器解析的一个过程17. 谈到浏览器的解析过程，js为什么会阻塞18.箭头函数、普通函数的区别，比如我要调用它的一个属性和方法它是怎么找的？19.推广ts的应用，ts有什么功能；如，枚举，枚举的源码、k与v怎么实现的相互转换20. http1和http2   http和https21.抓包工具用过哪些，什么抓包原理22.怎么学习的、怎么学习新知识的；23. 加班强度怎么看24. webview 预加载25. 把一个h5改成vue，原生界面打开是非常快的，接近秒开，我们想要在vue去替代他游戏内的一些原生组件，怎么样能尽量去还原原生效果；如何保证js原生界面、动画的效果，尽量达到原生界面的效果26 怎么使web页面网络请求的时间尽可能的短27. webview可以预加载吗求求求

30min 项目+ 5min 反问1.MCP2.双模式鉴权3.增删改查是否都需要鉴权4.对比单模式的优势5.Vue Router6.hash模式和history模式的对比7.Vue Router的怎么完成页面的跳转8.骨架屏实现原理9.讲一下懒加载10.再次进入一个页面怎么显示11.还有哪些优化方案12.keep-alive反问1.什么时候出结果2.具体业务3.AI对前端的影响到这里他才说他是搞安卓开发的，投的是应用开发工程师，属于是大前端   

1. 10w条消息怎么渲染，除了虚拟列表之外呢，性能优化2. IM增加查看消息已读功能，10w个人的群组，只能同步已读状态，全部发请求的话性能开销太大，怎么优化3. 职业规划4. 为什么前端面试官超级好，我知道自己洗白了后，反问他怎么优化1  2问，他说可以批量处理，降级处理，实在不行什么都不选染了，只渲染消息这个最关键的元素，他还笑着说刚刚只是面试，实际情况不可能10w人。🙏🏻