2017-12-01 20:24 前端工程师

关注

迟到的前端面经

前端面经

三方签完后，算是结束了自己的求职旅程。从 8 月开始到 11 月，三个多月的战线，经历了很多坎坷，心态上起起伏伏，但还是坚持到了最后。个人水平有限，目前有拿到爱奇艺、苏宁、百度外卖、好未来、CVTE 的 Offer。回忆整理了当时的面试题，同时写了一下自己的经验和感受，希望能够给盆友们一些帮助。

个人情况：本科双非，计算机类专业。没有实习经历，有几个自己做的项目，就上了战场。

面试部分

CVTE内推

电话一面，视频一面。CVTE 的前端面试还是相当有水平的，一面结合基础和项目问了一大把，有些答得不够深入；二面写代码写了很长时间，说了说思路。

一面（50min）

自我介绍？
为什么要做前端？（方向要明确）
最近在学什么东西？
React 的相对于传统框架的优势是什么？（组件化、Virtual DOM 方面的优势）
React 怎么做数据管理？介绍下 Redux ？React Component 的生命周期？说下 React-Router ？（React技术栈常问面试题）
简单说一下 Webpack 的原理？
项目用到了 WebSocket，说下 WebSocket 吧？长轮询和短轮询？
LocalStorage 和 SessionStorage 的区别？
项目用到了 FIS ，介绍一下？相对于 Webpack 有什么区别？
CSS 清除浮动的方法？
左右两列定宽，中间自适应的方法？（有多种方式）
浏览器事件***的原理？
介绍一下闭包？应用场景？
说一下 JavaScript 的继承方法？
用过哪些排序算法？快速排序和选择排序的时间复杂度？
前端攻击 XSS，CSRF ？避免方法？（前端安全方面的知识）
前端性能优化的方法？
说一下 HTTP 缓存机制？
还有什么要问我的？

二面（40min）

自我介绍？
聊项目？

写代码实现一个 diff 函数？（深比较）

 对比两个参数是否相等，
 diff(1, 1) // true
 diff(1, '1') // false
 diff({name: 'cvte'}， {name: 'cvte'}) // true
 diff({name: 'cvte'}， {name: 'seewo'}) //false

写代码实现一个 cut 函数？（考察正则的用法）
```
 cut(3123123123.123) //3, 123, 123, 123.123
```
为什么要选择前端？
对前端框架的认识和理解？（对比前端三大框架的优劣）
前端安全方面有什么了解？
感觉自己前端哪方面比较薄弱？
还有什么要问我的？

蘑菇街

电话两面。一面问基础和聊发展方向，二面技术 Leader 面简单聊了几句就结束了。

一面（50min）

自我介绍？
对前端这个行业怎么看，为什么要做前端？
对自己未来的规划？
说一下你理解的前端开发流程？
如何理解 JavaScript 闭包？
如何理解 JavaScript this 关键字？
JavaScript 基本数据类型？
Undifined 和 Null 的区别？
了解的 JavaScript 数组方法？
CSS单位 rem 和 em 的区别？
了解的原生 JavaScript 方法？
CSS 选择器优先级？
如何理解 HTML 语义化？
如何取消一个事件监听？
'==' 和 '===' 的区别？
如何选择前端框架？
你的优点和缺点是什么？
当你在一个团队的时候，你的憧憬是什么？
还有什么想问我的？

二面（30min）

聊项目？
从什么时候接触前端的？
你专业方向是 J2EE，当时为什么不选择 J2EE？
JavaScript 和其他语言的面向对象的区别？
继续聊项目？
兼职实习在做什么？
上一次面试官问的什么问题，哪些答的好，哪些答的不好，之后有查过嘛？（药丸）
还有什么要问我的？

拼多多

电话三面。问的很简单，三面完之后等了很长时间，应该是没通过。

一面（20min）

自我介绍
CSS 中 inline 元素可以设置 padding 和 margin 吗？
左边固定，右边自适应的两列布局，右面的 DOM 顺序在左边前面，说下实现？
CSS box-sizing 的值有哪些？
JavaScript 的基本数据类型？
如何判断 JavaScript 数据类型？
如何给元素添加事件？
如何阻止事件冒泡、阻止默认行为？
有一个字符串，里面包括 11 位手机号，如何把里面的手机号替换成别的字符？
Header 头 Set-cookie: http-only 是干什么用的？
还有什么想问我的？

二面（25min）

自我介绍？
讲讲你做过的项目？
项目中提到了 React，问：React 组件的生命周期？父子组件之间如何通信？子组件之间如何通信？
前端性能优化？
HTTP 缓存原理？
JavaScript 的垃圾回收机制？
CSS BFC 原理？
box-sizing 属性（两种盒子模型）？
稳定的排序和不稳定的排序？
快速排序的思路？
堆排序的思路？
还有什么想问我的？

三面（25min）

问了下学习成绩，考虑过读研吗？为什么选择工作？（很纠结的问题）
问了下项目的情况和学习经历？
有没有拿到其他公司的 Offer？
了解我们公司吗？用过我们的产品吗？感觉怎么样？
了解我们工作时间和待遇吗？
问了下家庭情况？
你所期望的薪资价位？
还有什么想问我的？

京东

第一次现场面，有点小紧张。一面问的基础很多。

一面（45min）

自我介绍？
问了下在学校学过的课程？
HTML5 和 CSS3 新特性？
LocalStorage、SessionStorage、Cookie的区别？
两个页面之间如何实现通信？
CSS 清除浮动的方法？
CSS 实现左右垂直居中的方法？
用过哪种 CSS 预处理器，简单介绍一下？
JavaScript typeof 对不同类型的返回结果？
JavaScript 数组常用方法有哪些？
解释 JavaScript 闭包，应用场景有哪些？
说下 JavaScript 原型和原型链？
JavaScript 继承方法有哪些，各有什么优劣势？
JavaScript 按值传递和引用传值的区别？
JavaScript 对象的浅拷贝和深拷贝区别？
用过哪些前端构建工具？
双向数据绑定有没有尝试实现过？
React 父子之间如何实现数据通信？
React Redux 数据管理的机制？
还有什么想问我的？

艺龙旅行网

视频两面，当时是在很艰苦的条件下完成的面试。

一面（30min）

聊了一下学校做过的项目？
说几种 HTTP 的状态码？
JavaScript 基本数据类型？
JavaScript 跨域的方式？
介绍几种 CSS 伪类？
CSS 选择器优先级？
比较一下链表、数组、哈希表？
你觉得一个方法写多少行合适？
如何处理团队之间的矛盾？
还有什么要问我的？

二面（25min）

聊项目？
微信小程序非页面级组件的实现方式？（小程序的坑）
使用过的 CSS 布局方式？
Webpack 的原理？（编译原理）
Webpack 打包出来的文件如何拆包？（没实现过）
对 ES6 的了解？
场景题：1000 个列表如何给每一个列表添加删除事件？（事件委托原理）
JavaScript 事件冒泡和事件捕获？
还有什么要问我的？

美图

电话一面。随便聊了几句。

一面（20min）

自我介绍？
聊项目？
JavaScript 继承方法？
JavaScript 基本数据类型和复杂数据类型？
JavaScript 伪数组是什么？
在移动端有哪些尝试？
CSS display 属性的值及作用？
HTML5 的新特性？
了解的图片的常用格式？
从浏览器 URL 输入到页面显示经历了哪些过程？（三次握手、四次挥手）
通过哪些方式学习前端的？
你认为前端工程师的职责是？
你对自己未来的规划？
还有什么想问我的？

CVTE校招

视频三面，问的挺有难度，各种基础项目 + 手写代码。

一面（20min）

自我介绍？
聊项目？
TCP Socket 建立连接的原理？
HTTP 长轮询的原理？
HTTPS 服务端和客户端连接的原理？（SSL 验证原理）
HTTPS 哪些有薄弱的地方容易被攻击？
ES6 箭头函数 this 指向的是哪里？
ES5 var 关键字、ES6 let 和 const 关键字的区别？
React 父组件和子组件、子组件和子组件如何传递数据？
React 子组件向层级高的父组件传数据的弊端，如何解决？（React Redux 的原理）
你前端方面有什么优势？
还有什么要问我的？

二面（50min）

聊项目？
为什么技术选型用 React，而不用 Vue 和 Angular？
React 组件间的通信方式？Redux 的原理？
开始写代码，三个题目（考察正则、原型、闭包）：

    实现一个函数 commafy，它接受一个数字作为参数，返回一个字符串，可以把整数部分从右到左每三位数添加一个逗号，如：12000000.11 转化为 12,000,000.11。

    实现一个函数 fun，例：
    fun(1).add(1).min(2).num // 最终输出为 -2

    实现一个 compose 函数，它接受任意多个函数作为参数（这些函数都只接受一个参数），然后 compose 返回的也是一个函数，达到以下的效果：
    const operate = compose(div2, mul3, add1, add1)
    operate(0) // => 相当于 div2(mul3(add1(add1(0))))
    operate(2) // => 相当于 div2(mul3(add1(add1(2))))

你平时是如何学习前端的？
你未来的职业规划是怎样的？
还有什么想问我的？

三面（30min）

对自己的前两次面试打个分，为什么？
之前有在公司实习过吗，感觉如何？
有拿到其它 Offer 吗，为什么投递 CVTE？
喜欢做成熟性产品还是创业型产品？
对加班有什么看法？
对 CVTE 的福利待遇有了解吗？
你期望获得的薪资？
未来 5-10 年的规划是怎样的？
你感到最有压力的事是什么？
还投过哪些公司，期望去哪家公司？
还有什么要问我的？

唱吧

现场四面，偏向于项目。

一面（25min）

自我介绍？
JavaScript 创建构造函数的过程中发生了什么？
JavaScript 的继承方式？
类似于静态变量在 JavaScript 如何实现？（闭包）
常用的 CSS 布局方式？左栏定宽，右栏自适应如何实现？
平时如何学习前端的？
还有什么想问我的？

二面（20min）

聊项目？
前端的职责是什么？
对前后端交互有什么认识？
了解的前端攻击方式，如何预防？
有没有做过 Hybrid 的前端页面？
前端有哪些坑人的地方？
为什么要做前端？
还有什么要问我的？

三面（15min）

类似微博或微信客户端扫码登录是如何实现的？
长轮询的原理？
一个数组，如何统计每个数出现的次数？
用过哪些前端工具？
如何看待学习框架和基础之间的关系？

四面（25min）

自我介绍？
通过哪些渠道知道我们公司的招聘的？
了解我们公司的哪些产品？
如何准备这次面试的？
个人履历情况？
自己的职业规划是怎样的？
如何看待在 BAT 等大厂和创业公司工作？
介绍了一下公司的福利和待遇？
还有什么想问我的？

滴滴

一面（50min）

视频一面，手撕代码很难受。

自我介绍？
手写代码找出二叉树节点的最长距离？
手写代码实现链表的逆序？
手写代码找出数组中的最长递增序列？（动态规划）
双向循环链表如何最快的找到节点？
解决 Hash 冲突的方式？
B树和B+树的特点？
作业调度的算法？
产生死锁的原因？
TCP 和 UDP 的区别？
TCP 三次握手的各个阶段？
TCP 的滑动窗口机制？
TCP 拥塞控制的方式？
浏览器内核渲染的原理？
有没有研究过 Chrome 的源码？
还有什么要问我的？

百度外卖

电话三面，几乎把前端技术栈问了个遍，相当有水平。

一面（30min）

自我介绍？
CSS position 属性的值有哪些？
CSS Flex 弹性布局的应用场景？
CSS 单位 em 和 rem 的区别？
两边定宽，中间自适应布局的实现方法？
JavaScript 闭包的理解？
对 AMD 和 CMD 理解？
HTTP 状态码 200 和 304 分别代表什么？
问做过的项目和难点？
对 React 技术栈的了解？
React 组件的生命周期、通信方式？
Webpack 常用的插件？
还有什么要问我的？

二面（50min）

自我介绍？
JavaScript 原型和原型链？
JavaScript this 关键字的理解？
常用的设计模式？（单例模式、工厂模式、观察者模式等）
如何实现一个观察者模式？
对 ES6 的了解？
箭头函数的应用场景？
Promise 的特点和实现方式？
Async/Await 的使用场景？
Iterator（迭代器）、Generator（生成器）的用法？
ES6 的 Class 继承和 ES5 有什么不同？
ES6 的模块化解决了哪些问题？如何进行编译的？
AMD、CMD、CommonJS 的区别和联系？
为什么说 Node.js 是非阻塞 I/O 的运行环境？
Node.js 的事件驱动模型？
Angular 脏检查的机制？
React Virtual DOM 的原理？
Vue 和前面两种框架的区别？
单向数据绑定和双向数据绑定？
如何看待前些时间 Angular 和 Vue 撕逼这件事？
场景题：栅格布局 CSS 代码如何实现？如何避免重复劳动？（CSS 预处理器）
场景题：假设有一个列表的数据，React 如何更快的加载数据？（优化方法）
还有什么要问我的？

三面（15min）

自我介绍？
学校和专业情况？
为什么要选择这个职位？
个人职业规划？
对公司业务的了解？
期望的薪资是多少？
还有什么要问我的？

创新工场

电话简单聊了几句。

一面（30min）

自我介绍？
聊项目？
前端如何调试 bug？
前端性能优化的方法？
JavaScript 闭包应用场景？
前端跨域的方法？
算法题：一个数组包含 1000 个数字，如何找出第 K 大的数字？
还有什么要问我的？

好未来

视频两面，问的比较浅显。

一面（25min）

聊项目？
HTML5 的新特性了解多少？
CSS 实现水平垂直居中的方法？
CSS 动画的实现方式？
左右两栏定宽，中间自适应的实现方法？
JavaScript 的基本数据类型？
JavaScript this 关键字的理解？
ES6 的箭头函数的使用？
用过哪些前端框架，评价一下优劣势？
看过哪些框架的源代码？
还有什么要问我的？

二面（20min）

自我介绍？
聊项目？

     var a 
     function foo(b) {
         a = b
     } 
     console.log(foo(2)) // output

     for (var i = 0; i < 3; i++) {
         console.log(i)
     } 
     setTimeout(console.log(i)) // output

手写实现数组去重？
手写封装一个 Promise？
手写实现 React 高阶组件？
手写实现一个 Redux 中的 reducer (state, action) => newState？
什么是函数柯里化？
还有什么要问我的？

苏宁

电话一面，视频一面。

一面（25min）

自我介绍？
如何学习前端的？
对 CSS Flex 布局的了解？
CSS 实现水平垂直居中的方法？
CSS 清除浮动的方法？
JQuery DOM 操作相关方法？
ES6 let 暂时性死区的理解？
ES6 Promise 的使用方法和应用场景？
ES6 Arrow Functions 的问题？
对 JavaScript this 关键字的理解？
this 丢失的问题如何解决？
ES5 Object 有哪些常用的方法？
Object.keys() 传入数组后会返回什么？
DOM 事件流的机制？
事件冒泡的普遍应用场景？

二面（20min）

自我介绍？
为什么要做前端？
对大公司和小公司的看法？
对加班有什么看法？
如何保持一个不断学习的状态？
如何看待学习前端和计算机基础之间的关系？
平时有压力的时候是怎么解决的？
你以后的职业规划大体是什么样的？
还有什么要问我的？

美团

现场四面，面试体验很好，美团的技术很不错。现在还在备胎池里待着。

一面（45min）

自我介绍？
聊项目？（主要深挖项目中用到技术）
HTML5 WebSocket 通信及原理？
TCP 三次握手和四次挥手？
React 中 state 更新的触发机制？
React 的 Virtual DOM 原理？其中的 Diff 算法能描述一下吗？
对 Vue 了解哪些？
前端工作流工具用过哪些？Webpack 的原理？
JavaScript 实现异步的方法？
ES6 的了解？
手写实现一个 Promise？
手写快速排序？
手写链表反转？
还有什么要问我的？

二面（45min）

自我介绍？
应用题：用纯CSS写一个左右滑动的开关按钮？

代码输出题：以下代码的输出结果？

 'use strict'
 var a = 5
 var obj = {
     b: 6
     fun: function() {
         console.log(this.a) // output
         console.log(this.b) // output
     }
 }

代码输出题：以下代码的输出顺序？

 var a = new Promise(function(resolve, reject) {
     console.log(1) // output
     setTimeout(() => console.log(2), 0) // output
     console.log(3) // output
     console.log(4) // output
     resolve(true)
 })
 a.then(v => {
     console.log(5) // output
 }) 
 console.log(6) // output

手写一个闭包？
手写原型链继承？其它的继承方式？
手写原生 Ajax ？
HTTP 状态码有哪些？
还有什么要问我的？

三面（30min）

算法题：

 类似 IP 地址 `192.168.1.1` => `11000000.10101000.00000001.00000001`，必须验证是一个合法的 IP 地址

算法题：从一堆数里找出前 K 大的数？
聊项目？
让你感觉压力很大的一件事是？
这辈子你做过最疯狂的事是什么？
平时看过那些书？
还有什么要问我的？

四面（25min）

自我介绍？
你是怎么过来的？
个人职业规划和发展？
拿到过哪些 Offer，薪资是多少？
你平时的兴趣爱好？
对你影响最深的一个人是？
个人家庭情况？
如何处理团队成员之间的矛盾？
对美团的了解和看法？
还有什么要问我的？

爱奇艺

现场两面。难度一般，面完让回来等第三面。后来直接给了 Offer。

一面（45min）

自我介绍？
JavaScript 基本数据类型？

代码题：说出以下代码的输出结果？

 console.log(null == undefined) // output
 console.log(null === undefined) // output
 console.log(typeof(new Object()) == typeof(null)) // output
 console.log(new Number('1') == 1) // output
 console.log(new Number('1') === 1) // output
 console.log(new Object('1') == 1) // output
 console.log(new Object('1') === 1) // output
 console.log(new Boolean() == false) // output
 console.log(new Boolean() === true) // output

代码题：说出以下代码的输出结果？

 var a = 1
 if (true) {
     console.log(a) // output
     var a = 2
     var b = 3
     console.log(b) // output
 }
 console.log(a) // output
 console.log(b) // output
 b = 4

代码题：说出以下代码的输出结果？

 var a = 1
 function a () {}
 console.log(a) // output

代码题：说出以下代码的输出结果？

 var a = 1
 function fun(a, b) {
     a = 2
     arguments[0] = 3
     arguments[1] = 1
     return a + b
 }
 console.log(fun(0, 0)) // output
 console.log(a) // output

代码题：说出以下代码的输出结果？

 for (var i = 0; i < 5; i++) {
     setTimeout(function() {
         console.log(i) // output
     }, 0)
 }
 console.log(i) // output

代码题：说出以下代码的输出结果？

 function A() {
     this.num1 = 1
 }
 A.prototype.num2 = 2
 function B() {
     this.num1 = 3
 }
 B.prototype = new A()
 var b1 = new B()
 console.log(b1.num1) // output
 console.log(b1.num2) // output
 var b2 = B()
 console.log(b2.num1) // output
 console.log(b2.num2) // output

谈一下对闭包的理解？
谈一下 JavaScript 的继承方式？
博客中写了哪些文章？
GitHub 中写了些什么东西？
还有什么要问我的？

二面（20min）

自我介绍？
聊项目？
如何保证的 Socket 实时通信的稳定性？
TCP/IP 五层模型？各层的协议类型？
ARP 协议的工作过程？
IP 数据报的格式？
TCP 三次握手和四次挥手？
TCP 的重传机制？
DNS 查询过程？
HTTP RESTful接口？
HTTP 常见状态码？
单线程和多线程的区别？
JavaScript 中的异步队列？
JavaScript 事件的处理机制？
React DOM 的更新机制？
React 受控组件和非受控组件的区别？
还有什么要问我的？

经验分享

笔者从八月多就开始准备简历，那时候一些大厂的内推已经开始。这些公司的校招一般分两个阶段，内推阶段（8月-9月）：通过类似内推码的方式进行网申，不刷简历，但是大部分还是会笔试；校招阶段（9月-11月），正常网申，有可能会刷简历。大约投了四五十家的简历，然后准备做笔试。因为自己没有实习经历，加上双非背景，简历被刷是正常的事，就通过了几家笔试。前几场面试几乎连跪，快到十月了还没有拿到一个 Offer，那时候心态快崩了。后面继续投简历做笔试，获得了几个面试机会，就是硬着头皮也要上了。最后总算没有辜负那些天的坚持，拿到了几个 Offer。