聊一聊京東的面經(金融組&物流組)

昨天有幸的參加到了京東的金融組和物流組的面試 不過是外派的職位 雖然都順利的經過了 不過感受可能對於外派人員的要求低一些吧 下邊來給你們分享一下面試的經歷吧
金融組這邊其實個人技術棧是不太合適的 金融組主要是用 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這幾種方式來防護

這些就是在面試中主要聊的問題吧 而後但願能夠對你們帶來一些幫助

(再次重申 是我回復面試官的答案 不是標準答案)