昨天有幸的参加到了京东的金融组和物流组的面试 下边来给大家分享一下面试的经历吧
PS: 不得不说大厂的面试流程是真的很长啊 而且出入也挺麻烦的还 需要预约码然后取一个通行证 (吐槽一下京东的人脸识别 根本打不开门禁啊 然后围着大厅找人刷卡帮忙开门)

金融组这边其实我的技术栈是不太合适的 金融组主要是用 React 的 我只是私底下自己使用 并没有真正的在项目中使用过 好在面试官好像也并不是特别在意 只是问了一下愿意学习一下 React 的使用吗 回答当然是肯定的(其实我自己也一直想转成 React 技术栈) 毕竟现在除了 Flutter 之外 React-Native 应该是最火的跨端框架了(emmm…或许不应该除去 Flutter???毕竟新兴事物 感觉还是不够稳定 很怕火一阵的状况出现) 面试题还是非常的基础的 可能对于基础的要求会更高一些 然后就是对于框架的理解程度
主要是问了以下问题吧 我大概的描述一下我印象比较深的问题 至于一些作用域 作用域链 原型 原型链 和继承之类的问题我就不多做赘述了 真的是必考题

CSS 方面

这个方面其实问的很少 就问了两个布局

• 实现左侧定宽 右侧自适应

  这个我说的是用 flex 左侧固定给一个 width 右侧加一个 flex-grow:1; 但是面试官想要一个不是 flex 的答案 我当时有点懵逼 这个没有回答好 不过最后也是给出了一个答案 不过面试官跟我说这样有问题 说 right 会跑出去 ??? 我回来看了一下好像没有这个现象 感觉应该是他错了

    div {
      width: 200px;
      height: 200px;
    }

    .left {
      background-color: red;
      float: left;
    }

    .right {
      background-color: #000;
      margin-left: 200px;
    }

• 总宽确定 左右都不定宽 一个宽度变大另一个变小

  这个我还是用的 flex 一个盒子 flex 为 1 另一个为 0 这样会根据另一个的内容自动撑开宽度 保持总宽不变

JS 方面

• JS 的基本数据类型

  Number,String,Boolean,Undefined,Null 还有 ES6 新增了一个 Symbol

• 复杂数据类型和基本数据类型的区别

  复杂数据类型是按引用传递 改变拷贝数据的值会影响原始数据 基本数据类型是按值传递的 改变拷贝数据的值不会影响原始数据 基本数据类型存储在栈中 复杂数据类型存储在堆中

• 如何实现一个队列 队列的特性

  队列的特性是 FIFO(先入先出)我这里回答的是借用数组的 push 和 shift 方法 不过面试官好像更希望我说一个自己实现 push 和 shift 的思路 所以这个应该也算没有回答好

• ES6 用吗 都会用到哪些 会做什么使用

  Let Const Promise Object.assign Object.keys Reflect.ownKeys 数组的 map flat filter reduce isArray async/await(其实应该是 ES7 的) Number 的 isNaN isInfinite 解构赋值 函数默认值 rest 参数 Class 模块 forof 循环 Symbol 箭头函数等等的东西把
  这里主要就是问了一些异步相关的 比如 Promise 的用法 如何捕获错误 有什么其他的方法 这里主要是回答 finally race 还有 all 这几个方法的用法
  finally 得触发时机 如果进入了 catch 流程是否还会触发 finally 的触发取决于他出现的位置 如果他出现在 then 和 catch 之前就会在 then 和 catch 之前触发 不管有没有被 catch 都不会影响 finally 的触发
  我还特别的提了一下如果 all 中的参数如果有自己的 catch 逻辑 那么即使这个 Promise 出错 也不会进入 all 方法的 catch 逻辑 因为被 catch 过的 Promise 在不抛出错误或者返回一个失败的 Promise 就会返回一个成功的 Promise 参考MDN

• 箭头函数和普通函数有哪些不同

  箭头函数的 this 指向他创建时候的上下文 箭头函数不能作为构造函数 因为他无法通过任何方式改变 this 指向

• 从输入 URL 到页面渲染做了什么操作

  这里就不多赘述了 老生常谈的问题 这个应该回答的没有问题 大家也可以自己在这中间引申出一些自己了解的问题 比如 TCP 的三次握手四次挥手 这个感觉回答的面试官还算满意

• 什么是长链接

  客户端和服务器之间用于传输 HTTP 数据的 TCP 连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接

• websocket 的原理是什么 为什么要用 websocket 有什么优点

  原理没回答上来 只是知道是一种基于 http 和 tcp 的新协议 也不知道这算不算原理(我感觉不算 😄)
  使用 websocket 的原因就是为了保证数据的实时性 减小服务器的请求压力 因为我们需要一秒推送两次数据(有 k 线图和实时订单的存在 还有同步服务器时间) 所以如果使用 ajax 轮询会发送大量的请求 给服务器带来很大的压力

• 了解跨域吗 为什么会发生跨域 怎么解决的

  跨域是因为浏览器的同源策略 不允许加载不同源的服务器上的资源 (域名协议端口其中任何一个不同都会引起跨域) 解决方法就是 CORS 这应该是现在最主流的解决方法了 后端设置一下即可

• Vue 一个组件中都会有哪些属性和方法

  name data components methods mixins computed watch props inject provide filters directives 生命周期钩子 路由钩子 keepalive 的钩子
  反正看你了解的程度来吧 我只说了我用过的 我很怕说一个没用过的给自己挖坑

• computed 用的多吗 和 watch 有什么区别 应该在什么情况下使用

  computed 一般用于组织数据 返回一个特定的格式 我们一般希望 computed 是一个纯函数(没有副作用) 即在使用 computed 的过程中不会改变实例的数据等 传入相同的参数 返回的结果一致 computed 会缓存上一次计算的结果 如果其中的依赖没有发生变化 不会再次计算 直接返回缓存的结果 在做一些有复杂的逻辑和具有副作用的操作时 我们会使用 watch

• vue 的生命周期 每个阶段适合做什么操作?

  beforeCreate
  created
  beforeMount
  mounted
  beforeUpdate
  updated
  beforeDestory
  destoryed
  一些请求数据的操作会放在 created 中因为这时实例的数据等已经初始化完成 还有一些绑定事件监听的操作会在这一周期完成
  一些需要操作 dom 的操作要放在 mounted 里 比如使用 echarts 初始化一个容器 因为此时视图才开始渲染 最好是放在 nextTick 中调用 否则不一定能拿到 dom 实例(这里很多人有误区 认为组件挂载完毕就是渲染完毕了 其实此时刚刚开始渲染 可以参考Vue 官方文档中对于这一生命周期的描述)
  一些解绑事件的操作会放在 destoryed 这个阶段 比如 echarts 实例的销毁操作 websocket 的断开操作以及一些事件解绑等操作(不是组件上的事件 组件上的事件会在销毁后自动解绑 一般是只你在 created 中绑定的事件)

• props 是做什么用的 可以做一些限制吗 组件间传值有哪些方法

  props 可以接受父组件传输的数据 可以接收一个对象的方式对数据的类型等做一些约束
  父子组件传值可以通过在子组件上绑定一个自定义方法 由子组件使用 emit 来触发这个方法改变父组件的值 可以通过.sync 修饰符来简化这一流程 兄弟组件传值可以寻找公共的父级作为数据的承载者 或者使用 eventbus 等来传递数据 当然最优的解决方案还是 vuex

• data 为什么是一个函数 可以是一个对象吗?

  可以是一个对象 但是是一个对象会让所有的组件共享一个数据内存空间 修改其中的一个就会更改所有组件的属性

• vuex 用的多吗?在什么场景下使用 vuex?vuex 有哪些东西组成?分别用来做什么?为什么所有组件都可以访问到 vuex 的 store?如何使用 store 中的数据

  在公共数据比较多或者组件间传值较为复杂的时候使用 vuex vuex 主要是由 state mutation action getter 组成 (还有模块化的概念 不过主要是这四个模块) state 用来保存数据 mutation 用来更改数据 action 主要是做一些异步的操作 然后提交一个 mutation 来更改数据 在组件中使用 store 中的数据可以用 vuex 给我们提供的一些工具方法 mapStates mapActions mapGetters mapMutations 等 也可以使用 this.$store.state.xxx 这种方式 每个组件都可以访问到 store 的原因在这(vuex 源码中的 init 方法)

  function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
  }
  

  vuex 帮我们在实例上挂载了$store 这个对象

• vue 双向绑定的原理了解吗?大概的描述一下

  主要是利用了 Object.defineProperty 来做一个数据的劫持 配合发布/订阅者的模式来实现双向的绑定(这里大家可以详细的讲解一下这里的具体实现感觉会更好 我很久没有再研究 vue 的源码了 所以怕给自己挖坑 就没有详细的说这个)

• vue-router 中 hash 和 History 的区别

  Hash 模式的兼容性更好 原理是通过监听 hashchange 来做页面的跳转
  History 主要是使用了 History Api 中 pushState 和 replaceState 不会发送请求的特性来做页面跳转 通过监听 popstate 来做页面的跳转 History 模式需要后端配合将不存在的路由路径指向 index 页面 否则会报错

• http 的状态码

  就是常见的那几个 200 301 302 304 400 401 403 404 500 502 这种 可以通过 304 状态码引申出缓存的话题(如果你了解的话)

• 聊聊你知道的缓存的知识

  缓存分为强缓存和协商缓存
  强缓存主要是通过设置 cache-control 和 expires 来设置 cache-control 的优先级高于 expires 主要是因为 expires 是绝对时间 根据用户本地时间来计算 并不准确 所以可以使用 cache-control 的相对时间来设置
  协商缓存主要是 last-modified 和 etag etag 其实是对 last-modified 的缺点做了一点补充 因为 last-modified 只会关注他最后修改的日期 不会在意内容是否变化 etag 是根据文件内容计算出一个唯一值 这样只要文件内容不变 就不会重新请求

性能优化和安全方面

• 你对项目都做了哪些方面的优化

  1. webpack 使用 DllPlugin 对于一些依赖做了缓存 只有在依赖版本变化时才会重新打包这些资源
  2. 把小的图片转化为 base64 的格式 减少请求
  3. css 嵌套层数尽量减少
  4. webpack 也开启了 gzip 减少服务器端压缩的压力
  5. 使用异步组件 优化首屏打开速度
  6. 对于 echarts 加载大量数据做了优化 采取分片加载的方式 防止页面卡住一段时间无法操作(通过 setInterval 来异步的一部分一部分添加数据,这样可以在中间可以让出主线程执行其他任务)
  7. 尽量不去操作 dom 不修改 dom 的几何属性 少使用甚至不使用需要实时计算的 api (offsetTop scrollTop clientWidth getComputedStyle 等这些需要实时计算的属性) 这些操作会触发浏览器的回流和重绘 对性能消耗很大
  8. 压缩图片 压缩代码 使用懒加载的方式加载图片等
  9. 使用CDN服务器加载静态资源

• 了解安全方面的知识吗 都了解哪些? 如何防御?

  这里我就讲了一下XSS和CSRF
  XSS的防御其实就是对用户输入的一些转义
  XSS分为持久型和非持久型 非持久型主要是指用户在URL中夹杂一些代码 持久性就是比如在用户评论等会存储在数据库的一些数据中夹杂恶意代码
  CSRF的防御主要是通过验证refer 使用验证码和token这几种方式来防御

这些就是在面试中主要聊的问题吧 其实面了两个组 一共五个面试官问的问题都差不多 基本上这些问题都被问了三四遍 大概面了五个多小时 (京东好忙啊 中间平均换一个面试官要等二十分钟 我都以为我被遗忘了) 离开京东大概一个多小时吧 就电话通知都通过了 不过两个offer其实都不太好 薪资低到难以置信 (不是传统意义上的低 主要是京东正常都是995 算下来一个月怕是要多上七八天的样子 还给出了比别的公司低的水平就有点诧异(我还是对薪资看得重一些) 京东的面试官都很好吧 交流起来也不会给你特别大的压力 希望我的经历能给你带来一些帮助