科班小前端的大厂面经 | 掘金技术征文

本人今年研一，两年制硕士，今年实习。本科前半段迷茫在科班的基础理论学习和课程做业中，大一大二对前端一无所知，没想关心太多，只想保研就好。大二暑假参加一项学校项目，第一次接触前端，一脸茫然，发现软件工程还有不少值得探寻的地方。大三保研形势已定，因而参加各类比赛，摸索本身的兴趣所在，终于在一系列比赛种尝到了前端的甜头——原来好看的页面这么吃香（当时就是这么粗浅的认识），因而决定正式入坑，带着起初“前端能让页面好看”这般粗浅可笑的见识，打开新世界，一步步丰富自身，直到今年春招恰好两年半。春招战线很长，从二月中旬一直延续至今，赛程仅恰好过半，目前取得初步成果：

1. 网易雷火三轮技术+HR，拿到offer。
2. 字节跳动教育业务三轮技术+HR，拿到offer。
3. 美团两轮技术，leader就给了经过，在等offer。
4. 阿里淘系目前三面结束，被大leader全方位调教，如今准备交叉面，不管成败收获都不少。——4月8日更新，交叉面和HR面都已经结束，收到意向书，相应的面经也已经更新下文中了。
5. 腾讯PCG到第四面，战线很长，不知可否过关。——4月8日更新，没有继续面腾讯，淘系offer拿到后就推掉了这里。

在这里把分享面经，附带我本身的简要回答和思考。对于基础问题，你们能够查漏补缺，建议收藏；对于场景或者高层思考型问题，你们参考便可，这些都是面试官根据本身部门或每一个人的履历定制的。轮次越多，问题也就越偏向高层，须要你们更多的总结思考，找到平衡，甚至再生产。

网易雷火三轮技术+HR

一面

一面通常都是基础，在回答问题的基础上，最好能主动发散广度深度，面试官印象会很好。

• 介绍下本身并聊聊项目。

• 这个因人而异，要大方得体，讲出重点。主要围绕项目是什么，为什么要作这个项目，解决了什么痛点，你在其中负责了什么工做，遇到并解决了什么问题，如何和不一样模块合做，把控了多少架构。后两点须要必定思考和积累，把前面的讲清楚能知足一些面试官，可是大厂面试官经常会但愿你说一些架构和总体方面的理解，是加分项。

• 如何用await和async写一个睡眠函数？

function sleep(time){
    return new Promise(function(resolve,reject){    
        setTimeout(()=>resolve('over'),time);
    });
}

async function run(time){
    let result = await sleep(time);
    console.log(result);
}

run(3000);复制代码

• 说说inline元素和inline-block元素的区别。
• CSS基础题，我从布局方面不换行和尺寸方面inline设置宽高无效，inline-block能够来说，还发散了一些CSS元素体系讲了讲。
• inline元素的margin有用吗？
• 是一个很刁钻的切入口，你们经常忽略对inline元素的研究，还好我平时比较喜欢捣鼓CSS，其实再默认水平方向的文档下，设定水平方向margin是有效的，垂直方向无效。
• 讲讲html如何添加事件监听，事件处理有哪些阶段？
• 添加事件监听很简单，document.addEventListener就能直接来，事件阶段按时间顺序有捕获，目标，冒泡三段。
• 说出三个你知道的不经常使用的html标签。
• 通常都问那些经常使用的，结果面试官反其道行之，很佩服。当时只答出<iframe><strong><i><audio>，能够百度一下，其实有不少。

二面

由于我React技术栈比较多，因此这方面问题也多，你们按需食用。

• React中函数组件和类组件的区别。
• React16.9以后，加入了钩子，给组件体系带来了不少新变化，函数组件也拥有了生命周期方面的特性，useEffect钩子其实就是对几个生命周期的封装定制。
• React是如何将redux包装到组件上的？
• React的react-redux库，经过给根组件包装一层<Provider>，并将store绑定上去，须要进行状态管理的组件经过connect包装生成容器组件，并将状态和事件映射到props上。redux其实有不少细节，能够视状况引伸。
• React类组件能在componentShouldUpdate中比较属性是否改变来判断是否应该从新render，那函数组件如何实现一样功能？
• 函数组件经过React16.6的包装函数React.memo()获得一个优化后的组件。
• ES6的proxy讲一下。
• 代理，拦截对象的各类类型操做如get和set等，经常在讲到Vue3.0时，用来和Vue2.0的Object.defineProperty对比，其实提到proxy面试官就但愿你提到Vue方面的变化。
• Object.defineProperty和Proxy对比，有什么优劣？
• Proxy对整个对象进行代理，而且返回新对象，是单一职责原则的良好实践，而Object.defineProperty不得不对对象每一个属性进行重复的劫持操做，且没法劫持数组的原生方法如push、pop等，只能使用hack的方式改变原型链。相比之下，Proxy就功能全面且不须要额外工做，内聚性良好。
• 如何实现文字溢出显示点点点？

.container{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}复制代码

• 讲一下OAuth2.0认证的过程。
• 由于个人项目有用到Google的API，因此被问到，阮一峰老师博客讲的很清楚：OAuth 2.0 的四种方式
• 讲一下登陆以后，身份认证的过程。
• 使用cookie和session，用户登录后，后端session以键值对形式存储用户信息，将sessionId返回浏览器，浏览器只要在cookie种携带该sessionId，便可让服务器确认用户信息。固然这个过程并不安全，若是能引伸一些安全方面的看法，是加分项。
  

三面

• 项目中访问其余网站好比Google Drive须要登陆认证吗，登录一次后再次进入还要认证吗？
• 用的是第三方受权形式，因此当时得不断从新认证。和面试官进行了一些交流。
• 你的项目是先后端分离吗，架构描述一下。
• 不是，架构问题基于项目真实状况回答便可，不须要由于本身的项目有些不足就避而不谈，其实可以点出不足并进行思考，反而是不错的答案。

• React中函数组件和类组件的区别。
• 又被问了，多是考察我这方面扎不扎实，也可能就是碰巧。
• Hook用过吗，有什么做用？
• 从代码重构和性能优化来说钩子。能够看看官方文档。
• Ref用过吗，通常是用来干什么的？
• 得到组件实例，React虽然是数据驱动的，可是或多或少须要dom操做，这个时候经过ref实例便可获得组件的真实dom。因而可知React，Vue早就不能称为MVVM了。
• 如何在父组件中得到子组件内部的ref？
• 可使用传递回调函数或者React.forwardRef API的方式转发ref。
• 你对React中组件的状态管理有什么良好实践或看法？
• 状态提高到父组件便于统一管理，使用redux等等之类。
• 跨域问题如何解决？
• 这个网上资料铺天盖地，除了传统jsonp，CORS等回答以外，我还结合本身项目中的代理讲了讲。
• Restful接口规范了解吗，状态码200表明什么，201呢？
• 200就是GET获取数据成功，当时没背状态码，201这里答不出来，后来看了知道是用户新建或修改数据成功。
• 用过webpack吗？
• 这是我一直用的很少的点，只提了提tree-shaking相关原理，面试官没有继续为难。
• 用过什么类型的服务器，用来干什么？
• 学院服务器，各类云，都用过，用来作本身的项目，大概作了什么也提了一点。

HR面

走到HR面通常稳住不浪就没什么问题了，千万不要头铁，和“腾讯HR说不想去深圳”之类的话，或者聊一些公司的负面消息，你真没兴趣或者就是牛逼哪都求着你就当我没说咯。在HR面，只要心平气和了解公司，分享一些我的爱好，聊聊人生就好了。

• 你的前端学习途径有哪些？
• 为什么选择前端？
• 关于这个问题，我单独写过一段吐槽：HR终极一问：为啥选择前端？答：混口饭吃。卒。
• 职业规划是什么？
• 你的兴趣有哪些？

字节跳动三轮技术+HR

字节很是注重基础和编码能力，几乎全部问题都但愿你能写上几笔，平时须要注重基础能力的培养。

一面

• 介绍一下你本身和项目。
• TCP和UDP有什么区别?
• UDP无链接，TCP有链接。更多细节见这篇专栏
• TCP创建链接和断开链接的过程。
• 网络基础，也是web入门的一步，三次握手和四次挥手，都是为了双方互相确认状态。
• GET和POST请求有何不一样。
• 经典问题，其实就是语义不一样，本质上都是发送http请求报文。
• 前端缓存讲一下。
• 主要是http1.1的cach-control属性，分三个递进的状况：no-store、no-cache和max-age，而后配合etag确认后端资源是否更新了。有兴趣的还能够把http1.0的expires和cach-control对比。
• js基本类型有哪些？
• 加上Symbol有六个。
• 盒子模型讲一下。
• 当时讲了不少CSS布局标准，最后面试官说其实只想听我说一下宽高，content-box和border-box就行。
• 写代码，写一个闭包的应用。
• 你们发散思惟能够有不少，我当时写了个很简单的单例函数。

function getInstanceFactory(instance){
  return function getInstance(){
    return instance;
  }
}

let getInstance = getInstanceFactory({a:1});
const instance = getInstance();
console.log(instance.a);复制代码

• 写代码，判断一个变量是否为字符换或者数组。
• 用instanceof,constructor指向，Object.prototype.toString均可以。
• 写代码，显示一个文档树的章节结构，附带小节标号。
• 深度遍历，当时写完还有一点小节标号没调好，面试撕代码老是难以一遍过啊。

二面

• 平时经过什么渠道学习前端，为何选择前端？
• 好几道肉眼看代码写输出结果的代码题。
• 这种题每每乍一看没什么难度，实际上可出得很绕，平时没事多玩玩原生js，否则容易被绕进去，好比this的指向、变量的做用域等等。
• 子元素宽度未知，如何居中子元素，写CSS。
• 直接在面板上写了tansform的方式
• 有哪些跨域方法？
• 重复的问题就略过了。
• Promise的all和race方法讲一下？
• all是要全部子promise都完成才resolve，有一个失败就马上reject；race是只要有一个promise返回结果，父promise立刻也会用子promise的成功返回值或失败详情做为参数调用父promise绑定的相应句柄，当时甚至想写一个原生js实现的race，不过面试官反而说不用。
• 写代码，写一个事件监听注册器。
• 阴沟里翻船，本觉得顺利写完，结果出了好几个复制粘贴以及变量名写错的问题，看了半天，最后都没有调好。吃了此次教训，以后写代码更加谨慎了，提交前会先本身顺着逻辑理一遍。后面才知道牛客网的面板能够全屏，以前一直是缩小形式，写起来很容易遗漏。
• 讲讲你在写代码的过程当中为何出了bug，整个思路是什么？
• 这是顺着前一题出的bug，算是面试官给的一次机会，好好描述了下本身的思路和心理。

三面

• 介绍项目。不断追问，从技术使用到架构。
• 这种时候必定要撑住，从容思考，就算不会也要把思路讲出来。
• 哪一个项目令你收获最大？讲讲收获。
• React项目中你遇到过什么问题？如何解决的？
• 版本更新后的重构问题主要讲了讲。
• http请求有哪些方法？
• GET、POST、HEAD、PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH。当时之说出来五个。
• 用过什么ajax请求的库？
• 只说了antd和axios，后面和面试官交流了一些库封装问题。
• 写代码，js算法题，老师给孩子分饼干，最多能知足多少孩子。写完以后问为何要这样写。

HR面

小姐姐很活泼爱笑，还懂技术，全程轻快交流。

• 描述一下大前端。
• 和HR交流大前端感受很独特，没法言喻。
• 你以为前端就是界面吗？
• 为何选择前端？
• 发现每一个公司必问至少一次，出现频率最高的问题非他莫属。
• 平时怎么学习前端？

美团两轮技术

一面

• 介绍下本身和项目。
• 平时学习前端有什么方式？
• 写代码，写一下js中的各类继承方式。
• 主流三套方式：ES6中class的extends；原型链；经过call方法借用别的构造函数；
• 默写react的生命周期函数。
• 可是默写了一下，mount阶段4个，update阶段5个，umount阶段1个，异常状况有个componentDidCatch。
• 描述一下React的数据流传递方式。
• 单向数据流，父组件到子组件单向，数据到视图单向。
• 描述一下redux的数据流。
• 最外层Provider上挂载一个store，从上到下以瀑布流的形式传递，途经的每一个组件均可以取得数据并添砖加瓦，可是不能直接修改，只能经过dispatch。
• React的setState以后如何进行更新和渲染的？
• 新旧版本React更新由同步变为异步，尽可能把两种版本对比着讲，讲出为何要进行异步更新，而且引入新的数据结构Fiber。
• 描述一下MVC模式。
• 画了一下M,V,C三者之间的数据流向图。

二面：

原本二面是交叉面，不过直接跳到了主管面。

• 介绍下你的项目。也是被不断追问。
• Angularjs如何进行前端渲染？
• 讲讲双向绑定，脏检查那套。
• 主流前端框架机制讲一下？
• 很大的话题，从React入手，讲了它的渲染机制和优化。
• 平时怎么学习前端？

阿里淘系三轮技术

一面（提早批）

• 介绍下本身的项目。
• AngularJS和React、Vue有什么区别？结合开发经历描述。
• 这个纯看理解和我的发挥了，面试官估计仔细看了个人简历，三个框架都用过因此这么问。当时扯了好久关于框架的看法，在这种方面，千万不要背MVC或MVVM之类的概念。
• 项目中遇到什么问题，如何解决的？
• Node.js用过么，讲一讲。
• 用的很少，就把node的事件循环讲了下，nextTick和setImmediate跳出来说了讲。
• 平时用哪些渠道进行学习？

二面

突击面试，不约时间，11点来电就直接开始了。这种没有准备的状况下必定要冷静，能够先让面试官稍等片刻本身准备下设备，同时调整下状态。

• 近两年在前端领域有什么成果和贡献？
• 颇有魄力的问题，突击面试外加上来就丢这个问题颇有压迫感。讲了本身release的项目，实验室的项目，社区博客（开始学前端就在写CSDN博客，近期迁到掘金）分享，flutter等等。
• 请讲讲三大框架为什么会产生？
• 很宽广同时又很精确的主观题，从前端技术史讲起，各大公司的立足点和开发诉求。
• 你对前端框架的发展方向有什么本身的看法？
• 很普遍，从动态化，兼容性入手，有时间想谈谈新编码下的JIT和AOT。
• 玩过IOT一类的嵌入式开发吗？
• 玩过树莓派，之前在学校搞太小车竞赛。
• 解决过哪一个技术问题最令你大呼过瘾？
• 技术上从0到1最痛快，好比在一张白纸的状况下完成Google OAuth2.0认证，调通接口。
• 你在技术方面最佩服或最感谢的人
• 身边的人。
• 你有什么想一想我了解的？
• 问了不少问题，关于淘系如今的结构组成，阿里在Flutter、BFF、Serverless方面的生态建设，还问了下当天淘宝IOS出现的S1级事故。学到了不少。

三面

面试官是P9的前端团队大leader，什么都会，什么都比你深，只能稳住别慌，尽力发挥。

• 讲一下你价值最大的一个项目。
• 讲了大三实习的项目AngularJS+.Net Framework。
• 我看见你还用Flutter，讲一讲Flutter的原理吧。
• 底层有一个用于跨端的嵌入层，中层用C++实现自绘引擎，封装成dart ui库，上层用dart开发，对象化组件化。
• Flutter和ReactNative比，性能孰优孰劣？
• RN首屏性能相对弱，组件重绘代价大，JSBridge涉及进程切换，这个固有代价致使RN的渲染性能弱于Flutter，因此RN才有了架构重建计划，将JSBridge替换为JSI。
• 微信小程序的结构和原理又是什么样的？
• 回答的很差，印象中的小程序也是和RN相似的派系，可是底层实现ui的方式我犯迷糊了。
• 如今的Flutter确定是直接不能用于大项目开发的，你以为它的瓶颈在何处？
• 讲讲Flutter在状态管理方面的不足，提到了大厂在Flutter方面的定制。
• 你有什么要问个人？
• 赶忙问下以前小程序原理的问题，面试官说上层是用html，js那套web跑在浏览器内核（如V8，JSCore等），再往下层是用webview，外加一些native code实现对webview作得不太好的组件的补充。
• 还问了一直关注的severless问题，面试官高屋建瓴，分两点进行教学：
• 基础设施方面，云原生的支持必须达到足够高的稳定性，知足扩容收缩等硬性要求才能将关键基础链路演化为severless，目前还存在必定差距，不过一些非关键业务链路已经完成迁移。
• 人的方面，应用工程师得拥有该方面的维护技术和解决问题的能力。虽然还有不少细节不甚理解，但认真听完仍是收获满满。

四面（交叉面，钉钉）

• 你收获最多的项目是什么？
• 大三外企实习项目，全栈开发，让我对架构和服务化甚至是敏捷开发的项目把控和工程实践有了很多的体验和理解。
• 项目中使用websocket开发，在和后端对接以前如何进行开发？
• 这个问题被问住了，由于项目比较小前端用完mock数据，甚至连mock服务器都没有就直接和后端对接，后端推送数据也是在前端直接查看，就老老实实和面试官交流了一阵。
• 关于网站性能优化问题，SPA过大致使首屏时间太长怎么解决？
• 性能优化问题我一直没有特地去“背诵”，毕竟本身的项目都没到前端性能的瓶颈。谈了谈懒加载、打包策略。
• 若是老板和你说网站首屏加载时间太长，但不知道什么缘由，你如何一步步定位并解决问题？
• 先要定位问题，打开控制台看timeline，若是那些阶段占用过长时间就会有长条的瀑布图显示。结果面试官追问若是timeline看起来很正常怎么办？我只能回答可能出现页面报错，js文件出错没能正确进行一些dom操做，致使元素没有正常显示。
• 若是某个js文件必须在header中被加载，而它又操做了body中才有的dom元素，怎么办？
• 能够在该js文件以前加一个适配的js文件，手动append一个可供该文件选择的dom元素，而后再页面onload以后删除适配该元素。

HR

• 目前的offer有哪些，想如何选择？
• 你作前端的目标是什么？
• 在学校的学习成绩怎么样？
• 对工做地点有要求吗？
• 这个不能头铁乱讲，想稳拿offer就老实回答杭州。

腾讯PCG三轮技术

一面

几乎全部前端问题都问了一遍，刷新面试时长记录，记录几个我回答的很差或者印象深的。

• 从 URL 输入到页面展示到底发生什么？
• 经典问题，用于全面考验一个前端的网络基础，甚至能看出是否具备必定全栈能力，标准回答能够直接百度，而后能够结合一些本身的项目。
• 父元素和子元素宽高不知道的状况如何居中子元素？
• 这个问题其实和父元素高度知不知道无关，由于文档流中父元素默认包裹子元素，高度是由子元素撑开的。
• Webpack用过吗，讲一讲。
• 如何用ES5实现promise？
• 有各类版本的，思想就是then的链式调用先返回promise，而后将具体回调推入队列等待延迟执行，延迟执行经过setTimeOut模拟。
• 前端性能优化有哪些方式？
• 掘金上有一篇文章：2018 前端性能优化清单

二面

几乎没问基础知识问题，一直考验对问题的解决能力，问了不少特定的场景题，也和面试官的团队负责内容相关。

• 平时怎么学习前端？
• 富文本编辑器怎么实现？
• 给标签设置contenteditable属性，而后使用浏览器支持的document.execCommand 命令模式API
• 富文本编辑器会面临怎么样的攻击风险？如何避免？
• 就是变相问网络安全，把XSS和CSRF具体到场景里去做答。
• 若是要实如今离线状况下编辑且不丢失数据，怎么办？
• 先回答的是使用localStorage，回答以后不断追问，还问了可否直接用对象存，后面扯到了引擎方面的问题。
• 如何实现一个可编辑的能够无限延伸的表格？
• 这里只能受虐了，尽力讲讲本身的想法，好比延时加载，滚动节流等等，可是仍然被不断追问直到没辙。
• CSS基础好么，知道DEN么？
• CSS基础还能够，可是DEN真不知道。。。
• Webpack用过么？里面的tree-shaking什么原理？
• tree-shaking是由于import静态引入的能力，得以对文件内容进行浅层比较，去掉未被使用的代码。
  
• 如何衡量一个软件的质量？如何保证产品的质量？
• 讲了一些软甲工程的思想，又讲了些敏捷中的测试驱动开发，科班的知识终于在这里用到一点。
• 写过测试么？有没有用过测试的框架？
• 程序员本身写的测试能叫测试吗（狗头）。
• 你以为本身对比其余人的优点在哪里？
• 此问让人很慌，只能不害臊地稍微讲讲本身的优势。

三面

• 介绍本身的项目。
• 你的项目怎么实现后端推送？
• websocket那一套。
• 除了websocket外还有什么方法能实现后端推送？
• 只能回答轮询了。
• 开发过微信小程序么，你感受小程序和传统web以及Flutter,ReactNative之间的关系是什么？
• 一个很广的话题，从html静态页面开始提及，讲讲前端发展历史和趋势。
• 看你框架用得不少，说说React和Vue的区别？
• 直接从原理上，React是setState那一套本身实现的更新体系，Vue是nextTick，而且每一个属性都被劫持（2.0）或代理（3.0），能够精肯定位，触发watcher。
• http2知道么，讲讲它和http1的区别，有什么新特性。
• 多路复用、新的二进制编码、头压缩、服务端推送等。
• 你还有什么本身的项目或者开源贡献讲一讲？
• 本身写的flutter项目，博客以及在关注的新技术新方向都讲了一遍。这种问题就是考察技术热情和活跃程度。

最后

但愿本身不断总结，完善自身。也祝愿全部看到此文的人能获得帮助，收获理想的offer。

附：个人CSDN博客，有着从入坑到如今的技术分享。