广州申迪前端面试题

复盘：因为只准备了一天八股，导致很不自信、面试时放的不是很开、比较紧张，不是特别满意流程：问题1 ：首先简单聊了聊实习和项目，问我要不要给项目加AI功能，有哪些想法？回复：太紧张了，没有结构化（没有做面试准备），扯皮了细节功能后，我说之后要加chatbot和对收集到的用户画像向量化。问题2：问实习webpack优化怎么做的？回复：1. 缓存配置，2. 并行处理(多线程、多进程配置)问题3：问对Vue和React哪个了解？问题4：说说Vnode吧回复：        首先讲了vnode为什么比直接操作dom好，从create分析，到update分析，到声明式框架（感谢霍春阳）。        然后很紧张，继续延伸说了vue的vnode和react之前的vnode和之后的fiber，顺着说了说react的createElement，和requestidlecallback，说了vue的vnode更复杂。转向说整个vue架构和react架构，比较组件级别和应用级别框架，最后说了diff，（因为我很害怕拷打我dom diff，因为忘了。。。。）问题5：问我css学的怎么样？flex和grid用哪个多一些回复：不屑于用组件库，平时自己写的多，但是还没入门，用flex多一些手写题：实现一个flex布局，子盒子随着宽度减小布局到下面本质就是flex-wrap的事情，我还以为拷打响应式。。打断我写媒体查询手写题目：手写防抖或节流，挑一个总结：        1.  没有实现调研投递到面试的流程到底多久，导致一天好几个面试，太累了；        2.  准备八股太晚了；        3.  太紧张了，没有在面试的时候掌控整个节奏，不够主动。        4.  简历上写的都应该事先结构化表达一下，不够充分；        5.  主动延伸防止被拷打是一个好方法。

滴滴一面js事件循环（补充了浏览器线程进程知识）异步promise（补充了async await）变量提升作用域箭头函数和普通函数以及this居中布局react hooksreact框架原理http状态码（补充了http缓存）浏览器渲染原理数组方法讲了项目细节四道题大题，两道事件循环，一道变量作用域，一道算法题（忘记是啥了）几分钟后秒过滴滴二面项目讲解，细节询问正则详细的api（不了解）模块化封装hooks,有发包吗，了解如何发包吗场景题，某个功能切换卡顿如何排查问题四道题大题事件循环机制一道全排列其他忘了感觉面试官非常好，不懂的会反向教我,体验感超好

一面(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 中，保持非递减顺序。

想哭，上午面完下午就约4点二面了。。还打算周末复习复习呢。不出意料很差劲。一面二面面试官很好，让我感受了什么是字节范，只是我现在不配。1. 自我介绍，怎么学习的；2. 详细介绍实习时慢SQL怎么做的；3. 介绍我自己的项目，爬虫怎么做的；4. Next.js SEO，其实应该讲讲SSR的(答得不好)4. 为什么爬虫要用BullMQ，不用不行吗，我答得不好(当初设计的时候就不清晰)；5. 来吧问问八股吧(虽然不爱问，但是还是问了)，HTTP, HTTPS, TCP三次握手、四次挥手(这周第一次问我，本来也不爱背，就记得关键点，为什么这么设计)；6. 简单的拷打:    a. 手写SQL，场景是搜索抖音发视频最多的五个人。。(好久没写了，groupby都忘了，唉)；    b. 算法题，560. 和为 K 的子数组，很简单，没做出来(我做算法题就像拉屎，憋出来也拉不出来)反问：- 忘了反问问啥了没啥好问的，因为觉得凉了心情有点差，面试官说他选的我的简历，一面面评特别好，说我学的很广不错，but。。要在不同场景下做不同的deep，要面大厂算法得做出来；- 给了我一些自信。