阅读 844

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

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

  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认证的过程。
  • 讲一下登录之后,身份认证的过程。
    • 使用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

字节非常注重基础和编码能力,几乎所有问题都希望你能写上几笔,平时需要注重基础能力的培养。

一面

  • 介绍一下你自己和项目。
  • TCP和UDP有什么区别?
  • 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模拟。
  • 前端性能优化有哪些方式?

二面

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

  • 平时怎么学习前端?
  • 富文本编辑器怎么实现?
    • 给标签设置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博客,有着从入坑到现在的技术分享。


关注下面的标签,发现更多相似文章
评论