前端菜鸟的春招实习面经第二弹（附答案）我又面了好几家公司，给我感受最深的是原来面试一个小时真的很正常（PS：以前我不敢相

前言

从上一篇文章开始，我从一个从未有互联网面试经验的小白，成功蜕变为一个面了好多家但是还未收到OFFER的大白！哈哈哈哈！

我又面了好几家公司，给我感受最深的是原来面试一个小时真的很正常（PS：以前我不敢相信什么面试居然一个小时，都聊些啥??）。其次就是多面，这种感觉就像是考试之前复习时候你感觉啥都会，拿着书也不知道看哪里，以上考场发现处处都眼熟，细节都模糊的样子。面试也是，面到不会的问题那种面红耳赤终会让你印象深刻，面完立马找答案总结，绝对有效率。

目前已经通过几家公司的一面二面，对我来说已经甚是鼓励！冲哇...

思想觉悟提高时刻走起，毒打归毒打，学习还是要继续不是！！！那句话叫啥来着？

What does not kill me, makes me stronger.
任何杀不死我的，都将使我更强大 ———尼采

我还会回来的..... ———伟大的沃wo兹zi基ji说的

前端菜鸟的春招实习面经第一弹（附答案）

面经是我在春招（20年暑期实习求职）期间遇到的所有公司及问题，当做自己总结的笔记，也许也对你有一定用处。包含以下公司：

旷厂(offer)
福厂(交叉面)
鹅厂(GM面)
度厂
字节
网易
滴滴(offer已拒)
图森

还没写完，持续更新~~

旷视

一面

1.介绍自己及项目？学习历程？

2.CSS基础？怎么实现水平居中？

// flex布局
.father {
    display: flex;
    justify-content: center;
}
.son {
}

// margin   注意：只能在子元素有宽度时才能使用
.father {
  width: 300px;
  height: 300px;
}
.son {
  margin: auto;
  width: 100px;
  height: 100px;
}

// 定位移动方式
.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

3. display: none;、visibility: hidden、opacity=0有什么区别？各适用什么样的场景？

首先回答最基本的区别：display不渲染DOM。而其他两个渲染DOM。具体如下：
display：none
- 浏览器不会生成属性为display: none;的DOM元素
- 由于是作用域DOM树节点，动态改变此属性时会引起重排
- 不会被子类继承，但是子类也不会显示
visibility: hidden
- 元素渲染，只是隐藏，依然占据空间
- 会被子类继承，但是子类也可以通过显示的设置visibility: visible;实现子元素的显示
- visibility: hidden;不会触发该元素已经绑定的事件
- visibility: hidden;动态修改此属性会引起重绘
opacity=0
- opacity=0只是透明度为100%,元素隐藏，依然占据空间
- opacity=0会被子元素继承,且子元素无法改变
- opacity=0的元素依然能触发已经绑定的事件
- transition对次元素有效，对其他元素无效

4. position属性值有哪些？有什么区别？

static
- 默认值。没有定位，元素出现在正常的流中。
relative
- 占据在文档流中的位置，相对于自身进行移动，会导致覆盖其他框。
absolute
- 不占据文档流中的位置，相对局最近的已定位的父元素（直到HTML），和其他元素重叠。
fixed
- 与文档流无关，相对于浏览器，是固定位置，和其他元素重叠。
sticky
- 按普通文档流定位，在跨越阈值之前是相对定位，超越之后固定定位。
inherit
- 规定应该从父元素继承position 属性的值。

5. 实现顶部菜单栏先滑动，到一定位置之后固定？

监听页面的SCROLL事件，判断每一区块距离视口顶部距离，超过了则设定该区块 position:fixed，反之去掉。

//基础代码
window.addEventListener('scroll', function () {
	var top = document.documentElement.scrollTop || document.body.scrollTop		  
	//获得高度之后，设置条件判定并改变CSS属性

position：sticky

div{
    position: sticky;
    top: 0;  // 当元素距页面顶部大于0时相对定位，等于0是固定定位。
}

6. 节流和防抖机制说一下？

目的：节流和防抖都是页面性能优化的一部分知识点。

节流

比如我们浏览页面，向下滑动过程中发送多次请求，但是如果一起请求的话会造成请求集中发送。因此我们会选择隔一段时间发一次请求。

实现方案：通过定时器循环调用目标函数，函数内部形成闭包判断上一次调用时间，设定间隔执行的时间。以下代码原文章：链接

// 封装调用定时器
setInterval(
  // func是用户传入需要防抖的函数 wait是等待时间
  throttle(func, wait),
  1
)

const throttle = (func, wait) => {
  let lastTime = 0 // 上一次执行该函数的时间
  return function (...args) {
    // 当前时间 ‘+’或得当前时间的毫秒数
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}

防抖

不想让用户每触发一次时间就响应，而是在用户触发事件后一定时间内没有再次触发才响应时间。
实现方案：封装定时器，延迟执行用户传入的方法。

以下代码原文章：链接

// func是用户传入需要防抖的函数 wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function (...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

7. VUE的优势？项目为什么选VUE？

8.v-show和v-if的区别？

v-show相当于上面所问的display。在使用的过程中其实是display: none 和 display: block之间的切换。但是页面在一开始会渲染DOM节点，在一开始是开销大，但是后面切换过程开销更小，适合于频繁切换的场景。
v-if相当初始为false时候组件不会被渲染，当改变的时候会触发VUE的销毁/挂载组件机制，切换开销更高，不适合于经常切换的场景。但是这种方式可以在需要的时候再去渲染组件，减小初始的渲染开销。

9. VUE的生命周期以及各阶段的钩子函数说一下？

EMM 感觉这个直接上个官网解释比较好：传送门

当然我自己也会总结一遍：

beforeCreate：在实例初始化之后，此时是获取不到 props 或者 data 中的数据的。
created：在实例创建完成后被立即调用。可以访问数据和事件，但是还没挂载组件，看不到。
beforeMount：创建CDOM，相关的 render 函数首次被调用。
mounted：将 VDOM渲染为真实 DOM 并且渲染数据。不会确保挂载所有子组件。如果需要等到整个视图渲染完成则调用vm.$nextTick
beforeUpdate：数据更新前调用，在服务端渲染不调用。
updated：数据更新后调用，在服务端渲染不调用。
activated：被 keep-alive 缓存的组件激活时调用。
deactivated：被 keep-alive 缓存的组件停用时调用。
beforeDestroy：实例销毁之前调用。适合移除事件、定时器等等，否则可能会引起内存泄露的问题。在这一步，实例仍然完全可用。
destroyed：实例销毁之后，实例不可用。
errorCaptured：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

10. 给定两个数组，请找出其中相同的数？

let arr1 = [1, 2, 3, 4]
let arr2 = [2, 4, 5]

// foeEach遍历
let res = function () {
  let res = []
  arr1.forEach(function (item) {
    if (arr2.indexOf(item) != -1) {
      res.push(item)
    }
  })
  return res
}

// Array.filter方法
let res = arr1.filter((item) => arr2.indexOf(item) != -1)

// 时间复杂度最低的方法
let res = function () {
  let obj = {}
  arr1.forEach((item) => obj[item] = item)
  let res = arr2.filter((item) => obj[item] === item)
  return res
}

PS：ARRAY的方法详解：传送门

11. VUEX有了解吗？什么场景下适用？

开放性问题，我结合项目说的。

12. 用过async，await吗？解释下原理？

async，await是在ES7推出的解决异步请求的方法。
async 本身其实是一个语法糖。函数就是将 Generator 函数的星号（*）替换成 async，将 yield 替换成 await，仅此而已。
async 函数的 await 命令后面，可以跟 Promise对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
async函数返回的是一个Promise对象，本身相当于一个语法糖。await后面跟的应该是一个Promise对象。

13. 你觉得自己的项目还有啥亮点我没有问到的？

EMM，作为学前班选手能有啥亮点。如实回答了情况。不过给面试官点个赞，第一次遇到这个问题，可以看出真的是想让应聘者全面展示。

14. 还有没有啥问题？实习时间？

二面

1. 表述下所理解的Http协议？

2. Websocket相关？使用场景？

3. 说一下HTTP状态码？

4. 使用框架开发和原生开发的区别？

5. 解释下MVVM？

6. 实习时间？

7. 职业发展规划？

三面

三面其实是HR打来的，随便聊聊之后确认了录用意向，等回学校之后正式发放OFFER！作为转行以来第一个录用意向，激动的不行！！！

阿里

一面

过了

二面

过了，许愿后面两面！

交叉面

1.自我介绍？

2.介绍项目？

3.项目当中上传的文件如何做id处理？

4.项目当中的难点？怎么处理的？

5.还有没有其他的项目？

6.浏览器的事件模型？

7.事件代理？

8.css动画和JS动画的区别？

9.实现滚动栏的原理？

10.讲讲节流和防抖的思路和区别？

11.实现懒加载的思路？

腾讯

emm，激动的心持续半小时就彻底的凉透了！用的牛客在线面试，结果断了两次网。一开始的问题我就答得不好，后面老师说让我再学习（多么痛的领悟），不到三十分钟就结束了。哎，很悲桑！下次再来！

第一次

1. 直接介绍项目及项目亮点？

暂时没啥项目亮点哇！贼难受！

2. 你项目当中用到上传？那当多个用户发起相同的上传时候如何处理？怎么处理这些并发操作？

3. VUE当中不同组件的传值？

父子通信
- 父组件通过props传递数据给子组件，子组件不能修改props,子组件通过emit发送事件传递数据给父组件
- 使用语法糖 v-model 来直接实现，因为 v-model 默认会解析成名为 value 的 prop 和名为 input 的事件
- 通过访问$parent或者$children对象来访问组件实例中的方法和数据
- Vue 2.3 及以上版本的话还可以使用 $listeners 和.sync 这两个属性
兄弟组件
- 兄弟组件之间通过查找父组件中的子组件实现，也就是 this.$parent.$children，在$children 中可以通过组件 name 查询到需要的组件实例，然后进行通信。
跨组件通信
- Vue 2.2 新增的API provide / inject
最强方法
- 通过VUEX实现数据的状态管理，能够解决各组件之间的数据通信问题

4. VUE怎么实现自定义组件？

通过自定义单文件组件，再引入目标文件注册。

5. 浏览器跳转新URL过程？

6. 浏览器的渲染过程？

7. 写一个SQL查询语句，实现查询学生成绩当中最后一次成绩？

第二次

一面

10道填空题，5道简答题，4道算法。

二面

一道算法

GM/EVP/面委会

1. 自我介绍？

2. 问项目？

3. 学习前段过程？

4. 计算机基础？数据结构？操作系统?数据库？C？

5. 浏览器渲染过程？

6. JS是否阻塞？放在不同位置有啥影响？

7. JS的垃圾回收机制原理？

8. 算法题：给N个鸡蛋，从100层楼扔鸡蛋，求测出杂碎鸡蛋临界位置的最少次数？

9. JS实现：不用任何内置函数，实现字符串当中替换的方法？

10. HTTPS的原理？

11. 304出现的原因？

12. 在JS加载之前要做某些操作？怎么实现？

13. 如何实现XSS攻击？（将脚本传至URL当中，读取URL并执行）

内存泄漏是什么？如何实现内存泄漏？

总结：EMM！对自己的表现很满意，已经尽力了，但是对自己的技术实力很失望！也认识到自己还有很多东西要学习，老师问我转专业过来觉得多久能追上同学，虽然我觉得这只是时间问题，但也进一步加深我的紧迫感！要学的太太多哇！

百度

1. 自我介绍？

2. 项目当中为什么用MongoDB？MongoDB与mysql、redis的区别？

3. mybatis框架当中怎么实现对数据库的操作？如果自己实现，思路是什么？

4. 用户状态管理如何实现？

5. 说一下display：none和visibly：hidden的区别？

6. 哪些操作会引起重绘，哪些会引起重排?

7. 说一下Let、const、var的区别？let、const能不能重复定义？

8. 说一下js的事件机制？

9. 说一下this指向问题？箭头函数当中的this？

10. 算法题1：给定一个数组和一个k,判断该数组能否被分为和相等的K个子集？

11. 算法题2：获取url为json格式？

字节

一面

1. 自我介绍？

2. 介绍项目？项目当中的难点和亮点？

3. 算法一：实现斐波那契数列的计算？递归之后优化，实现复杂度O(n)的算法？

// 递归方法
function Fibonacci(n){
    if(n<=0) return 0;
    if(n===1) return 1;
    return Fibonacci(n-1)+Fibonacci(n-2);
}

// 改进之后 
function Fibonacci(n){
    let n = praseInt(n);
    let res=[0,1];
    if(n<=1){return res[n];}
    let n1=0,n2=1;
    let tmp;
    for(let i=2;i<=n;i++){
        tmp=n1+n2;
        n1=n2;
        n2=tmp;
    }
    return tmp;
}

4. 算法二：给定一个二叉树和一个数字n，判断二叉树中是否有一个路径上的数字之和等于给定的数字n？

5. 原型链问题：写出下列代码当中`proto、prototype`的等值式？

const p = new Person();
// 连接p和Person
p._proto_ = Person.prototype

下面这张图，多看几次！每看一次都感觉不一样...

6. 加问上一题实现New的过程？

新生成对象->链接原型->绑定 this->返回新对象

function create() {
    // 创建一个空的对象
    let obj = new Object()
    // 获得构造函数
    let Con = [].shift.call(arguments)
    // 链接到原型
    obj.__proto__ = Con.prototype
    // 绑定 this，执行构造函数
    let result = Con.apply(obj, arguments)
    // 确保 new 出来的是个对象
    return typeof result === 'object' ? result : obj
}

7. 闭包、作用域：看程序说输出？

for(var i=0;i<10;i++) { 
    console.log(i); // 0 1 2...9
}

for(var i=0;i<10;i++) { 
    setTimeout(() => console.log(i));  // 10个10
}

为什么会出现上述结果？如何改进？
// 方法一 改var为let
for (let i = 0; i < 10; i++) {
  setTimeout(() => console.log(i));
}

除了上述方法？还能怎么做?

// 方法二 闭包
for (var i = 0; i < 10; i++) {
 // function inner(i) { 
 // setTimeout(() => console.log(i));
 // }
 //inner(i);
  (function(i) {
    setTimeout(() => console.log(i));
  })(i);
}

8. 上学期数据库课程当中事务的四大特性？

这个问题真的是嗅大了，上学期那么认真学的课程现在居然最基本的概念都忘了||-_-

如果一个数据库声称支持事务的操作，那么该数据库必须要具备以下四个特性：

A:原子性（Atomicity）
原子性是指事务包含的所有操作要么全部成功，要么全部失败回滚，这和前面两篇博客介绍事务的功能是一样的概念，因此事务的操作如果成功就必须要完全应用到数据库，如果操作失败则不能对数据库有任何影响。

C:一致性（Consistency）
一致性是指事务必须使数据库从一个一致性状态变换到另一个一致性状态，也就是说一个事务执行之前和执行之后都必须处于一致性状态。

拿转账来说，假设用户A和用户B两者的钱加起来一共是5000，那么不管A和B之间如何转账，转几次账，事务结束后两个用户的钱相加起来应该还得是5000，这就是事务的一致性。

I:隔离性（Isolation）
隔离性是当多个用户并发访问数据库时，比如操作同一张表时，数据库为每一个用户开启的事务，不能被其他事务的操作所干扰，多个并发事务之间要相互隔离。

即要达到这么一种效果：对于任意两个并发的事务T1和T2，在事务T1看来，T2要么在T1开始之前就已经结束，要么在T1结束之后才开始，这样每个事务都感觉不到有其他事务在并发地执行。

D:持久性（Durability） 持久性是指一个事务一旦被提交了，那么对数据库中的数据的改变就是永久性的，即便是在数据库系统遇到故障的情况下也不会丢失提交事务的操作。

例如我们在使用JDBC操作数据库时，在提交事务方法后，提示用户事务操作完成，当我们程序执行完成直到看到提示后，就可以认定事务以及正确提交，即使这时候数据库出现了问题，也必须要将我们的事务完全执行完成，否则就会造成我们看到提示事务处理完毕，但是数据库因为故障而没有执行事务的重大错误。

9. 讲HTTP相关？

HTTP状态码？304代表啥？遇到过哪些？

状态码从1开头到5开头不在赘述了。304状态码表示该资源从上一次请求之后没有改变，可以直接显示缓存当中的内容。

七层协议和五层协议分别是哪些？http是哪一层的协议？tcp/ip分别是哪一层的协议？

层次	内容	协议
应用层	为应用程序提供服务，并管理应用程序之间的通信	SMTP、HTTP、FTP
表示层	处理数据的标识问题，比如编码、格式转化、加密解密等
会话层	负责建立管理和断开通信连接，实现数据同步
传输层	端到端传输数据，同时处理传输错误、控制流量等	TCP UDP
网络层	地址管理、路由选择	IP协议
数据链路层	数据分割成帧，mac寻址、差错校验、信息纠正等。	以太网
物理层	利用传输介质为数据链路层提供物理连接

GET 和 POST区别？

EMM这个问题也很尴尬，面试老师是对着我之前的面经博客提问的，但是我也没有答全。再来总结一次关键点：

Get能请求缓存，但是Post不可以
Post支持更多编码类型
Get回退无害，Post会再次提交
Get能被保存为书签，Post不可以
由于浏览器Url有限制，所以Get的长度受限，但Post不受限（因为都在Body里）

网易

一面

1. 自我介绍？

2. 项目介绍？

3. 学习方法？

4. HTTP常用状态码？

5. 项目中定义组件的方式？

6. 组件之间的传值？VUEX？

7. CSS当中的SCOPE属性作用及原理？

8. v-modle原理？自己实现要怎么实现？

9. computed和watch的区别？适用场景？

10. css常用布局方式？左边固定右边自适应的多种实现方法？

11. 跨域遇到过没有？怎么解决的？

12. 单文件网页实现原理？

13. 数组去重多种方法？

14. es6新特性？

15. git常用操作？已经写好A方法，想试试B方法怎么处理？

16. Promise.all()和Promise.resolve()解释一下？

MDN文档

Promise.all()是将多个Promise实例作为一个iterable参数传入，最后返回一个新的Promise实例。当且仅当里面的实例都返回resolved的时候实例返回resolved，如果有一个返回reject，则此实例对象返回rejiect.

Promise.resolve()返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。通常而言，如果你不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。

17. 浏览器缓存策略？说一下分别有哪些方法？

强缓存

Expires（该字段是 http1.0 时的规范，值为一个绝对时间的 GMT 格式的时间字符串，代表缓存资源的过期时间）
Cache-Control:max-age（该字段是 http1.1的规范，强缓存利用其 max-age 值来判断缓存资源的最大生命周期，它的值单位为秒）

协商缓存

Last-Modified: 值为资源最后更新时间，随服务器response返回
If-Modified-Since: 通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存
ETag: 表示资源内容的唯一标识，随服务器response返回
If-None-Match: 服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存

18. 网页优化？

19. 实习时间？

滴滴

一面

一面感觉状态蛮好的，一面结束半小时左右HR打电话约当晚二面！！具体内容记不得了||-_-,一天四场面试晕了！

二面

二面面的对自己太失望了||-_- 一道算法题，结果卡住了！做了好久才做出来，更别谈优化了！

HR

本来不抱啥希望，结果意外收到了offer，但是要求立即做决定加上时间要求，只能暂时忍痛割爱了||-_-

图森

一面

首先告诫大家！一定准备好网，一个半小时的面试网不行换了几个平台！！其次，面试老师很好也很客气，算法题不会很耐心的引导！