【面试流水帐】一年半经验前端年末求职路

前言

先简单介绍一下个人基本状况~楼主是澳门某大学2018届软件专业本科，大四上学期经过平常实习入职360企业安全集团的华南基地（Base 珠海，现更名为奇安信集团），18年春招转正担任前端开发工程师，到今年11月份已经有两年左右开发经验。在原单位里以 toB 端页面开发为主，除了平常的业务系统开发，还参与了二/三维数据可视化大屏的项目，并接触到一些项目研发管理相关的经验。

面试经历

我从今年9月份开始肯定跳槽意向，9-10月开始有针对性地进行复习和刷题，11月上旬开始密集的面试流程，一共投递了如下公司的岗位（主要是使用 Boss 来投递）：

• Offer 收获：字节跳动、快手、拼多多、滴滴、OPPO
• 技术面经过但因为流程较晚没有继续进行HR面：有赞、百度、阿里Lazada、美团
• 挂：平安、企业微信、欢聚YY、微众银行

这段时间常常珠三角三地来回跑，最后11月底肯定 offer 意向，最终也是拿到了满意的 offer~而这三个月的经历也让我有一些新的感悟：

• 简历必定要有突出的点做为敲门砖（例如个人是可视化开发经验），可以让你得到面试机会之余，能更好地在面试过程当中展开角度新颖的、有意义的对话；
• 心态保持平和、态度保持谦虚，面试中没回答上来的问题并非你的致命缺陷，面试者也在经过问题和回答不断探索被面试者的技术边界；
• 面试的问题都是大同小异的，每轮面试结束后最好对问题作一个复盘的记录总结，不断迭代出最全面的回答。

面试准备

虽说做为软件开发工程师，须要靠锲而不舍的锻炼、积累和沉淀提高我的技术水平；但在日常业务开发中不多有机会面面俱到地覆盖到技术的每一方面，尤为对像我这样毕业一年左右的职场新人来讲，面试前期作好充足准备是必不可少的。

• 算法：完整地精读《剑指Offer》，对里面的60+道题尝试复现，笔记记录技巧并尝试触类旁通；9-10月集中刷 leetcode 140+道，按照力扣网站上的“探索”模块刷题效率更高；
• 专业技术：从 CSS、 JS 语法、HTTP 基础、三大框架、浏览器原理和前端安全等几个大方向去列复习提纲or脑图，系统地、有时间规划地复习记忆性的知识点，同时尝试将知识点与工做中的实际业务联系起来，在这个过程里你会发现除了巩固本身的知识点，还能创建我的的知识图谱，对本身的总体水平有更加清晰的了解，从而更有针对性地查漏补缺；
• 思考总结：除了基础技术知识的掌握，候选人的综合能力也是面试考察的重点。在“大前端”思惟下，咱们须要考虑：前端性能优化、Node.js 工具链、异常监控和部署打包等问题；在综合软技能上，咱们须要提早总结如下几点：对业务系统的理解、研发流程的推动、开发难题的攻关和团队协做的实践等。

这里推荐一下一些准备过程当中收获很大的博客/文章：

• 冴羽的博客，包括 JS 深刻系列、JS 专题系列等
• 前端工程师手册
• The Book of Shaders
• 浏览器渲染详细过程：重绘、重排和 composite 只是冰山一角

题目记录

这里以一个流水帐的形式记录每轮技术面试涉及的问题，供你们参考各个公司如今业务的方向和面试的倾向，暂时不整理完整答案。PS: 后期面试安排太过密集不少题目没来得及记录请见谅~😅

Promise.resolve()😼

拼多多【电话一面】

1. 如何在 React 项目中使用 Echarts，在哪一个生命周期实例化图表（componentDidMount），什么场景下使用了 Echarts 的高级特性
2. 项目 i18n 的方案，在可视化图表中如何引入 i18n
3. React Hooks 解决了什么问题，如何用 Hooks 的方法去模拟 Class Components 的功能
4. Function Component 屡次执行，useRef() 会不会每次都执行生成新对象
5. React16 对比 15 有什么更新（Fiber 历史背景和原理）
6. 什么是受控组件和非受控组件
7. React项目的技术栈是怎样的？讲一下 redux-saga 的概念、API 和用法
8. Redux 的三大特色

   单一数据源、State 是只读的、使用纯函数来修改状态

9. 项目中是否使用了 TypeScript，TS 中的枚举是怎样写的，若是用原生 JS 怎样实现
10. webpack 配置能够怎样优化，有哪些策略，若是项目要使用 TS 在 webpack 中须要配置什么
11. 项目使用了 ES6 吗，是如何使用 ES6 的（Babel 使用 @babel/preset-env）
12. 举例子 window 对象下的一些属性
13. 讲一下对闭包的理解
14. 如何用原生 JS 实现 Promise 的 polyfill，须要注意哪些点
15. HTML 的字符实体是什么，都有哪些（❌一开始没反应过来字符实体是什么）
16. 前端模块化是为了解决什么问题，简单介绍目前有哪些模块化规范，CommonJS 和 ES6 的区别
17. 常见的前端涉及到的安全问题，以及如何防范
18. 是否用 LESS/SASS，LESS 中如何写函数
19. 编程题：有一个长度为 32 的数组，如何将它转换为长度为4*8的二维数组

拼多多【电话二面+coding】

1. 详细讲讲最近一个负责的项目的技术架构，为何要迁移 UI 组件库
2. Web Worker 是什么，Echarts 和 Web Worker 结合使用场景
3. React 和 Vue 的优缺点对比，MVVM 双向绑定流程
4. React/Vue 的 Hooks 是须要解决什么问题，React Hooks 有哪些 API，介绍一下 useEffect 的调用时机
5. 什么是高阶组件 HOC 和 Render Props，他们的的区别是什么
6. 讲一下博客系统中 Vue SSR 的大体流程
7. 页面换肤方案

   <link> 标签请求新主题的样式文件、React Context API、CSS 变量，这里最后还提到了 localStorage 的使用，保存用户上次的选择

8. 编程题：数组去重

拼多多【视频三面】

1. React 和 Vue 的分别的优势，你以为如今这些 MV* 框架之后会往哪一个方向/趋势发展
2. 有没有作过项目的性能优化，从业务和工具链两个方面讲
3. 最近遇到的技术难题
4. 有没有参加过开源社区给开源项目贡献代码；介绍一下本身业余时间作的开发工做
5. 在团队内是否有维护公共组件或工具，你以为维护公共逻辑跟我的开发上有什么区别，如何去协调不一样开发者的需求
6. 团队的组成状况，在团队协做上碰见什么困难，是如何解决的；
7. 未来的职业规划是怎样的，带领团队/下属最重要的是什么
8. 最近读了什么书有什么感想，有没有写技术文章

字节跳动【视频一面】

1. WebGL 了解到什么程度，都有哪些基本功能；项目中是如何使用 WebGL 的
2. 讲一下 GLSL Shader 实现亮度(Brightness)、对比度(Contrast) 和边缘检测(Edge Detection) 是如何实现的

   回答的时候忘记了对比度的算法实现没答上来，讲了下明度 Luminance 的调节；亮度Brightness是RGB+亮度系数；边缘检测和图像锐化是使用 Convolution Kernel 卷积核加深中心像素与周围像素的色彩差值梯度，使边缘更加突出

3. 亮度、对比度与原像素的 RGB 通道分别是什么关系

   这题其实我没理解题意，其实如今想一想应该答案是 亮度是在原RGB上直接添加亮度系数(color+brightness)，而对比度是 在原色彩与中间值的差 上与对比度系数相乘 (color-0.5)*contrast+0.5

4. 是否有进行过 node 开发；简单介绍一下你开发的这一个 webpack 插件的功能和原理
5. Vue 响应式原理；响应式原理中的 Deps 数组订阅发布中心是在什么时机去收集依赖的？
6. 介绍这三个步骤的流程 Vue Template -> VDOM -> 真实 DOM；
7. Vue Template 生成的 render 函数里面都有什么内容（主要要提到 createElement 函数的递归调用）
8. 编程题：Promise 调度相关，JS 实现一个带并发限制的异步调度器 Scheduler，保证同时运行的任务最多有两个

字节跳动【视频二面】

1. 如何预防/减小 Node.js 程序的崩溃，有没有实际操做的案例
2. 如何判断一个点在正多边形内部
3. Web Worker 的局限性；如何使用动态的 JS 代码生成动态的 Web Worker 实例（ArrayBuffer + URL.createObjectURL）
4. iframe 中脚本的执行是否会阻塞主页面的渲染线程和 JS 线程，从不一样浏览器内核去分析
5. websocket 和 TCP Socket的区别，websocket 的握手过程，为何要基于 HTTP 请求来握手
6. CSS 选择器的权重，使用什么机制来计算的
7. CSS 后处理器和预处理器分别是什么，有什么区别
8. 什么状况下会发生 Ajax 的跨域请求，浏览器是如何处理 Ajax 跨域的
9. ES6 箭头函数与 ES5 普通函数的区别
10. Promise 的 then 方法能够 chaining 调用，它是如何保存这个过程当中的值的；then 中回调函数若是返回 Promise/带有 then 属性的对象（then属性值是function 或者非 function 的状况下）/非上述两种 这些状况下，then() 方法是如何处理的
11. Vue 中为什么不使用 Object.defineProperty 去转换数组为响应式数据，对数组是如何处理的

字节跳动【视频三面】

1. 介绍以为最有挑战的项目，作了什么工做
2. Vue 虚拟化列表的思路和实现原理
3. 优化树形图表渲染的其余方法
4. 简述思路：在不使用 Promise 或 async/await 等其余 JS 异步控制的状况下，设计一个网络请求 Scheduler 类，确保每一个 ajax 请求的回调函数按发起请求的顺序执行
5. 项目开发流程，异地协做流程保证
6. 有没有特别想作的业务方向；之后的工做和技术规划

快手【视频一面】

1. 六道笔试题和几道简单的编程题
2. 手写 bind 和 apply
3. 水平垂直居中的几种方法
4. 扩展 flex:1
5. 请用 React Hooks 实现无状态组件的 componentDidMount、componentDidUpdate 生命周期效果
6. setState 的第二个参数的做用
7. useCallback 的使用
8. React 受控和非受控组件的区别
9. HTTPS 和 HTTP 的区别
10. CSRF 如何防护
11. Promise all/race/finally 的原理
12. 节流和防抖的区别和应用场景
13. 解释 0.3-0.2=0.99999999...
14. 原生 DOM API 相关：建立节点、插入/移除节点、选择节点
15. element.style 和 getComputedStyle() 的区别
16. 下面代码的输出结果是

    // counter.js
    let counter = 10;
    export default counter;
    // index.js
    import myCounter from "./counter";
    myCounter += 1;
    console.log(myCounter);
    复制代码

17. 请用JavaScript实现一个函数求解整数N，N知足 %2==1，%3==2，%5==4，%6==5，%7==0

快手【视频二面】

1. 输出代码结果：函数提高问题、JS 异步事件循环问题
2. React Hooks 优势、解决什么问题、useEffect 的调用时机
3. webpack 优化的方法和配置
4. webpack 开发插件的原理，简单介绍你的插件
5. webpack watch 自己的 cache 机制
6. 讲以为最有挑战的项目，作了什么工做，作了什么优化
7. 如何判断模块的循环引用（DFS 拓扑排序）

快手【现场技术终面】

这轮面试我临时订机票从珠海坐飞机飞北京到快手总部，11月里从24摄氏度到零下一度的落差真的要把我这个广东人冻僵了QAQ 不由感叹祖国幅员辽阔啊~

1. 项目技术选型，为何又有 Vue 又有 React
2. 项目的研发管理流程
3. 前端项目自动化发布方式
4. 团队状况，团队沟通中遇到最大的困难，我的在团队中的角色

OPPO-商业化

一面电话沟通，都是前端很是基础的问题，例如闭包、跨域、Vue响应式、HTTP 基础等等；二面现场面、HR电话面

滴滴-两轮车业务

技术面都是电话沟通，HR视频面，后面题目没有记录了

1. webpack 打包的整个流程，简述 webpack 插件的开发和功能
2. Commonjs 原理
3. Koa/Express 中的中间件是什么
4. 如何提升Node.js 程序的稳健性
5. 如何理解 HTTP 协议
6. RESTful API
7. HR面：项目异地协做是如何保证流程，对流程推动作了什么工做；从0开始带项目的思路是什么

Promise.reject()😿

平安人寿【电话一面挂】

1. 数据看板开发流程，数据看板是静态数据的仍是实时渲染的？
   • 静态数据数据量多大，数据量大的时候是如何优化性能的
   • 可视化看板实时渲染的技术方案
2. Echarts 除了普通的柱状图折线图，还用过什么高级功能
3. Canvas 与 SVG 的区别，和它们在 Echarts 中使用的区别

   Canvas 适合绘制图形元素数量巨大的场景，如热力图、地理坐标系或平行坐标系上的大规模散点图和线图，SVG 本质上生成了 DOM 节点，会对浏览器渲染形成很大的负担；SVG 的优点是占用的内存更低（对移动端尤为重要），渲染性能略高，而且用户使用浏览器内置的缩放功能时不会模糊；并且由于是生成了 DOM 节点，在开发上直接使用 DOM API 进行用户的交互会更方便

企业微信【视频一面挂】

1. 项目中的权限系统是怎样实现的
2. Vue 虚拟化列表的实现原理
3. webpack 优化打包的策略、内部的机制和插件开发的原理
4. 假设如今有一个微信公众号文章的页面，能够展现文章、图片、视频和读者留言，从安全和交互性能的角度去讲一下如何优化

   安全：用户输入的时候编辑页面防止 XSS 攻击、敏感字符过滤、外链资源白名单过滤、图片资源脱敏处理转换为本地资源；优化：关键请求路径优化、事件监听节流、非首屏资源懒加载、代码压缩、服务端渲染、利用好缓存策略、开启 HTTP2

5. HTTP2 相对于 HTTP1.1 有哪些优势，解决了什么问题

   首部压缩、数据分帧、多路复用，服务端推送

6. Webpack 实现热更新的流程（webpack-dev-server 和 HotModuleReplacementPlugin 的实现）
7. Vue 生成 VDOM 的流程和 Vue 响应式原理
8. 看过哪些项目的源代码，为何要去看源代码
9. 有没有开发太小程序，是否有 TypeScript 开发经验
10. 介绍一下如今团队的基本状况，在团队内部的贡献（技术分享、维护工具）

欢聚YY【现场面挂】

1. 如何优化网页上须要展现的超大图片，从请求和性能来解释
2. 实现 Adblock 的策略
3. WebGL 渲染的流程；GLSL Shader 是什么，有什么做用
4. Shader 实现一个滤光滤镜的思路
5. WebGL FrameBufferObject 的概念
6. 是否有对动画有了解、FLIP 的概念和应用；Vue Transition 源码底层原理
7. Vuex 的单向数据流模型；对比直接在 window 下用变量储存数据，使用状态管理库的优势在哪里

微众银行【现场一面 没有下文】

1. 可视化大屏是怎样使用 websocket 中遇到什么问题
2. 如何管理 redux 之间不一样模块的数据
3. 讲一下使用 redux-saga 控制数据流的具体需求的实现
4. 一个监听了 input 事件的输入框，每次触发input都会发送请求，这个输入框的优化方案
5. 防抖的做用和手写实现
6. 看了 Vue 代码有哪些本身的心得
7. vue-router 的原理，history 模式和 hash 模式的区别，为何 history 模式是先进行 app 内模块的切换再去手动更新路由
8. 介绍一下项目中单元测试的状况，用例有多少，如何运行
9. 编程题：将一个对象中全部值为字符串的提出取出来，拼接成大的字符串
10. 开放题：一共有103位参赛者的1v1赛事，设计一个比赛淘汰机制

未走完的流程👨‍💻‍

有赞-监控平台【视频+电话+在线coding 过】

1. CSS 选择器有哪些，优先级是怎样的，!important 的表现
2. display 有哪些值，inline 和 inline-block 的区别
3. float: left/right 的表现是什么，什么是 BFC，能解决什么问题
4. websocket 在项目中的用途，握手过程
5. Babel 的原理、运行过程、如何作 Polyfill
6. === 和 == 的区别
7. JS 基本类型
8. webpack 优化和配置策略
9. Service Worker的做用；如何划分缓存策略，对同源/非同源的资源是如何处理缓存的
10. SSR 的好处，主要解决什么问题
11. coding: 二叉树的遍历和镜像；实现 EventEmitter

百度-基础架构部 【电话三轮技术面 过】

1. 项目技术选型，不一样场景为什么使用 Vue/React
2. HTTPS 原理，CA、数字证书、数字证书的信任链；
3. 对优化业务开发流程作了什么推进工做；项目开发规范：API 规范、仓库和分支规范、需求/开发/提测规范
4. 从输入 URL 到网页渲染，发生了什么事情
5. coding: 查找根节点到目标节点的路径

美团【电话一面 过】

剩下的流程须要到北京总部，放弃流程

阿里LAZADA【电话一面 过】

一面完两周过去了还没消息我觉得已经凉了……跟我联系的面试的前辈跟我说还没凉可是流程比较慢，这时候已经接到 offer 了就没继续等下去🤣

1. Flexbox 经常使用规则，如何垂直居中
2. CSSOM 是如何寻找 DOM 节点并生成 Render Tree 的，CSS 选择器权重优先级
3. Service Worker 的注册时机与页面资源请求代理相关问题；资源缓存的策略
4. SSR 是怎么作的；如何优化 SSR 致使的服务器渲染 CPU/Memory 太高问题
5. 从输入 URL 到浏览器渲染发生了什么事情
6. HTTPS 和 HTTP 的区别；浏览器缓存查找过程

关于技术终面和HR面

基本全部的技术终面都会问到如下主观性问题：项目难点、项目研发流程、技术选型、团队状况、团队内部的贡献（技术分享、维护工具）、沟通技巧、我的职业规划；最后的“你还有什么问题要问我吗”是了解团队和公司状况的一个极好的机会，我通常会提问：

• 可否对个人回答作总结性点评、对我有没有什么建议
• 团队当前的技术栈和业务方向
• 团队在公司内外维护的公共组件 or 开源产品，和在社区的活跃度
• 将来加入这个团队后，个人角色、职责和 leader 对个人指望

写在最后

经历此次求职，其实我也更加深入地认识到前端工程经历这15年的发展，已经进入了一个比较平稳的状态：初级人员饱和、高级人才稀缺。初级新人找到突破口的惟一办法就是在专业技能熟练的基础上，往不一样方向横向挖掘亮点，如可视化产品开发、Node.js 工具链开发等，以实际业务为基石，踏踏实实提高自我水平才是最重要的事~求职的过程当中我也一度迷茫过、自我怀疑过，感谢智广、剑诀、少杰、钺钺和予南这些深瞳小伙伴对个人鼓励和建议，也但愿这篇文章可以给正在求职的小伙伴带来一点帮助😎~