聊一聊京东的面经(金融组&物流组)

昨天有幸的参加到了京东的金融组和物流组的面试 不过是外派的职位 虽然都顺利的经过了 不过感受可能对于外派人员的要求低一些吧 下边来给你们分享一下面试的经历吧
金融组这边其实个人技术栈是不太合适的 金融组主要是用 React 的 我只是私底下本身使用 并无真正的在项目中使用过 好在面试官好像也并非特别在乎 只是问了一下愿意学习一下 React 的使用吗 回答固然是确定的(其实我本身也一直想转成 React 技术栈) 

面试题仍是很是的基础的  而后就是对于框架的理解

主要是问了如下问题吧 我大概的描述一下我印象比较深的问题 至于一些做用域 做用域链 原型 原型链 和继承之类的问题我就很少作赘述了 真的是必考

这些答案是我回复面试官的答案 并不是标准答案 标准答案请你们自行查阅资料

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的文档: developer.mozilla.org/zh-CN/docs/…

• 箭头函数和普通函数有哪些不一样
  
  箭头函数的 this 指向他建立时候的上下文 箭头函数不能做为构造函数 由于他没法经过任何方式改变 this 指向

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

  这里就很少赘述了 老生常谈的问题 这个应该回答的没有问题 你们也能够本身在这中间引伸出一些本身了解的问题 好比 TCP 的三次握手四次挥手 这个感受回答的面试官还算满意

• 什么是长连接

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

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

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

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

  跨域是由于浏览器的同源策略 不容许加载不一样源的服务器上的资源 (域名协议端口其中任何一个不一样都会引发跨域) 解决方法就是 CORS 这应该是如今最主流的解决方法了 后端设置一下便可 其实还有不少其余的 好比JSONP window.name什么的古老方法 这里你们能够多说几个

• 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 官方文档中对于这一辈子命周期的描述 cn.vuejs.org/v2/api/#mou…)
  一些解绑事件的操做会放在 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这几种方式来防护

这些就是在面试中主要聊的问题吧 而后但愿能够对你们带来一些帮助

(再次重申 是我回复面试官的答案 不是标准答案)