腾讯一面（2019前端实习岗）

前言

之前投递了腾讯的实习生前端岗，一直没有电话，查了下状态说不合适，以为凉凉了，今天却收到了电话，出乎意料...
然后就开始了一面，一开始面试官说时间不会太久，大概30分钟吧，结果整个过程也就持续了30分钟吧。

下面是面试的过程：

---

自我介绍

• 简单介绍了自己所在的学校和专业，以及学习的过程。

能不能来深圳工作(简历意向写的广州)

JavaScript作用域了解吗？有多少种

• 全局作用域
• 函数作用域

问：JavaScript有块级作用域吗

答：ES5之前没有块级作用域，ES6提出了这个概念

let和var的区别

• var能重复声明，let不能
• let的变量作用范围不同，不存在变量提升

问：还有其他吗

答：...

ES6了解多少，用过哪些特性

• 简单说了下自己用过的一些特性

  • 箭头函数
  • 模板字符串
  • Class
  • module
  • 对象解构
  • Promise
  • ......

Promise了解吗？有多少种状态

• 三个状态：

  • pending
  • fulfilled
  • reject

• 两个过程：

  • pending -> fulfilled
  • pending -> rejectd

问：promise什么时候会进入catch
答：当pending为rejectd时

讲一下你简历上的react项目

• 简历上的项目，简单的阐述了一下

react的生命周期有哪些

• 初始化

  • constructor
  • getInitialState
  • getDefaultProps
  • componentWillMount
  • render
  • componentDidMount

• 更新过程

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

• 卸载过程（这个没答出来）

  • componentWillUnmount

什么时候会用到componentwillreceiveprops

• 用的不多，没答上来
• 网上解释

使用过构建工具吗？webpack的loader是干什么的？

• 项目中使用了webpack
• loader是用来编译和处理资源的

问：用过其他构建工具吗？

答：没有...（gg）

vue和react使用起来有什么区别

• 开放性题目，自由发挥

vue数据双向绑定的原理

• 主要讲了实现是基于Object.defineProperty
• 另外也大概阐述了下发布-订阅者模式，主要是Observer，Dep，Wacther等

项目中用到的ajax是原生的，还是用到了什么库？

• 都是用到了封装的库，主要用的是axios

http的状态码了解吗？

• 简单说了下2xx，3xx，4xx，5xx分别是干嘛的
• 在这里说到了304，于是有了下面的http缓存

什么情况下会返回304状态码？

• 这个问题比较复杂吧，这里回答了一个Etag

  • ETag是HTTP1.1产物，服务器通过某种算法，给资源计算出一个唯一的标志符，可能是一个资源的MD5值，在把资源响应给客户端的时候，会在实体首部加上"ETag: 值"，一起返回给客户端
  • 客户端会保留这个字段，并在下次请求的时候一并带过去给服务端，服务端接受客户端传来的ETag的值，然后进行比较前后的ETag的值是否一致，就能判断资源相对客户端是否被修改了
  • 如果匹配上了，服务端会返回304状态码，并告诉客户端直接使用本地缓存即可，反之，则以正常的GET200形式返回资源

  • 对应的首部字段

    • If-None-Match：ETag-value
    • If-Match：ETag-value
• 还有一种就是下面问的Last-Modified

http缓存，cache-control和etag有什么区别

• 这里虽然答上了，但感觉也答的不是很好

  • Cache-Control的首部字段较多
  • 倘若Cache-Control设置的缓存没过期，那直接从本地读取缓存即可，返回200（from cache），不需要向服务端发起请求
  • 使用ETag会向服务端发起请求，校验后服务端再决定是否返回资源
  • ...

除了etag，last-modified知道吗？

• 这个没答上来，忘记了

  • 服务器将资源传递给客户端时，会将资源最后更改的时间以"Last-Modified: GMT"的形式加在实体首部上一起返回给客户端
  • 客户端为该资源标记上信息，下次请求时，会将该信息带在请求报文中一起返回给服务端，服务端去做检查，若服务器上该资源最终修改时间是一致的，则资源没有被修改过，直接返回304状态码，不返回内容

  • 对应的首部字段

    • If-Modified-Since: Last-Modified-value
    • If-Unmodified-Since: Last-Modified-value

跨域有什么处理方法？

• JSONP
• CORS
• 服务端代理
• and more then...

JSONP的原理是什么？

• 利用script标签支持跨域的属性，用script标签拿到包裹了数据的方法（相当于是返回了一段js代码），在请求中包含callback，服务端注入参数后返回这个回调函数，然后script标签拿到返回的js代码跨域直接运行回调，需要前后端的配合。

JSONP可以用post请求吗？为什么？

• 不支持
• 因为script标签只支持get请求...

cookie和localstorage有什么区别？

• cookie数据大小不能超过4k
• cookie在服务端和客户端之间来回传递
• cookie可以设置很多属性，max-age，path，expires等
• localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
• localStorage存储的数据容量更大

问：还有其他吗

答：.....(gg)

描述一下css的盒模型

• 讲了下标准盒模型和怪异模式

实现垂直水平居中有哪些方法

• flexbox
• 绝对定位+margin负值（已知宽高）
• 绝对定位+transfrom负值（未知宽高）
• 绝对定位top left right bottom 0 + margin auto

问：绝对定位top left right bottom 0 + margin auto是在已知宽高的情况下使用吗？

答：我....忘记了

总结

大概30分钟后，面试官就说暂时到这里，有消息会尽快通知你，然后就结束了。以上问题问的还是很基础，有一些没答上来，还是得继续加油。