前言
先简单介绍一下我的基本情况~楼主是澳门某大学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 工具链、异常监控和部署打包等问题;在综合软技能上,我们需要提前总结以下几点:对业务系统的理解、研发流程的推进、开发难题的攻关和团队协作的实践等。
这里推荐一下一些准备过程中收获很大的博客/文章:
题目记录
这里以一个流水账的形式记录每轮技术面试涉及的问题,供大家参考各个公司现在业务的方向和面试的倾向,暂时不整理完整答案。PS: 后期面试安排太过密集很多题目没来得及记录请见谅~😅
Promise.resolve()😼
拼多多【电话一面】
- 如何在 React 项目中使用 Echarts,在哪个生命周期实例化图表(componentDidMount),什么场景下使用了 Echarts 的高级特性
- 项目 i18n 的方案,在可视化图表中如何引入 i18n
- React Hooks 解决了什么问题,如何用 Hooks 的方法去模拟 Class Components 的功能
- Function Component 多次执行,useRef() 会不会每次都执行生成新对象
- React16 对比 15 有什么更新(Fiber 历史背景和原理)
- 什么是受控组件和非受控组件
- React项目的技术栈是怎样的?讲一下 redux-saga 的概念、API 和用法
- Redux 的三大特点
单一数据源、State 是只读的、使用纯函数来修改状态
- 项目中是否使用了 TypeScript,TS 中的枚举是怎样写的,如果用原生 JS 怎样实现
- webpack 配置可以怎样优化,有哪些策略,如果项目要使用 TS 在 webpack 中需要配置什么
- 项目使用了 ES6 吗,是如何使用 ES6 的(Babel 使用 @babel/preset-env)
- 举例子 window 对象下的一些属性
- 讲一下对闭包的理解
- 如何用原生 JS 实现 Promise 的 polyfill,需要注意哪些点
- HTML 的字符实体是什么,都有哪些(❌一开始没反应过来字符实体是什么)
- 前端模块化是为了解决什么问题,简单介绍目前有哪些模块化规范,CommonJS 和 ES6 的区别
- 常见的前端涉及到的安全问题,以及如何防范
- 是否用 LESS/SASS,LESS 中如何写函数
- 编程题:有一个长度为 32 的数组,如何将它转换为长度为4*8的二维数组
拼多多【电话二面+coding】
- 详细讲讲最近一个负责的项目的技术架构,为什么要迁移 UI 组件库
- Web Worker 是什么,Echarts 和 Web Worker 结合使用场景
- React 和 Vue 的优缺点对比,MVVM 双向绑定流程
- React/Vue 的 Hooks 是需要解决什么问题,React Hooks 有哪些 API,介绍一下 useEffect 的调用时机
- 什么是高阶组件 HOC 和 Render Props,他们的的区别是什么
- 讲一下博客系统中 Vue SSR 的大致流程
- 页面换肤方案
<link>
标签请求新主题的样式文件、React Context API、CSS 变量,这里最后还提到了 localStorage 的使用,保存用户上次的选择 - 编程题:数组去重
拼多多【视频三面】
- React 和 Vue 的分别的优点,你觉得现在这些 MV* 框架以后会往哪个方向/趋势发展
- 有没有做过项目的性能优化,从业务和工具链两个方面讲
- 最近遇到的技术难题
- 有没有参加过开源社区给开源项目贡献代码;介绍一下自己业余时间做的开发工作
- 在团队内是否有维护公共组件或工具,你觉得维护公共逻辑跟个人开发上有什么区别,如何去协调不同开发者的需求
- 团队的组成情况,在团队协作上遇见什么困难,是如何解决的;
- 将来的职业规划是怎样的,带领团队/下属最重要的是什么
- 最近读了什么书有什么感想,有没有写技术文章
字节跳动【视频一面】
- WebGL 了解到什么程度,都有哪些基本功能;项目中是如何使用 WebGL 的
- 讲一下 GLSL Shader 实现亮度(Brightness)、对比度(Contrast) 和边缘检测(Edge Detection) 是如何实现的
回答的时候忘记了对比度的算法实现没答上来,讲了下明度 Luminance 的调节;亮度Brightness是RGB+亮度系数;边缘检测和图像锐化是使用 Convolution Kernel 卷积核加深中心像素与周围像素的色彩差值梯度,使边缘更加突出
- 亮度、对比度与原像素的 RGB 通道分别是什么关系
这题其实我没理解题意,其实现在想想应该答案是 亮度是在原RGB上直接添加亮度系数(color+brightness),而对比度是 在原色彩与中间值的差 上与对比度系数相乘 (color-0.5)*contrast+0.5
- 是否有进行过 node 开发;简单介绍一下你开发的这一个 webpack 插件的功能和原理
- Vue 响应式原理;响应式原理中的 Deps 数组订阅发布中心是在什么时机去收集依赖的?
- 介绍这三个步骤的流程 Vue Template -> VDOM -> 真实 DOM;
- Vue Template 生成的 render 函数里面都有什么内容(主要要提到 createElement 函数的递归调用)
- 编程题:Promise 调度相关,JS 实现一个带并发限制的异步调度器 Scheduler,保证同时运行的任务最多有两个
字节跳动【视频二面】
- 如何预防/减少 Node.js 程序的崩溃,有没有实际操作的案例
- 如何判断一个点在正多边形内部
- Web Worker 的局限性;如何使用动态的 JS 代码生成动态的 Web Worker 实例(ArrayBuffer + URL.createObjectURL)
- iframe 中脚本的执行是否会阻塞主页面的渲染线程和 JS 线程,从不同浏览器内核去分析
- websocket 和 TCP Socket的区别,websocket 的握手过程,为什么要基于 HTTP 请求来握手
- CSS 选择器的权重,使用什么机制来计算的
- CSS 后处理器和预处理器分别是什么,有什么区别
- 什么情况下会发生 Ajax 的跨域请求,浏览器是如何处理 Ajax 跨域的
- ES6 箭头函数与 ES5 普通函数的区别
- Promise 的 then 方法可以 chaining 调用,它是如何保存这个过程中的值的;then 中回调函数如果返回 Promise/带有 then 属性的对象(then属性值是function 或者非 function 的情况下)/非上述两种 这些情况下,then() 方法是如何处理的
- Vue 中为何不使用 Object.defineProperty 去转换数组为响应式数据,对数组是如何处理的
字节跳动【视频三面】
- 介绍觉得最有挑战的项目,做了什么工作
- Vue 虚拟化列表的思路和实现原理
- 优化树形图表渲染的其他方法
- 简述思路:在不使用 Promise 或 async/await 等其他 JS 异步控制的情况下,设计一个网络请求 Scheduler 类,确保每个 ajax 请求的回调函数按发起请求的顺序执行
- 项目开发流程,异地协作流程保证
- 有没有特别想做的业务方向;以后的工作和技术规划
快手【视频一面】
- 六道笔试题和几道简单的编程题
- 手写 bind 和 apply
- 水平垂直居中的几种方法
- 扩展 flex:1
- 请用 React Hooks 实现无状态组件的 componentDidMount、componentDidUpdate 生命周期效果
- setState 的第二个参数的作用
- useCallback 的使用
- React 受控和非受控组件的区别
- HTTPS 和 HTTP 的区别
- CSRF 如何防御
- Promise all/race/finally 的原理
- 节流和防抖的区别和应用场景
- 解释 0.3-0.2=0.99999999...
- 原生 DOM API 相关:创建节点、插入/移除节点、选择节点
- element.style 和 getComputedStyle() 的区别
- 下面代码的输出结果是
// counter.js let counter = 10; export default counter; // index.js import myCounter from "./counter"; myCounter += 1; console.log(myCounter);
- 请用JavaScript实现一个函数求解整数N,N满足 %2==1,%3==2,%5==4,%6==5,%7==0
快手【视频二面】
- 输出代码结果:函数提升问题、JS 异步事件循环问题
- React Hooks 优点、解决什么问题、useEffect 的调用时机
- webpack 优化的方法和配置
- webpack 开发插件的原理,简单介绍你的插件
- webpack watch 本身的 cache 机制
- 讲觉得最有挑战的项目,做了什么工作,做了什么优化
- 如何判断模块的循环引用(DFS 拓扑排序)
快手【现场技术终面】
这轮面试我临时订机票从珠海坐飞机飞北京到快手总部,11月里从24摄氏度到零下一度的落差真的要把我这个广东人冻僵了QAQ 不禁感叹祖国幅员辽阔啊~
- 项目技术选型,为什么又有 Vue 又有 React
- 项目的研发管理流程
- 前端项目自动化发布方式
- 团队情况,团队沟通中遇到最大的困难,个人在团队中的角色
OPPO-商业化
一面电话沟通,都是前端非常基础的问题,例如闭包、跨域、Vue响应式、HTTP 基础等等;二面现场面、HR电话面
滴滴-两轮车业务
技术面都是电话沟通,HR视频面,后面题目没有记录了
- webpack 打包的整个流程,简述 webpack 插件的开发和功能
- Commonjs 原理
- Koa/Express 中的中间件是什么
- 如何提高Node.js 程序的稳健性
- 如何理解 HTTP 协议
- RESTful API
- HR面:项目异地协作是如何保证流程,对流程推进做了什么工作;从0开始带项目的思路是什么
Promise.reject()😿
平安人寿【电话一面挂】
- 数据看板开发流程,数据看板是静态数据的还是实时渲染的?
- 静态数据数据量多大,数据量大的时候是如何优化性能的
- 可视化看板实时渲染的技术方案
- Echarts 除了普通的柱状图折线图,还用过什么高级功能
- Canvas 与 SVG 的区别,和它们在 Echarts 中使用的区别
Canvas 适合绘制图形元素数量巨大的场景,如热力图、地理坐标系或平行坐标系上的大规模散点图和线图,SVG 本质上生成了 DOM 节点,会对浏览器渲染造成很大的负担;SVG 的优势是占用的内存更低(对移动端尤其重要),渲染性能略高,并且用户使用浏览器内置的缩放功能时不会模糊;而且因为是生成了 DOM 节点,在开发上直接使用 DOM API 进行用户的交互会更方便
企业微信【视频一面挂】
- 项目中的权限系统是怎样实现的
- Vue 虚拟化列表的实现原理
- webpack 优化打包的策略、内部的机制和插件开发的原理
- 假设现在有一个微信公众号文章的页面,可以展示文章、图片、视频和读者留言,从安全和交互性能的角度去讲一下如何优化
安全:用户输入的时候编辑页面防止 XSS 攻击、敏感字符过滤、外链资源白名单过滤、图片资源脱敏处理转换为本地资源;优化:关键请求路径优化、事件监听节流、非首屏资源懒加载、代码压缩、服务端渲染、利用好缓存策略、开启 HTTP2
- HTTP2 相对于 HTTP1.1 有哪些优点,解决了什么问题
首部压缩、数据分帧、多路复用,服务端推送
- Webpack 实现热更新的流程(webpack-dev-server 和 HotModuleReplacementPlugin 的实现)
- Vue 生成 VDOM 的流程和 Vue 响应式原理
- 看过哪些项目的源代码,为什么要去看源代码
- 有没有开发过小程序,是否有 TypeScript 开发经验
- 介绍一下现在团队的基本情况,在团队内部的贡献(技术分享、维护工具)
欢聚YY【现场面挂】
- 如何优化网页上需要展示的超大图片,从请求和性能来解释
- 实现 Adblock 的策略
- WebGL 渲染的流程;GLSL Shader 是什么,有什么作用
- Shader 实现一个滤光滤镜的思路
- WebGL FrameBufferObject 的概念
- 是否有对动画有了解、FLIP 的概念和应用;Vue Transition 源码底层原理
- Vuex 的单向数据流模型;对比直接在 window 下用变量储存数据,使用状态管理库的优点在哪里
微众银行【现场一面 没有下文】
- 可视化大屏是怎样使用 websocket 中遇到什么问题
- 如何管理 redux 之间不同模块的数据
- 讲一下使用 redux-saga 控制数据流的具体需求的实现
- 一个监听了 input 事件的输入框,每次触发input都会发送请求,这个输入框的优化方案
- 防抖的作用和手写实现
- 看了 Vue 代码有哪些自己的心得
- vue-router 的原理,history 模式和 hash 模式的区别,为什么 history 模式是先进行 app 内模块的切换再去手动更新路由
- 介绍一下项目中单元测试的情况,用例有多少,如何运行
- 编程题:将一个对象中所有值为字符串的提出取出来,拼接成大的字符串
- 开放题:一共有103位参赛者的1v1赛事,设计一个比赛淘汰机制
未走完的流程👨💻
有赞-监控平台【视频+电话+在线coding 过】
- CSS 选择器有哪些,优先级是怎样的,!important 的表现
- display 有哪些值,inline 和 inline-block 的区别
- float: left/right 的表现是什么,什么是 BFC,能解决什么问题
- websocket 在项目中的用途,握手过程
- Babel 的原理、运行过程、如何做 Polyfill
- === 和 == 的区别
- JS 基本类型
- webpack 优化和配置策略
- Service Worker的作用;如何划分缓存策略,对同源/非同源的资源是如何处理缓存的
- SSR 的好处,主要解决什么问题
- coding: 二叉树的遍历和镜像;实现 EventEmitter
百度-基础架构部 【电话三轮技术面 过】
- 项目技术选型,不同场景为何使用 Vue/React
- HTTPS 原理,CA、数字证书、数字证书的信任链;
- 对优化业务开发流程做了什么推动工作;项目开发规范:API 规范、仓库和分支规范、需求/开发/提测规范
- 从输入 URL 到网页渲染,发生了什么事情
- coding: 查找根节点到目标节点的路径
美团【电话一面 过】
剩下的流程需要到北京总部,放弃流程
阿里LAZADA【电话一面 过】
一面完两周过去了还没消息我以为已经凉了……跟我联系的面试的前辈跟我说还没凉但是流程比较慢,这时候已经接到 offer 了就没继续等下去🤣
- Flexbox 常用规则,如何垂直居中
- CSSOM 是如何寻找 DOM 节点并生成 Render Tree 的,CSS 选择器权重优先级
- Service Worker 的注册时机与页面资源请求代理相关问题;资源缓存的策略
- SSR 是怎么做的;如何优化 SSR 导致的服务器渲染 CPU/Memory 过高问题
- 从输入 URL 到浏览器渲染发生了什么事情
- HTTPS 和 HTTP 的区别;浏览器缓存查找过程
关于技术终面和HR面
基本所有的技术终面都会问到以下主观性问题:项目难点、项目研发流程、技术选型、团队情况、团队内部的贡献(技术分享、维护工具)、沟通技巧、个人职业规划;最后的“你还有什么问题要问我吗”是了解团队和公司情况的一个极好的机会,我一般会提问:
- 能否对我的回答做总结性点评、对我有没有什么建议
- 团队当前的技术栈和业务方向
- 团队在公司内外维护的公共组件 or 开源产品,和在社区的活跃度
- 未来加入这个团队后,我的角色、职责和 leader 对我的期望
写在最后
经历这次求职,其实我也更加深刻地认识到前端工程经历这15年的发展,已经进入了一个比较平稳的状态:初级人员饱和、高级人才稀缺。初级新人找到突破口的唯一办法就是在专业技能熟练的基础上,往不同方向横向挖掘亮点,如可视化产品开发、Node.js 工具链开发等,以实际业务为基石,踏踏实实提升自我水平才是最重要的事~求职的过程中我也一度迷茫过、自我怀疑过,感谢智广、剑诀、少杰、钺钺和予南这些深瞳小伙伴对我的鼓励和建议,也希望这篇文章能够给正在求职的小伙伴带来一点帮助😎~