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问题.(犀牛书当然也是一样).然后就是套路型基础问题,这个多刷刷面经就知道了.

进阶:

《HTTP权威指南》,掌握HTTP1.1 HTTP/2 HTTPS的各个特性

JS系列: 《你不知道的JavaScript》,讲解js难点问题.曾探的《JavaScript设计模式》,《JavaScript函数式编程》.

算法,推荐《JavaScript数据结构和算法》

下面总结前端主要知识点:

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,写了总结

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

webpack刷新原理

server push和websocket

url长度为什么受限制

XHR如何传递二进制流

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

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

一轮面试问的都比较基础
例行自我介绍,随便问了下美团实习项目,然后开始考察基础.
Q:先讲讲JS继承,后边有白板,可以画画.
讲了一下ES5继承和原型链,写了ES6的class示例.
Q:做过性能优化没,讲讲性能优化
大概说了传输,渲染,缓存的优化
Q:一般怎么排查性能问题
chrome面板,balabala.其他第三方工具
Q:cookie,localStorage有些什么区别
就记得这些了,基本覆盖大部分基础知识

二面超严肃
例行自我介绍,问了问项目.
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编码

三面 经理
除了聊人生外:
Q:你这项目里canvas绘制散点曲线怎么解决的?
高阶贝塞尔曲线拟合,计算控制点.也可以最小二乘法计算.
Q:为什么不看看其他开源项目比如echart源码?(我用过echarts)
当时没有这么高觉悟.
介绍了网页搜索部前端组业务,整个部门只有一个前端组,貌似加班.

电话面试,两天面完

一面
例行自我介绍,对着项目问问.
和大搜一面差不多
此外还问了:
Q:如何实现继承
高程继承背一遍
Q:实例化对象是怎么样的过程?
Q:构造函数上有哪些属性?
length,其他不了解
Q:构造函数的prototype指向什么?和实例对象的prototype有什么关系?
Q:这里边this是什么,其他地方用途
Q:bind和call有什么区别?
Q:排序算法怼一波,复杂度怼一波

二面
例行自我介绍,项目问的更深.
Q:ES6了解哪些,一个个细问?
Q:异步一般用什么?
promise,顺便让讲了promise细节,之前做过总结
Q:ES6 module怎么实现的,和require区
Q:for of 和for循环有什么区别?
Q:canvas监听点击事件怎么实现
获取触发位置,计算是否在所绘图形范围
Q:其他写法吗?canvas有没有相关接口
他说有,isPointInPath(),这个我忘记了.
Q:web安全知道哪些?
Q:Csrf怎么防范,验证了origin和refer是否能完全避免?
并不能完全避免

三面
例行介绍,问了学校三年情况,在团队情况,实习情况.
然后话题一转,英文怎么样,我是听说不行,读写还行.
然后全程英文视频面(流汗
面试官自我介绍,然后开始问.
英语确实烂,想说的说不出来,好尴尬.
面试官比较厉害,南大本科,国外留学硕博,创办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面,乱七八糟问了一通,学校情况啊,实现情况啊,个人性格啊什么的.

春招实习的时候没有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布局的优缺点

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

实现动画有哪些途径

CSS3

JS帧动画,定时器,requestAnimateFrame

Canvas动画

SVG

图片

对象继承的实现

二面

web安全

https加密过程,证书用途

xss几种形式,防范手段,过滤哪些字符?

xsrf原理,实例,防范手段(Laravel的token)

Sql注入

性能优化

代码优化(html,css,js)

网络性能优化:

Cache缓存之强制缓存和协商缓存.看具体详情

CDN原理及应用

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,动画属性生效,能够进行正常的动画效果. 代码演示地址

inline和block元素列举,block和inline-block区别?

span包含12px大小英文"abc",问span高度?baseline怎么理解?

css实现自适应正方形?

string查找第一个不重复字符.如果换成字符串呢?

Angular数据绑定机制?

重绘和回流的理解

querySelectAll和ByClassName所获取元素的区别?如何绑定事件?

getComputedStyle用法?

addEventListener绑定事件?参数不同的执行顺序.

正则匹配电话号码.exec,match,search用法?推荐一篇高质量正则文章

数据类型判断的方法,toString判断的来源?

ES6 class原理?

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 只能检测基本数据类型

四栏布局

数组,数组对象去重

数组查某个字符出现次数

选择器权值

右键菜单定制

函数不定参

定时器原理

url=>渲染:script阻塞

数据结构应用

数据双向绑定(vue,ng原理)

面向对象三要素

闭包

三栏布局

内联元素包含块元素的表现

三种隐藏方式的区别

求最大子数组和.

块元素和内联元素渲染区别?

ul li实现计数.

flex-box用法

svg与canvas

JPG,png图片特点,场景

CSS写轮播

拖拽组建

PV统计

URL监听变化

1.数组操作

2.排序算法

3.动态规划(书包问题)

4.编程题(正则)

线程

各类通信协议

二叉树

算法复杂度

栈封装,利用栈对数组reverse(编程)

各类排序算法以及复杂度计算

Node的一些用法

二叉树遍历

JS内部属性

页面之间传参

程序题:数组找公共元素

出入栈可能性计算

数组去重

基本数据类型

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