18年求职面经及总结

18年求职面经及总结

我的求职之路差不多走到尽头了,感觉真是精疲力尽了.把这大半年的经历和面试总结写下来,希望能给和我一样在求职路上煎熬的人一点帮助.

---

先说背景:微电子科学与工程专业,学过两门和CS相关的课程:c语言和单片机.这个专业的唯一好处就是:大部分人并不知道这个专业学什么,以为和电信差不多.所以在众多野生程序员中也算一丁点儿优势,哈哈.本专业适合读博,大三开学决定不去读研了,转CS做前端.这也算是一个我很菜的借口,可以自我欺骗一下.

求职经历:
三月份开始投简历找实习,发现自己真是菜的一无是处.一开始就是腾讯和阿里的内推面试,被虐的体无完肤,(事件模型,原生XHR,this等等都答不上)于是开始疯狂恶补前端.大三下课程巨多,买了一块新电池,上课坐在最后边敲代码.遇到稍微知名一点的互联网公司就投简历,不停面试,每次面试完赶紧记录面经,总结经验,查漏补缺.

就这样一直熬到四月份,开始渐渐能够从容应对前两轮技术面.五月初,拿到美团和头条offer.自己几斤几两还是拎得清,这两个offer多少都有运气成分,所以并没有多高兴.每次刷别人面经,看到自己那么多答不上就很慌乱,于是依然不停投简历,不停面试,为面试积累经验.

去了美团实习的经历很愉快,上班比较轻松,leader人也很好,有相对多的时间学习而不是沉迷业务.提前批开始后,就开始刷面经,准备面试.一个月之后拿到留用意向书.

后边投的公司不多,除了Face++,给了面试机会的公司基本都能走完所有面试流程,头条,百度,美团,好未来,快手,华为都给了offer.虽然有些最后并没有给offer,但是这个状态也勉强过得去了.

所以啊,努力总是会有成果的,还在挣扎的同学千万别放弃了,总有柳暗花明时.

---

面试心经:
互联网一二线公司基本上都面过,总结一下面试技巧.
综论:个人以为,技术面一般遵循DFS查找原则,先找一个点切入往深处探底,直到你答不上来,然后开始考察相近知识点,再接着探底.最后综合评判一个人水平.
因此,你掌握的知识体系必须既有深度又有广度.但,这是不可能的.

一. 学会主导面试问题走向和适时展示自己技术深度是很关键的一点.

举例来说,你花了足够时间研究了HTTP/2,基本上对它了如指掌.那么面试官一旦问到计网或者性能优化或者HTTP,HTTPS,你就要想办法引导面试官问你HTTP/2,然后展示你的功力.

二. 学会回答问题:

面试问题分三种:
第一类,你遇到过并且熟悉的,这时候不要开心,要控制好回答节奏,避免面试官觉得你刚好撞上.
第二类:不太熟,简单解释,避开可能让你入坑的词汇(比如问react你非要说diff,但是写不出diff算法).
第三类:不会,直接说自己没接触这方面,不装懂.如果是非知识性问题,可以推理一番,体现你的分析能力.

三. 应对总监/经理面:

一般技术问题较少,多职业规划和过去经历总结.个人以为这里最重要的是要让面试官觉得你是个很有潜力的人,以后会是一个优秀的程序员.可以用自己的经历佐证你热爱技术,喜欢探究原理,做事能够持之以恒等等,表现你具备优秀程序员的品质.应对其他问题慎言就好,出口之前先想好.
除此之外,我看过美团面试评价表,他们也在乎一个人表达能力,思维能力,以及个人素质.所以适当注重个人软实力也可以弥补技术上的不足.

关于应对前端面试,建立完善知识体系:

基础:
MDN/w3c文档基本过一遍.就不会在HTML,CSS基础问题翻车.掌握《JavaScript高级程序设计》就可以应对大部分JS问题.(犀牛书当然也是一样).然后就是套路型基础问题,这个多刷刷面经就知道了.

进阶:

1. 《HTTP权威指南》,掌握HTTP1.1 HTTP/2 HTTPS的各个特性
2. JS系列: 《你不知道的JavaScript》,讲解js难点问题.曾探的《JavaScript设计模式》,《JavaScript函数式编程》.
3. 算法,推荐《JavaScript数据结构和算法》
4. 下面总结前端主要知识点:

• HTTP相关,尤其与网络性能优化相关
• 缓存相关,各类缓存控制方式以及CDN
• 本地数据存储,cookie,ls等等以及pwa
• 渲染相关,浏览器渲染机制,加载顺序,优化点.SPA白屏等等.可
• ES6相关,异步函数及其底层原理,推荐阮一峰ES6教程
• 性能优化,包含东西比较多,不仅要掌握做法更要知道原理.
• 设计模式,怎么写,优缺点以及应用场景.
• web安全,XSS,CSRF,SQL注入具体原理和防范措施
• webpack相关问题,打包原理,模块相关.
• CSS3和HTML5相关
• 跨域的处理方案以及原理
• 即时通信方案以及原理
• 三大框架相关问题,vdom,数据绑定,diff之类.

---

下面记录面试过的公司的面经:

阿里腾讯以及外企都是直接刷简历,没给面试机会.心塞.
我也很绝望啊, who let me so vegetable !

搜狐提前批

两轮技术面
(7月份搜狐大厦,问的都比较简单,只记得这么多)

• BFC
• Flexbox用法,详见总结
• 排序,找出最大三个数
• 快排原理,复杂度计算
• 继承的实现方式,详细问了创建实例对象的内部过程.
• vdom原理,实现
• 异步原理,macrotask和microtask,写了总结

360 奇舞团

两轮技术面+HR面,当时没记录,只记得没答上来的问题

• webpack刷新原理
• server push和websocket
• url长度为什么受限制
• XHR如何传递二进制流

百度大搜和度秘

百度内推面了俩部门,前前后后总计面了六轮,没写全,问的问题太多有些也记不清了.

---

大搜

大搜在百度现场面.三小时面完三轮.(荒郊野外真远 -_-

1. 一轮面试问的都比较基础
   例行自我介绍,随便问了下美团实习项目,然后开始考察基础.
   Q:先讲讲JS继承,后边有白板,可以画画.
   讲了一下ES5继承和原型链,写了ES6的class示例.
   Q:做过性能优化没,讲讲性能优化
   大概说了传输,渲染,缓存的优化
   Q:一般怎么排查性能问题
   chrome面板,balabala.其他第三方工具
   Q:cookie,localStorage有些什么区别
   就记得这些了,基本覆盖大部分基础知识
2. 二面超严肃
   例行自我介绍,问了问项目.
   Q:学校课程(本专业没有任何CS相关课程)是些啥?
   Q:数据结构了解多少,讲讲前端上用到的
   堆栈,队列,hash table,DFS(挖了一个坑)
   Q:现在给个DOM,写个DFS查找里边的所有文本,打印出来
   白纸上大概写出了样子,但是明显有BUG
   Q:递归是什么原理,需不需要设置显式终止条件?
   答不出来
   Q:给个数组,把这个数组每个元素放到一个l列表格里,打印表格DOM结构
   写了一个两层循环
   Q:讲讲URL到页面过程
   balabala
   Q:HTTP建立是什么过程,详细点,是长连接吗?
   Q:HTTP报文和回文内容包含些什么
   Q:XHR怎么发的,具体怎么建立的,和HTTP有什么区别
   原生XHR讲一遍,区别不了解
   Q:XHR上传文件和其他数据有哪些区别?和HTTP传数据有什么不一样?
   文件上传用formData.
   面试官XHR传数据会base64编码
3. 三面 经理
   除了聊人生外:
   Q:你这项目里canvas绘制散点曲线怎么解决的?
   高阶贝塞尔曲线拟合,计算控制点.也可以最小二乘法计算.
   Q:为什么不看看其他开源项目比如echart源码?(我用过echarts)
   当时没有这么高觉悟.
   介绍了网页搜索部前端组业务,整个部门只有一个前端组,貌似加班.

度秘

电话面试,两天面完

1. 一面
   例行自我介绍,对着项目问问.
   和大搜一面差不多
   此外还问了:
   Q:如何实现继承
   高程继承背一遍
   Q:实例化对象是怎么样的过程?
   Q:构造函数上有哪些属性?
   length,其他不了解
   Q:构造函数的prototype指向什么?和实例对象的prototype有什么关系?
   Q:这里边this是什么,其他地方用途
   Q:bind和call有什么区别?
   Q:排序算法怼一波,复杂度怼一波
2. 二面
   例行自我介绍,项目问的更深.
   Q:ES6了解哪些,一个个细问?
   Q:异步一般用什么?
   promise,顺便让讲了promise细节,之前做过总结
   Q:ES6 module怎么实现的,和require区
   Q:for of 和for循环有什么区别?
   Q:canvas监听点击事件怎么实现
   获取触发位置,计算是否在所绘图形范围
   Q:其他写法吗?canvas有没有相关接口
   他说有,isPointInPath(),这个我忘记了.
   Q:web安全知道哪些?
   Q:Csrf怎么防范,验证了origin和refer是否能完全避免?
   并不能完全避免
3. 三面
   例行介绍,问了学校三年情况,在团队情况,实习情况.
   然后话题一转,英文怎么样,我是听说不行,读写还行.
   然后全程英文视频面(流汗
   面试官自我介绍,然后开始问.
   英语确实烂,想说的说不出来,好尴尬.
   面试官比较厉害,南大本科,国外留学硕博,创办AI公司被百度收购就来这.
   我要是做NLP就好了.当过CEO的人真是有魅力.
   后边面试官给了一些职业规划和学习上的建议.

---

头条一面(内推)

三轮技术面,一下午完成.
牛客视频面,上来就是写题.
第一题写url转置,www.toutiao.com => com.toutiao.www
转换成数组,然后换位.
面试官说,不用API,像c语言一样写怎么办.
查找所有.,记录index.根据index数组长度,循环交换每两个相邻index之前的片段.
面试官说这里交换用到了temp临时变量,js不用临时变量而交换值该怎么写呢?比如交换ab值.写个函数试试.
想了一会儿,尝试写一个柯里化函数解决,但是没写出来,面试官提示ES6.
个人觉得这题好偏,除了解构,用arguments和对象都能实现.

  [a,b] = [b,a];
  {    
       a:b,
       b:a
   }

接着考察css,要求写一个搜索框,右侧搜索按钮固定宽度,左侧自适应.
写了一个absolute定位,浮动布局,css3 calc,css translate设置宽度.
然后大致讲了用flex布局.
中间问了哪些元素默认是inline-block,解释与block,inline的差别.
面试官接着上边问css3有哪些新特性?
问到了动画,就细细问animation,我说动画不熟.中间提到了css3性能,
接着问2D和3D动画性能上有什么差异?这个不了解,说了有些可以触发GPU加速,渲染性能有一定提升.
面试官又问动画的GPU问题,这就答不上了.

头条二面

不多说,写题.
bind函数实现,这个不难,一会儿写完了.主要是考闭包和arg,另外记得先检测bind是否存在.
面试官说不完善,bind绑定对象之后再去调用传参怎么办.
获取arguments传入返回的函数.
然后出了这个题:

最多存储n对KV;如果大于n个, 则随意剔除一个已经过期的KV;如果没有过期的KV,
则按照LRU的规则剔除一个KV;查询时如果已经过期, 则返回空;

没学过算法完全看不懂.
然后开始问性能优化,从域名服务开始,到HTTP传输,到加载和缓存,再到渲染,再到代码优化,一步步详细讲解.
中间面试官打断HTTP,问HTTP/2有哪些特性?
讲了多路复用和server push.
然后问HTTPS过程
讲了HTPPS建立连接,证书加密过程
面试官又问简历HTTPS连接之后传输数据怎么加密?
面试官问雪碧图为什么能优化性能?
答减少HTTP连接,一次性传输,HTTP有并发限制
问HTTP为什么限制并发,我说可能是避免资源占用过多.
问要是非要一次性加载100张图怎么办?说不知道,知道的CDN也不能解决.
面试官问HTTP2多路复用是什么?
建立一个HTTP连接,传输多个文件.
问那雪碧图优化点在哪里?还有别的么?答不上.
(其实雪碧图把多张图合并,一定程度上减小了体积,单个图片要包含很多无用信息,但是在HTTP层的优化可以被多路复用替代了).
HTTP在OSI哪一层? 应用层
详细说哪七层?
在渲染优化上问了函数节流,并让写了一个节流函数.
在代码优化上问了queryselectAll和getBy的区别,
还问了mouseenter和mouseover的区别.

头条三面

三面主要问项目和实习,遇到了考察点就追问到底.
没什么具体印象了.
以下为血的教训:
又问了OSI,
依然不会.
面试官:中间隔了一个小时,你就不去查一下吗?
我:.....

滴滴一面

上来一个定时器异步的for循环题,问了一下结果要求解释.没啥难度,就是要细心.
然后是一个很长函数调用的题,主要考察this指向,作用域链,原型链和call.一不小心会掉进坑里,我给了结果,顺便深入讲了一下分析过程.
接着是一个模板解析函数,给一个mustache风格的模板和一堆参数,要求编译模板并输出.白纸手写.
大概画了几笔,发现判断模板是否合法写不出来.然后接着写mustache替换.
告诉面试官自己的想法和遇到的难题,面试官趁势对着代码问了一些问题.
面试官又问了一下事件代理,
大致讲了这个东西,顺便解释了事件模型和性能优化点.
然后让解释url到页面渲染的过程,
大致说了整个流程.
接着问css和js加载的差异,主要考察js阻塞问题.
然后问domready和onload区别,这点不是很清楚,答得不好.
中间提到了HTTP/2,所以面试官又让细说http的各个版本.
讲了http1.1特性.http/2的二进制分帧,多路复用,server push以及性能优化作用,然后讲了https加密.
面试官接着问HTTPS流程和细节,详细解释了HTTPS证书加密过程.
面试官让HR领我出去等二面.
滴滴给人面试体验太差了,所以放弃面试了.

快手

快手HC很少,面试也有点难,薪资还不错,面完了之后去办公室看了看,感觉挺不错的.
讲讲这家略神秘的公司面试流程
一面是基础技术面,将前端的方方面面都问了一下,给了一些算法题和技术场景,让给解决方案.
二面(前端主管)基本全程在线coding,题目记不清了,四五道题难度有高有低,写了整整一个小时代码.后边是半小时前端技术面,基本每个点都会问到问不下去.
三面是部门Leader面(前后端主管),HR后来说三面考察智力,反应速度和学习能力,问了一些算法和智力题,给了一个UML图应用实例,让设计一个停车场计费系统的UML示例图.
四面是HR面,乱七八糟问了一通,学校情况啊,实现情况啊,个人性格啊什么的.

说说不只是500强的面试

春招实习的时候没有offer,于是投了菊厂试试.笔试,性格测试混混就过了.两轮面试,问了一些学校的项目经历和关于c语言的问题,其他都是在聊天.然后莫名其妙就过了面试.
秋招直接进终面,也没有问任何技术问题,40分钟也在瞎聊天.然后就拿到offer了,感觉没有比华为更简单的面试了?.薪资一般水平.

---

附录:

下面是其他公司的一些面经:

---

腾讯一面

• 1.浏览器工作原理

浏览器的主要组件包括：
用户界面－ 包括地址栏、后退/前进按钮、书签目录
浏览器引擎－ 用来查询及操作渲染引擎的接口
渲染引擎－ 渲染界面:Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit.
网络－ 用来完成网络调用，例如http请求
UI 后端－ 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
JS解释器－ 解释执行JS代码
数据存储－ 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据

• 2.Web安全,举例说明
• 3.状态码
• 4.同源:同端口,同域名,同协议
• 5.对象继承
• 6.ES6历史以及新特性有哪些?
• 7.promise原理
• 8.事件模型
• 9.常见兼容性问题,列举(移动端/PC端)
• 10.性能优化　　　

阿里一面

• 1.Ajax原理
• 2.浏览器解析过程

流程： 解析html以构建dom树->构建render树->布局render树->绘制render树
参考文章

• 3.垂直居中
• 4.数据类型判断
• 5.路由实现
• 6.数据本地存储
• 7.跨域 参考
• 8.数据双向绑定单向绑定优缺点

阿里二面

• 1.无线性能优化
• 2.Tap事件,Touch
• 3.数据存储

搜狐一面

• 1.Dom操作
• 2.移动布局方案
• 3.前后端协作
• 4.原生Ajax实现过程

搜狐二面

• 1.单链表反转
• 2.快排
• 3.即时通信(除了Ajax和websocket)

懵逼了
总结一下其他方式
1.Comet技术：基于HTTP长连接的Web端实时通信技术
2.SSE：服务器发送事件,使用长链接进行通讯

• 4.服务器代理转发如何处理cookie(nginx)
• 5.对象继承
• 6.this
• 7.rem布局的优缺点

腾讯Alloy Team

一面(记录两个,其他都还好)

• 实现动画有哪些途径

  • CSS3
  • JS帧动画,定时器,requestAnimateFrame
  • Canvas动画
  • SVG
  • 图片
• 对象继承的实现

二面

• web安全

  • https加密过程,证书用途
  • xss几种形式,防范手段,过滤哪些字符?
  • xsrf原理,实例,防范手段(Laravel的token)
  • Sql注入

• 性能优化

  • 代码优化(html,css,js)

  • 网络性能优化:

    1. Cache缓存之强制缓存和协商缓存.看具体详情
    2. CDN原理及应用
    3. HTTP压缩
• 上下文环境对象

• 设计模式(要求说出如何实现,应用,优缺点):

  • 单例模式
  • 工厂模式
  • 发布订阅模式

• 跨域(产生原因)

  • JSONP原理
  • CORS如何设置
  • Nginx代理
• 读过哪些框架源码?
• 如何写一个CSS库,要注意哪些东西?

京东二面

• JS面向对象之封装,继承,多态的体现和应用?
• BST
• promiseAll如何实现,以及如何实现多层异步回调?
• 加油站问题(贪心算法)

阿里二面

• XHR具体底层原理和API
• 单例模式实现/设计模式
• JSONP原理,回调过程
• Latex怎么解析
• hash算法实现,如何避免冲突,如何在冲突里检测
• Generater
• ES6怎么编译成ES5,css-loader原理,过程
• ES6转成ES5的常见例子
• 常见数据结构,常见算法
• node多线程实现
• 进程和线程

阿里三面

• 对前端的理解
• 说说rn,weex原理
• 说说XHR
• Jq的选择器引擎,$('.a .b')以及$('.a').find('.b')
• MD5摘要算法其他用途

百度外卖二面面

• 前端架构的理解
• 前端框架的看法
• 如何做前后端分离
• 在不使用后端模板渲染的情况下,如何做前端数据直出(不使用异步请求数据)?
• SSR适用什么场景?SPA首屏空白原因?
• vue构建过程原理,具体流程

模板到DOM大致流程:
template模板经过parse处理后返回AST
获得一棵AST后再经过generate()生成渲染函数
执行渲染函数后会获得一个VNode，即虚拟DOM
patch函数，负责把虚拟DOM变为真正DOM。

• vue2新增内容?独立构建（standalone）和运行时构建（runtime-only）的差别和应用?详情
• 爬虫的实现原理?如何实现一个爬虫,如何解析文件?
• 如何解决爬虫慢的问题?
• 多线程如何保障各个线程的安全?
• webpack工具和node了解哪些?node各个模块的底层原理?
• CSS3实现卡片翻转?

百度外卖三面

• 说说职业规划?
• 说说HTML难点,语义化的体现?
• 说说CSS重要难点?如何实现垂直水平居中?
• JS中this是什么?如何改变this?
• 讲讲时间复杂度计算?
• 算法题:假定26个字母对应1-26,将一串数字转成字母有多少种可能?
  暴力解法复杂度是多少?

(百度外卖业务:包含移动客户端(RN,hybrid),PC web端,H5,后台界面vue,桌面应用包含编辑器插件,前端构建工具,node中间层)

饿了么

• 盒模型之box-sizing
• XHR原理及API
• session和sessionStorage
• map forEach(数组各个API细节)
• dom事件代理,有什么优点?
• 三种隐藏方式差别:visibility:hidden,display:none,opacity:0

渲染上的差异:
1.将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的回流和重绘。
2.设置元素的visibility为hidden，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会回流。
3.opacity:0,只是看不到元素,元素依然存在并且占有原有位置.
注:
事件绑定的差异:
1、display:none：元素彻底消失，不会触发绑定的事件.
2、visibility:hidden：无法触发其点击事件，有一种说法是display:none是元素看不见摸不着，而visibility:hidden是看不见摸得着，这种说法是不准确的，设置元素的visibility后无法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。
3、opacity:0：可以触发点击事件，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发绑定事件
动画属性的差异: 1、display:none：完全不受transition属性的影响，元素立即消失
2、visibility：hidden：元素消失的时间跟transition属性设置的时间一样，但是没有动画效果.
3、opacity:0,动画属性生效,能够进行正常的动画效果. 代码演示地址

头条一面

1. inline和block元素列举,block和inline-block区别?
2. span包含12px大小英文'abc',问span高度?baseline怎么理解?
3. css实现自适应正方形?
4. string查找第一个不重复字符.如果换成字符串呢?
5. Angular数据绑定机制?
6. 重绘和回流的理解
7. querySelectAll和ByClassName所获取元素的区别?如何绑定事件?
8. getComputedStyle用法?
9. addEventListener绑定事件?参数不同的执行顺序.
10. 正则匹配电话号码.exec,match,search用法?推荐一篇高质量正则文章
11. 数据类型判断的方法,toString判断的来源?
12. ES6 class原理?
13. function rest参数长度?function.length如何判断与arguments对象长度区别?

头条二面

• var a;typeof a;let a;考察点
• mvp,mvc,mvvm
• vuex原理,watch对象
• js defer async顺序,模块依赖(AMD,CMD差别)
• 设计模式和应用
• session和cookie
• 清浮动,BFC
• cookie存储在哪里?(memory)
• typeof

Null,Undefined,Boolean,Number,String,Object
typeof 只能检测基本数据类型

CVTE面试

• 四栏布局
• 数组,数组对象去重
• 数组查某个字符出现次数
• 选择器权值
• 右键菜单定制

Ruff

• 函数不定参
• 定时器原理
• url=>渲染:script阻塞
• 数据结构应用
• 数据双向绑定(vue,ng原理)

其他小公司:

1. 面向对象三要素
2. 闭包
3. 三栏布局
4. 内联元素包含块元素的表现
5. 三种隐藏方式的区别
6. 求最大子数组和.
7. 块元素和内联元素渲染区别?
8. ul li实现计数.
9. flex-box用法
10. svg与canvas
11. JPG,png图片特点,场景
12. CSS写轮播
13. 拖拽组建
14. PV统计
15. URL监听变化

笔试

人人网

• 1.数组操作
• 2.排序算法
• 3.动态规划(书包问题)
• 4.编程题(正则)

CVTE

• 线程
• 各类通信协议
• 二叉树
• 算法复杂度
• 栈封装,利用栈对数组reverse(编程)

美团

• 各类排序算法以及复杂度计算
• Node的一些用法
• 二叉树遍历
• JS内部属性
• 页面之间传参
• 程序题:数组找公共元素

网易

• 出入栈可能性计算
• 数组去重
• 基本数据类型

Null,Undefined,Boolean,Number,String,Object
typeof 只能检测基本数据类型