在阿里我是如何當面試官的（持續更新）

時間  2020-04-12
標籤 阿里 如何 當面 持續 更新 欄目 阿里巴巴 简体版
原文   原文鏈接

前言

因爲疫情關係，最近在掘金看到不少同窗的工做狀況心裏仍是蠻觸動的（降薪、變相裁人、辭退等）。可能這並非當下一個廣泛的現象，但仍然使我感覺到前端這碗青春飯很差混。於此同時聯繫我內推的同窗不少都處於待業狀態，能感覺到他們心裏的迷茫和焦灼。因而心裏一直有聲音督促我，趕忙寫點面試相關的東西出來吧，哪怕對你們只有一絲絲的幫助。固然此次我會以面試官的角度出發（可能不是一個優秀的面試官），讓你們更加了解阿里的面試流程、面試數據和麪試場景等。接下來我會從如下幾個模塊來說解：javascript

  • 招聘流程
  • 內推數據
  • 面試數據
  • 面試注意點
  • 面試題解析

舒適提示：入職前以應聘者的角度寫了一篇面試相關的文章《面試分享：兩年工做經驗成功面試阿里 P6 總結》，收到了不少同窗對個人感謝，特別高興他們能所以找到心中理想的工做，這也給我寫文章帶來了極大的動力。但願正在找工做的同窗能夠看看，或許能對你產生一些幫助。css

更新日誌

2020.03.19html

2020.03.22前端

2020.03.29vue

2020.04.06java

招聘

Hi，你們好，咱們是阿里巴巴新成立的 BU 政務釘釘事業部（杭州同窗在用的健康碼是我 BU 聯合其餘 BU 共同設計的一個項目），目前還有大量的 Web 前端職位空缺。除此以外，咱們已經開啓校招通道，正在招聘優秀的實習生（今年 6 月份畢業的應屆生通道已關閉）。但願想找我內推或者想了解更多招聘信息的同窗能夠加我微信：18768107826node

招聘流程

阿里的招聘流程可能相對較長，通常狀況下若是走「內推」渠道，可能會經歷如下幾個步驟：react

  • 簡歷篩選
  • 簡歷評估
  • 一輪技術面
  • 二輪技術面
  • 三輪技術面
  • 一輪 HR 面
  • 二輪 HR 面

若是你運氣夠好，可能只須要 4 面左右（沒有三輪技術面、二輪 HR 面）。若是你運氣很差，那麼可能存在 5 ~ 6 面的狀況。webpack

舒適提示：諮詢了一些朋友，通常的面試（小米、滴滴、新浪以及騰訊等）可能都須要經歷 4 面以上，固然也有朋友經歷了網易的 3 面（二輪技術面 + 一輪 HR 面）。若是有知道其餘公司的招聘狀況，也能夠在評論中告知你們，以便更好的應對面試。ios

內推數據

入職半年以來斷斷續續收到掘友們的內推簡歷。這裏將內推的數據整理了一下，供你們有個體感：

須要注意不是收到內推簡歷就會當即投遞，會先有一個純粹的簡歷篩選過程，所以上傳簡歷和簡歷評估會有數量的差異。除此以外，當前尚未遇到被 HR 拒絕的狀況。固然從內推數據能夠看出，其中關鍵性的面試是簡歷評估和一輪技術面（一般對於應聘者而言是一面和二面）。

舒適提示：上傳簡歷會被錄入阿里的人才庫，若是簡歷不在面試流程中（或者簡歷在某部門面試後被釋放），那麼其餘感興趣的部門會發起新的招聘邀約。

面試數據

因爲進入公司不久，通常我都是做爲簡歷評估的面試官，少數時候會做爲一輪技術面的面試官，這裏將我做爲面試官的數據整理以下：

感受和內推數據中的簡歷評估經過率相比，我在簡歷評估的時候會更加謹慎......

面試注意點

在面試的過程當中，我印象最深的幾點感覺必定要告知你們：

  • 一、回答問題不要過於着急，必定要耐心等待面試官把問題說完
  • 二、回答問題要有邏輯、幹練簡潔
  • 三、若是面試官打斷你說話，此時必定要謹慎回答，由於頗有可能你回答過於繁瑣且他對你當下的回答不滿意
  • 四、一個問題不要糾結好久.....
  • 五、不會的面試題必須乾脆利落的說不會
  • 六、面試的時間最好控制在 30 ~ 40 分鐘左右，這樣互相之間的體驗不會不好
  • 七、面試是一個挖掘面試者能力和潛力的過程
  • 八、面試官不是全能的，面試必定是一個互相學習的過程
  • 九、必定要提早準備好本身想要問的問題，最致命的是別人把你安排的明明白白結果你對別人一無所知.....

關於第 2 點仍是要說明一下，不少面試者回答問題沒有邏輯性，在回答以前能夠先思考一下，而後告訴面試官將從 n 個方面進行講解，首先第 1 個方面是...，其次第 2 個方面是...

舒適提示：面試的時候發現大部分的面試者廣泛存在 1 和 2 兩個問題。若是你的回答沒有邏輯還繁瑣且沒有命中要點，一般面試官對你的印象會很是差。相反，若是你回答問題過於簡潔，一般狀況下面試官會以爲你沒 Get 到他的問題點（固然會懷疑本身的表述有沒有問題），通常都會追加更詳細的問題描述。

面試題解析

通常在面試開始前，我會根據應聘者的簡歷提早準備 8 道左右的面試題（在面試的過程當中可能會有調整），最終分析了一下筆試題數據以下：

舒適提示：這數據不包括追加的面試題，是提早爲應聘者準備的面試題數據。在真正的面試中，面試題可能會由於策略和現場面試狀況進行臨時調整和追加。

因爲自己對 React 熟悉還不夠，所以我遇到應聘者若是是 React 技術棧會相對吃虧一些。接下來我會重點講解一些面試題，有些簡單的面試題不會出解答思路（有些面試題可從《面試分享：兩年工做經驗成功面試阿里 P6 總結》中找到答案），沒有給出答案的面試題但願你們在評論中給出，供別人參考。

HTML 篇

在 HTML 中如何作 SEO 優化？

建設中...

首屏和白屏時間如何計算？

參考連接

CSS 篇

瞭解 Flex 佈局麼？日常有使用 Flex 進行佈局麼？

解題思路

  • 首先得說出 Flex 佈局概念，Flex 的結構組成（Flex Container 、Flex Item），遇到的全部面試者都沒有此回答
  • 其次能夠講講本身日常用的最多的 Flex 屬性
  • 最後能夠講講本身平時經常使用的佈局（左右兩列，上下兩行等）

參考連接

CSS 中解決浮動中高度塌陷的方案有哪些？

解題思路

  • 能夠先歸納解決高度塌陷問題的兩種類型：clear 屬性 和 BFC 法
  • 而後能夠介紹兩種類型的具體方案：
    • 追加元素並設置 clear 屬性
    • 使用 CSS 樣式插入僞元素
    • Bootstrap 的解決高度塌陷方案（BFC）

可能追加的面試題（詳見參考連接）

  • 高度塌陷產生的緣由是什麼？
  • clear 屬性清除浮動的原理是什麼？
  • 採用 BFC 解決高度塌陷和clear 屬性清除浮動相比的優點是什麼？

參考連接

Flex 如何實現上下兩行，上行高度自適應，下行高度 200px？

解題思路

  • flex-direction: column
  • flex: 1

如何設計一個 4 列等寬佈局，各列之間的邊距是 10px（考慮瀏覽器的兼容性）？

解題思路

  • 浮動和清除浮動
  • margin 負值的做用（可參考 Bootstrap 3 中柵格容器.container的樣式）
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style> * { margin: 0px; padding: 0px; } .container { margin-right: -10px; } .row { box-sizing: border-box; padding-right: 10px; width: 25%; height: 100px; float: left; } .container::before { display: table; content: ''; } .container::after { display: table; content: ''; clear: both; } </style>
  </head>
  <body>
    <div class="container">
      <div class="row">第一列</div>
      <div class="row">第二列</div>
      <div class="row">第三列</div>
      <div class="row">第四列</div>
    </div>
  </body>
</html>
複製代碼

可能追加的面試題

  • 若是你回答的是 Table 佈局，那必定會追問 Table 佈局和 Div 佈局有什麼區別？

CSS 如何實現三列布局，左側和右側固定寬度，中間自適應寬度？


CSS 清除浮動的原理是什麼？

解題思路

利用清除能夠設置元素禁止浮動元素出如今它的左側、右側甚至是雙側。

<style> div { display: inline-block; width: 40%; height: 100px; background: #d3cff7; margin-right: 10px; margin-bottom : 0; padding: 0; } .float { float: left; } .box { height: 50px; } p { border: 1px solid black; margin:0; padding:0; width: 80%; } </style>

<div class="float"></div>
<div class="box"></div>
<p>3333333333333333333333333333333333333333333</p>
複製代碼

1
2

3333333333333333333333333333333333333333333


因爲 div1 浮動，p 和 div1 佈局重疊，爲了解決這個問題，可使 p 元素左側不容許有浮動元素，給 p 元素添加一個 clear:left 的樣式以後
1
2

3333333333333333333333333333333333333333333


能夠發現 p 的位置下移從而使 p 和 div1 佈局不會重疊，實際上是使用清除以後，自動增長了 p 元素的上外邊距，確保它落在浮動元素 div1 的下面。CSS2.1 引入了清除區域的概念，清除區域是在元素上外邊距之上增長的額外間隔（確保浮動元素不會與該元素重疊），不容許浮動元素進入這個範圍，意味着設置 clear 屬性的 p 元素的外邊距並不改變，之因此該元素會向下移動是由於清除區域形成的。div1 和 div2 的高度分別是 100px 和 50px， 所以清除區域的高度在 50px 左右（不算 border 和瀏覽器代理初始樣式等）。若是給 p 元素一個上外邊距 margin-top:30px，則 p 元素並不會向下移動 30px，而是在解析完樣式以後清除區域的高度變成了 50px - 30px 左右，而 p 元素仍然位置不變，若是要使 p 元素下移，則須要使 p 元素的 margin-top 值高於最大的清除區域高度 50px，而且向下位移的距離也是 margin-top 值減去最大的清除區域高度。

BFF 的做用有哪些？

參考連接

《面試分享：兩年工做經驗成功面試阿里 P6 總結》

CSS 中的 vertical-align 有哪些值？它在什麼狀況下才能生效？

解題思路

vertical-align屬性值：

  • 線類：baseline、top、middle、bottom
  • 文本類：text-top、text-bottom
  • 上標下標類：sub、super
  • 數值百分比類：20px、2em、20%等（對於基線往上或往下偏移）

舒適提示：負值相對於基線往下偏移，正值往上偏移，事實上vertical-align:base-line等同於vertical-align:0。這個負值真的是 CSS 神器！

vertical-align生效前提：

  • 內聯元素span、strong、em、img、button、input等
  • display值爲inline、inline-block、inline-table或table-cell的元素
  • 須要注意浮動和絕對定位會讓元素塊狀化，所以此元素絕對不會生效

CSS 中選擇器有哪些？CSS 選擇器優先級是怎麼去匹配？

建設中...

僞元素和僞類有什麼區別？

參考連接

《面試分享：兩年工做經驗成功面試阿里 P6 總結》

CSS 中的 background 的 background-image 屬性能夠和 background-color 屬性一塊兒生效麼？

可能追加的面試題

  • background-color 屬性能夠覆蓋 background-image 屬性嗎？

瞭解 CSS 3 動畫的硬件加速麼？在重繪和重流方面有什麼須要注意的點？

參考連接

《面試分享：兩年工做經驗成功面試阿里 P6 總結》

CSS 能夠作哪些優化工做 ?

建設中...

浮動元素和絕對定位元素的區別和應用?

建設中...

CSS 中哪些屬性能夠繼承？

JavaScript / TypeScript 篇

JavaScript 中數組是如何存儲的？

解題思路

  • 同種類型數據的數組分配連續的內存空間
  • 存在非同種類型數據的數組使用哈希映射分配內存空間

舒適提示：能夠想象一下連續的內存空間只須要根據索引（指針）直接計算存儲位置便可。若是是哈希映射那麼首先須要計算索引值，而後若是索引值有衝突的場景下還須要進行二次查找（須要知道哈希的存儲方式）。

可能追加的面試題

  • JavaScript 中的數組爲何能夠不須要分配固定的內存空間？
  • JavaScript 中數組的存儲和 C / C++ / Java 中數組的存儲有什麼區別？
  • JavaScript 中數組是否能夠理解爲特殊的對象？
  • JavaScript 中數組和 C / C++ / Java 中數組存儲在性能上有什麼區別？
  • JavaScript 中的 Array 和 Node.js 中的 Buffer 有什麼區別？
  • JavaScript 中的數組什麼時候是連續存儲的，什麼時候是哈希存儲的？
  • 哈希存儲的鍵衝突（散列碰撞）能夠有哪些解決方案（開鏈法、線性探測法、紅黑樹等）？

參考連接

聊聊繼承以及說說 ES5 和 ES6 繼承的區別？

解題思路

  • ES5 的繼承使用藉助構造函數實現，實質是先創造子類的實例對象this，而後再將父類的方法添加到this上面。ES6 的繼承機制徹底不一樣，實質是先創造父類的實例對象this（因此必須先調用super方法），而後再用子類的構造函數修改this。
  • ES6 在繼承的語法上不只繼承了類的原型對象，還繼承了類的靜態屬性和靜態方法
  • ...

參考連接

說說對原生 JavaScript 的理解？

解題思路

  • JavaScript 實現包含的幾個部分
  • JavaScript 的語言類型特性
  • 解釋性腳本語言（對標編譯性腳本語言）
  • 面向對象（面向過程）
  • 事件驅動 / 異步 IO
  • 缺乏的關鍵性功能等（塊級做用域 、模塊、子類型等）
  • 自由...

談談你對 TypeScript 的理解？

解題思路

  • 類型批註和編譯時類型檢查
  • 類
  • 接口
  • 模塊
  • 裝飾器
  • 聲明文件（相似於 C 中的頭文件）
  • 對 ES 6 的支持
  • 語法提示
  • ESLint（TSLint 不推薦）
  • ...

JavaScript 中幾種迭代語法在 Chrome 等現代瀏覽器中的性能差別？

面試題來源

應聘者簡歷裏寫了熟悉高性能 JavaScript 開發

解題思路

  • 考察 for、for...of、for...in、forEach、while、do...while等
  • 可使用 console.time 和 console.timeEnd 進行測試
  • 注意現代瀏覽器屢次執行的性能優化問題
  • ++ 和 -- 有沒有區別
  • 遍歷的時候是否存在查找原型鏈的過程

可能追加的面試題

  • 字面量 / 數組 / 對象存儲性能有沒有什麼區別？
  • 條件比較多的時候 if-else 和 switch 性能哪一個高？
  • 高性能的 JavaScript 開發在語法層面你以爲有哪些能夠提高性能？
  • 如何在代碼中減小迭代次數？
  • 如何實現一個 Duff 裝置？

如何提高 JavaScript 變量的存儲性能？

解題思路

  • 訪問字面量和局部變量的速度最快，訪問數組元素和對象成員相對較慢
  • 因爲局部變量存在於做用域鏈的起始位置，所以訪問局部變量比訪問跨做用域變量更快，全局變量的訪問速度最慢
  • 避免使用with和catch，除非是有必要的狀況下
  • 嵌套的對象成員會明顯影響性能，儘可能少用，例如window.loacation.href
  • 屬性和方法在原型鏈中的位置越深，則訪問它的速度也越慢
  • 一般來講，須要訪問屢次的對象成員、數組元素、跨做用域變量能夠保存在局部變量中從而提高 JavaScript 執行效率

瀏覽器和 Node.js 的事件循環機制有什麼區別？

參考連接

《面試分享：兩年工做經驗成功面試阿里 P6 總結》

比較一下 TypeScript 和 JavaScript，在什麼狀況下你以爲須要 TypeScript ?


在 JavaScript 中如何實現對象的私有屬性?


async / await 和 Promise 的區別?

解題思路：

  • await 會等待異步代碼執行，會阻塞代碼（使用時要考慮性能）
  • async / await在調試方面會更加方便

在 JavaScript 能夠有哪幾種形式實現繼承，各有什麼優缺點？

解題思路

類型 優缺點
構造函數模式 能夠建立不一樣實例屬性的副本，包括引用類型的實例屬性，可是不能共享方法
原型模式 引用類型的屬性對於實例對象而言共享同一個物理空間，所以能夠共享方法
原型鏈 對父類實現方法和屬性繼承的過程當中，父類實例對象的引用類型屬性在子類的實例中共享同一個物理空間，由於父類的實例對象指向了子類的原型對象
借用構造函數 解決了繼承中的引用值類型共享物理空間的問題，可是無法實現方法的共享
組合繼承 屬性的繼承使用借用構造函數方法，方法的繼承使用原型鏈技術，即解決了引用值類型共享的問題，又實現了方法的共享，可是子類的原型對象中還存在父類實例對象的實例屬性
寄生組合繼承 組合繼承已經能夠解決大部分問題，可是也有缺陷，就是會調用兩次父類的構造函數，一次是實現原型時使子類的原型等於父類的實例對象調用了父類構造函數（同時在子類的原型對象中還存在了父類實例對象的實例屬性），一次是使用子類構造函數時調用了一次父類構造函數。寄生組合式繼承能夠解決在繼承的過程當中子類的原型對象中還存在父類實例對象的實例屬性的問題。

參考連接

React 篇

React 中的 setState 爲何須要異步操做？

解題思路

  • 保持內部一致性：props 的更新是異步的，由於re-render父組件的時候，傳入子組件的props才變化；爲了保持數據一致，state也不直接更新，都是在flush的時候更新
  • 將state的更新延緩到最後批量合併再去渲染對於應用的性能優化是有極大好處的，若是每次的狀態改變都去從新渲染真實 DONM，那麼它將帶來巨大的性能消耗
  • 當即更新回來視覺上的不適應，好比在頁面打開時候，多個請求發佈致使頻繁更改Loading 狀態，會致使 Loading 圖標閃爍

可能追加的面試題

  • 何時setState會進行同步操做？
  • React 官方對於setState特定狀況下進行同步操做的優化方案是什麼？
  • React 中 setState 後想要拿到更新的state值應該怎麼處理？

參考連接

React 應用如何在從新加載頁面時保留數據？

解題思路

  • localStorage 結合 Redux
  • url query（注意長度限制）

使用 React Hooks 的同時爲何須要使用高階組件？

面試題來源

簡歷中寫着使用 Hooks 結合高階組件完成業務開發

解題思路

  • 反向入坑問題，若是是業務遷移能夠說明進行部分改造遷移致使
  • 正向說明 Reat Hooks 中不須要高階組件的寫法，例如 Redux 舉例
  • 自定義 Hook

可能追加的面試題

  • 徹底用 Hooks 的寫法是否能夠摒棄高階組件的寫法？
  • 怎麼使用 Hooks 替代高階組件？

參考連接

Ajax 請求放在 componentDidMount 裏進行處理仍是放在componentWillMount 裏進行處理比較合適？

解題思路

  • 服務端渲染
  • Event Loop

gaearon ：If it's an async request, it won't be fulfilled by the time the component mounts anyway, regardless of where you fire it. This is because JS is single threaded, and the network request can't "come back" and be handled while we are still rendering. So the difference between firing it earlier and later is often negligible.

You're right that it matters in some rare cases though and for those cases it might make sense to break the recommendation. But you should be extra cautious as state can update before mounting, and if your data depends on state, you might have to refetch in that case. In other words: when in doubt, do it in componentDidMount.

The specific recommendation to avoid side effects in the constructor and Will* lifecycles is related to the changes we are making to allow rendering to be asynchronous and interruptible (in part to support use cases like this better). We are still figuring out the exact semantics of how it should work, so at the moment our recommendations are more conservative. As we use async rendering more in production we will provide a more specific guidance as to where to fire the requests without sacrificing either efficiency or correctness. But for now providing a clear migration path to async rendering (and thus being more conservative in our recommendations) is more important.

JS 是單線程，Ajax 請求不會 "返回" 而且觸發當咱們正在 rendering 的時候（Ajax 的執行結果會放到任務隊列中，等主線程執行完後採起讀取任務隊列中的任務進行執行），由於理論上放在哪裏結果都同樣，都會執行兩次 render。

這樣的話，就不必在componentWillMount中調用 Ajax，以免理解不到位，對state的結果預計錯誤。componentDidMount的執行很明瞭，不會引發歧義，因此在componentDidMount中最合理了。

可能追加的面試題

  • 說說 React 官方推薦 Ajax 請求放在 componentDidMount 裏進行處理，而不是放在 componentWillMount 裏進行處理？
  • 若是 Ajax 請求放在 componentWillMount 裏進行處理，且 Ajax 的返回結果在 render 以前，那麼最終會執行幾回 render ?

參考連接

React 在語法層面能夠作哪些性能優化？

解題思路

  • PureComponent + Redux + immutable-js / immutability-helper
  • Redux -> Redux Toolkit
  • 組件庫按需加載
  • 動態 Ployfill
  • Tree Shaking
  • 路由懶加載
  • Hooks useCallback
  • React Fragments
  • 構建函數中的事件 bind 處理
  • 避免使用內聯樣式屬性
  • JSX 中合理控制條件渲染的範圍（避免無謂的重複渲染）
  • key
  • 保持 state 中數據必響應的特性

可能追加的面試題

  • 深比較和淺比較的區別是什麼？
  • 日常在 render 時有哪些須要注意的地方？

React 和 Vue 的區別？

框架 React Vue 2.x
類型 MVVM MVVM
響應式 √ √
組件化 √ √
腳手架 Create React App Vue CLI
路由 react-router vue-router
狀態管理 react-redux / React Hooks / MobX vuex
總體思路 函數式、單向數據流 聲明式、表單雙向綁定
組件優化 PureComponent / shouldComponentUpdate 可理解爲自動化 shouldComponentUpdate
HTML JSX (結構 & 表現 & 行爲融合、完整的 JavaScript / TypeScript 語法支持、先進的開發工具 Lint / 編輯器 Auto 等) Template（結構 & 表現 & 行爲分離、HTML 更友好、開發效率提高、文檔學習成本） / JSX
CSS CSS 做用域須要額外實現，例如一些 CSS-in-JS 方案（styled-components、styled-jsx），通常須要額外的插件支持語法高亮和提示 單文件組件 Style 標籤
Chrome 開發工具 react-devtools vue-devtools
優點 大規模應用程序的魯棒性（靈活的結構和可擴展性）、適用原生 App、豐富的生態圈、豐富的工具鏈 一站式解決方案、更快的渲染速度和更小的體積

除此以外，在語法層面：

  • 在複用層面 React 可經過高階函數、自定義 Hooks 實現。而 Vue 在大部分狀況下使用 Mixin。
  • Vue 的組件實例有實現自定義事件，父子組件通訊能夠更解耦。React 萬物皆 Props 或者本身實現相似的自定義事件。
  • Vue 中可使用插槽 Slot 分發內容，React 萬物皆 Props。
  • Vue 中豐富的指令（確實好用，還支持靈活的自定義指令），React 萬物皆 JSX。
  • Vue 中的計算屬性和偵聽屬性語法糖，React 可在特定的周期函數中進行處理。
  • Vue 框架對過渡動畫的支持，React 原生沒發現該能力。
  • Vue 提供一站式服務，React 每每在設計時須要考慮生態應用。
  • Vue 全局配置、全局 API 仍是挺好用的，好比 Vue.use 可全局在實例中注入對象。
  • Vue 中的全局組件很是好用，不須要像 React 那樣一遍遍引入組件。
  • Vue 的 Template 中使用一些變量數據（例如常量）必須掛載在this上（簡直蛋疼），React 中的 JSX 萬物皆可 JavaScript。
  • React Hooks 新穎式概念和語法設計。
  • React Fragments 很是棒，Vue 暫時沒發現相似的功能（會形成更多的元素嵌套問題）。
  • ...

舒適提示：有更好的語法對比請在評論中告知。

可能追加的面試題

  • 說說 React 和 Vue 的三個明顯的區別？
  • 能說說 React 相比 Vue 的優點在哪裏？
  • 能說說 Vue 相比 React 的優點在哪裏？
  • 你以爲在什麼場景下用 Vue 或 React ?

Vue 篇

Vue CLI 3 有哪些特性？

面試題來源

簡歷中寫着 Vue CLI 技術棧

解題思路

  • 圖形化界面（vue ui）
  • 插件系統
  • CLI 服務
  • Vue CLI 無需 Eject 便可進行 Webpack 配置（針對 Create React App）
  • 可配置化 Polyfill
  • 現代模式
  • Prefetch / Preload
  • webpack-merge / webpack-chain
  • 瀏覽器兼容性
  • CSS 預處理器
  • 環境變量
  • 構建應用 / 庫 / Web Components 組件
  • 部署（CORS / PWA）
  • ...

可能追加的面試題

  • 有沒有設計過通用的 Vuc CLI 插件？
  • 有沒有設計過通用的 Vue 腳手架？
  • 有研究過 Vue CLI 的源碼嗎？

能對比一下 Create React App 和 Vue CLI 3 嗎？

面試題來源

簡歷上寫着熟悉 React 和 Vue 技術棧

解題思路

類型 Create React App Vue CLI 3.x
可一鍵構建 SPA 應用 √ √
Script react-scripts（可定製化） @vue/cli-service
ESLint 插件集 react-app eslint-plugin-vue（插件化）
CSS Modules √ √
CSS 預處理器 自定義 Sass 自然支持 Sass & Less & Stylus（可配置化）
PostCSS 後處理器 √ √
HTML 和靜態資源 HTML 插值 & Svg 組件化 HTML 插件 & Preload & Prefetch & 多頁應用 & URL 規則
代碼分割 √ √
環境變量 √ √
PWA √ 插件化
單元測試 Jest 插件化（Ject & Mock & ...）
Proxy √ （靈活，但每每須要自定義） √（這種變成配置項）
TypeScript 模板 插件化
自定義腳手架模板 Custom Templates（template.json） Preset & 插件系統（很是棒，可遠程）
Webpack 配置 Eject & Webpack files Inspect & vue.config.js & 默認配置全面 & webpack-merge & webpack-chain（有學習成本）
Webpack 分析 Source map explorer vue ui（GUI 交互式）
快速原型開發 × @vue/cli-service-global
交互式開發 × vue ui
瀏覽器兼容性 現代瀏覽器（自定義 Polyfill & browserslist） browserslist & Polyfill & 現代模式
構建 應用 應用 & 庫 & Web Components 組件 (異步)

舒適提示：這裏指的是默認功能比較，而不是說不能進行功能自定義擴展！

Creat React App 在工程化體系上沒有 Vue CLI 3.x 更加的開箱即用，除此以外，Vue CLI 3.x 中的插件體系是一個很是棒的特性，它使自定義腳手架模板變得很是靈活（很是適合企業定製化腳手架）。固然 Create React App 是有它本身的設計理念的，對於簡單的應用它是一種優點（不可配置化預先約定）。

Vue.js 整個實現原理？

面試題來源

簡歷中寫着熟悉 Vue.js 源碼，或者簡歷中只寫着 Vue.js 技術棧，或者面試的過程找不到亮點

解題思路

enter image description here

這裏簡單的描述一下 Vue 2.x 的運行機制（須要注意分析的是 Runtime + Compiler 的 Vue.js）。

初始化流程：

  • 建立 Vue 實例對象
  • init過程會初始化生命週期，初始化事件中心，初始化渲染、執行beforeCreate周期函數、初始化 data、props、computed、watcher、執行created周期函數等。
  • 初始化後，調用$mount方法對Vue實例進行掛載（掛載的核心過程包括模板編譯、渲染以及更新三個過程）。
  • 若是沒有在 Vue 實例上定義render方法而是定義了template，那麼須要經歷編譯階段。須要先將template 字符串編譯成 render function，template 字符串編譯步驟以下 ：
    • parse正則解析template字符串造成 AST（抽象語法樹，是源代碼的抽象語法結構的樹狀表現形式）
    • optimize標記靜態節點跳過 DIFF 算法（DIFF 算法是逐層進行比對，只有同層級的節點進行比對，所以時間的複雜度只有 O(n)。若是對於時間複雜度不是很清晰的，能夠查看我寫的文章ziyi2/algorithms-javascript/漸進記號）
    • generate將 AST 轉化成render function字符串
  • 編譯成render function 後，調用$mount的mountComponent方法，先執行beforeMount鉤子函數，而後核心是實例化一個渲染Watcher，在它的回調函數（初始化的時候執行，以及組件實例中監測到數據發生變化時執行）中調用updateComponent方法（此方法調用render方法生成虛擬 Node，最終調用update方法更新 DOM）。
  • 調用render方法將render function渲染成虛擬的Node（真正的 DOM 元素是很是龐大的，由於瀏覽器的標準就把 DOM 設計的很是複雜。若是頻繁的去作 DOM 更新，會產生必定的性能問題，而 Virtual DOM 就是用一個原生的 JavaScript 對象去描述一個 DOM 節點，因此它比建立一個 DOM 的代價要小不少，並且修改屬性也很輕鬆，還能夠作到跨平臺兼容），render方法的第一個參數是createElement(或者說是h函數)，這個在官方文檔也有說明。
  • 生成虛擬 DOM 樹後，須要將虛擬 DOM 樹轉化成真實的 DOM 節點，此時須要調用update方法，update方法又會調用pacth方法把虛擬 DOM 轉換成真正的 DOM 節點。須要注意在圖中忽略了新建真實 DOM 的狀況（若是沒有舊的虛擬 Node，那麼能夠直接經過createElm建立真實 DOM 節點），這裏重點分析在已有虛擬 Node 的狀況下，會經過sameVnode判斷當前須要更新的 Node節點是否和舊的 Node 節點相同（例如咱們設置的key屬性發生了變化，那麼節點顯然不一樣），若是節點不一樣那麼將舊節點採用新節點替換便可，若是相同且存在子節點，須要調用patchVNode方法執行 DIFF 算法更新 DOM，從而提高 DOM 操做的性能。

須要注意在初始化階段，沒有詳細描述數據的響應式過程，這個在響應式流程裏作說明。

響應式流程：

  • 在init的時候會利用Object.defineProperty方法（不兼容 IE8）監聽Vue實例的響應式數據的變化從而實現數據劫持能力（利用了 JavaScript 對象的訪問器屬性get和set，在將來的 Vue3 中會使用 ES6 的Proxy來優化響應式原理）。在初始化流程中的編譯階段，當render function被渲染的時候，會讀取Vue實例中和視圖相關的響應式數據，此時會觸發getter函數進行依賴收集（將觀察者Watcher對象存放到當前閉包的訂閱者Dep的subs中），此時的數據劫持功能和觀察者模式就實現了一個 MVVM 模式中的 Binder，以後就是正常的渲染和更新流程。
  • 當數據發生變化或者視圖致使的數據發生了變化時，會觸發數據劫持的setter函數，setter會通知初始化依賴收集中的Dep中的和視圖相應的Watcher，告知須要從新渲染視圖，Wather就會再次經過update方法來更新視圖。

能夠發現只要視圖中添加監聽事件，自動變動對應的數據變化時，就能夠實現數據和視圖的雙向綁定了。

可能追加的面試題

  • Vue.js 源碼的入口主要作了些什麼處理？
  • Vue.js 中的數據劫持是怎麼實現的？瀏覽器兼容性呢？
  • Vue.js 中的依賴收集是怎麼處理的？和閉包有什麼關聯嗎？
  • Vue.js 中的模板解析須要經歷哪幾個階段？
  • Vue.js 中的虛擬節點優點是什麼？
  • Vue.js 中的 DIFF 算法是怎麼處理的？
  • Vue.js 中 DIFF 算法的時間複雜度是多少？爲何？
  • Vue.js 中 computed / watch 實現的原理是什麼？
  • Vue.js 中有哪些周期函數？這些周期函數都是在什麼時機執行的？
  • Vue.js 中的 $nextTick 的原理是什麼？它主要經歷了哪些變化？爲何？
  • Vue.js 對 DOM 的更新作了哪些標記優化處理？
  • Vue.js 在語法層面能夠作哪些優化處理？
  • Vue.js 2.x 中的 Proxy 代理主要作了些什麼工做？
  • Vue.js 2.x 中如何支持 TypeScript ?
  • Vue 3.x 的源碼相對 Vue 2.x 主要作了哪些變化？
  • Vue.js 中的 M / V / VM 分別指的是哪些？
  • Vue-loader 主要有哪些特性？
  • Vue.js 如何作 ESLint 校驗？
  • Vue.js 如何作單元測試？
  • 瞭解過 Vue-Router / Vuex 的源碼嗎？（感知性問題，不會深刻問）
  • 發佈 / 訂閱模式和觀察者模式的區別是什麼？
  • 手寫一個發佈 / 訂閱模式？
  • 簡述 MVC / MVP / MVVM 的區別？
  • 若是熟悉 Nuxt 等可能會問 SSR 的實現原理？
  • 日常遇到 Vue.js 報 error / warning 的時候有深刻追蹤錯誤棧的習慣嗎？
  • Vue 2.x 中的數據劫持可否採用發佈 / 訂閱模式實現？採用觀察者模式帶來的優點和劣勢有哪些？
  • Vue 的整個框架的實現原理大體可分爲哪幾個部分？

參考連接

Vue.js 中組件之間通訊有哪些方案？

解題思路

  • Vuex
  • Event Bus
  • Pub / Sub
  • Emit / On
  • provide / inject
  • Element UI dispatch / broadcast
  • props
  • parent / children 實例對象

可能追加的面試題

  • Element UI 中 dispatch 和 broadcast 是如何實現的？
  • 祖先和子孫之間通訊有哪些方案？
  • 任意組件之間通訊有哪些方案？

Vue 如何定製化腳手架？須要考慮哪些因素？

建設中...

$nextTick 執行的時機和 DOM 渲染的關係是什麼？

可能追加的面試題

  • 什麼是 Event Loop ?
  • 宏任務和微任務有什麼區別？
  • 哪些是宏任務哪些是微任務？
  • $nextTick在幾個版本迭代中都經歷了什麼變化？
  • 打開新的瀏覽器窗口時會從新建立一個新的 Network 進程嗎？

參考連接

Vue 使用的是什麼版本，如何配合 TypeScript 工做，TypeScript 有哪些特性？

建設中...

Vue 裏的 keep-alive 是怎麼實現的？

建設中...

面試題來源

簡歷中出現 keep-alive 信息

可能追加的面試題

  • 設置了 keep-alive 以後對組件渲染的生命週期有什麼影響？
  • keep-alive 有哪些特性？

說說 Vue 裏的數據劫持在不一樣版本里是如何處理的？

建設中...

Vue 能作哪些性能優化？

解題思路

  • keep-alive
  • 路由懶加載
  • Preload / Prefetch
  • key
  • 響應式依賴扁平化
  • 減小非必要的響應式依賴
  • Object.freeze
  • DOM 滾動加載
  • v-if / v-show
  • computed / watch
  • 事件銷燬（防止內存泄漏）
  • 組件按需引入
  • 預渲染
  • 按需 Polyfill
  • 模板預編譯
  • 渲染函數
  • 官方風格指南 + 官方 ESLint 插件
  • ...

可能追加的面試題

  • 路由懶加載是如何實現的？
  • Coding Split 和哪些 Webpack 配置相關？
  • Polyfill 是什麼？Vue 支持哪些相關的可配置化信息？
  • Vue 中可使用 JSX 嗎？（竟然有人不清楚 JSX 是什麼）

組件篇

React 中受控組件和非受控組件的區別？

面試題來源

簡歷寫着抽取公共業務組件

解題思路

  • 數據由 React 組件 / DOM 節點管理

可能追加的面試題

  • 在哪些場景應該使用非受控組件？

參考連接

React 中如何實現一個 Input 組件開發？

建設中...

公司的組件庫搭建、設計與維護？

面試題來源

簡歷寫着設計和維護公司的組件庫

解題思路

  • 完整引入 / 按需引入
  • 構建流程設計
  • 單元測試
  • 輸出模式（umd / commonjs2 / es6）
  • 樣式構建
  • 國際化 / 工具
  • ESLint / Prettier / Stylint
  • TypeScript（聲明） / JavaScript
  • Webpack 配置 / Webpack 分析
  • Babel 處理
  • Polyfill 注意點
  • Markdown 演示 & CI
  • 三方庫處理方式
  • 瀏覽器兼容性
  • Autoprefixer
  • Lerna / Single Npm / Multiple Npm
  • Single Npm & Template
  • Git 鉤子處理 & Git 規範
  • 語義化版本規範
  • 團隊 / 範圍 / 開發規範 / 代碼 Review

可能追加的面試題

  • Webpack 構建速度 / 性能優化？
  • Webpack 分析工具？
  • 組件庫的框架設計？
  • 構建 Bundle 優化？
  • 按需加載功能能夠有哪些實現方案？
  • 主要負責了哪些組件的設計？
  • 主動性的業務組件封裝案例？
  • 看過 xxx 組件庫的源碼設計嗎？
  • 設計組件的時候會考慮對 TypeScript 進行支持嗎？
  • 業務組件的單元測試通常須要測試什麼內容？

參考連接

瞭解 Element UI 組件的框架設計嗎？

面試題來源

簡歷寫着使用 Element UI 進行業務開發並本身設計過組件

參考連接

組件庫要作按需加載，以爲應該怎麼作？

面試題來源

簡歷寫着使用使用按需加載提高頁面性能

解題思路

  • Single Npm
  • Lerna
  • Multi Entry Syntax

如何自動屏蔽 Input 的自動密碼填充？

設計模式篇

設計模式中觀察者模式和發佈 / 訂閱模式有哪些區別？

面試題來源

簡歷中寫着熟悉設計模式、Redis、Vue 源碼等

可能追加的面試題

  • 日常在哪些地方有使用到觀察者或發佈 / 訂閱模式？

參考連接

瞭解 MVC / MVP / MVVM 的區別嗎？

參考連接

工程化篇

Webpack 構建速度優化有哪些方案？

面試題來源

項目中寫着使用 Webpack 進行構建速率優化

解題思路

  • speed-measure-webpack-plugin
  • 排除三方庫，防止二次打包
  • thread-loader
  • cache-loader
  • HappyPack
  • parallel-webpack
  • ...

可能追加的面試題

  • 未優化前構建須要多少時間，優化後構建須要多少時間？
  • 有沒有分析是什麼問題致使構建速率變慢？

說說你對 cz 生態的瞭解？

面試題來源

項目中寫着使用 cz 規範 Git 提交

參考連接

簡單說說 Webpack 對於性能優化有哪些特性？

建設中...

性能優化篇

瞭解 SPA 的懶加載麼？

建設中...

Vue 如何配合 Echarts / OpenLayers 實現性能優化？

建設中...

服務篇

有作過基於 Express 的應用框架技術選型麼？

建設中...

先後端分離的歷史？分離模式帶來的好處和壞處有哪些？

建設中...

Node 裏的事件循環機制和瀏覽器的事件循環機制有什麼區別？

建設中...

說說怎麼用純粹的 Node.js 作一個服務端框架？談談 Node.js 服務端 MVC 的理解？

建設中...

熟悉 Node，談談服務端 MVC 的演變歷史？

建設中...

跨域的解決方案有哪些？cors 是怎麼處理跨域？

建設中...

框架篇

什麼是 H5 ?

建設中...

AMD 、CMD 和 CommonJS 區別？

建設中...

可能追加的面試題

  • common.js 和 ES 6 中模塊引入的區別？

如何設計突發大規模併發架構？

建設中...

通常公司是怎麼部署前端代碼？

建設中...

HTTP 篇

GET 和 POST 的區別？

可能追加的面試題

  • GET 和 POST 在安全性上有什麼區別？
  • GET 在哪些狀況下會有安全性問題？

隨便聊聊 Ajax，聊聊 axios？

建設中...

axios 庫有什麼能力？axios 庫發請求的以前能作攔截麼？

建設中...

可能追加的面試題

  • axios 庫發請求的以前能作攔截麼？
  • axios 庫發請求的時候能取消請求麼？

硬件層和前端是如何作通信的？

可能追加的面試題

  • WebSocket 的瀏覽器兼容性如何處理？

談談你對緩存的理解，舉一個和你最相關的緩存的使用案例。

建設中...

服務端推送主要用到什麼技術？

建設中...

HTTP 2 相對於 HTTP 1 有什麼區別？

建設中...

WebSokect 本質上是基於什麼協議進行通訊的（TCP / UDP）？

可能追加的面試題

  • 在不兼容 WebSockect 的狀況下如何作降級兼容處理？

簡單介紹一下 Graphql，說說爲何要在你的項目中使用 Graphql？

建設中...

瞭解跨域麼，通常什麼狀況下會致使跨域？

建設中...

cookie 和 session 的區別？

建設中...

測試篇

日常開發的過程當中有寫過單元測試或者 e2e 測試麼？

建設中...

自動化測試主要是作什麼？

建設中...

優化篇

SEO 有哪些優化方案？

建設中...

可能追加的面試題

  • 預渲染的原理是什麼？

說說任何前端優化處理？

建設中...

業務篇

規範代碼書寫的適用範圍有多大？

版權信息小工具是幹什麼的，能具體介紹一下麼？

介紹一下 dtd 組件，組件是如何維護的，版本是怎麼控制的？

在業務的開發中有沒有發現什麼痛點並對其進行改進？

有沒有以爲交互設計不合理而後本身想出方案推進交互更改的案例？

前端廣告投放如何？Chrome 如何劫持廣告？

簡化業務設計的複雜度案例有麼？

有沒有作過什麼工具簡化業務開發？

Moxtra 是你主推的麼？講講RxJS?

有沒有主動 own 過業務，並高效排除業務風險的案例？

說說如何衡量提高產品的體驗？

舒適提示：有些業務問題主要針對的是簡歷中的項目，在這裏不適合展現。不過有一點須要注意，面試官可能會對業務的數據很是感興趣，因此在業務上有比較 NB 的數據能夠體現的最好能夠提早準備好。業務這一塊可能會考量的點：業務數據 / 業務難點 / 業務成果 / 業務貢獻 / 業務主動性 / 業務 own 能力 / 技術棧選型考量 / 業務影響範圍 / 業務通用性 / 業務思考 ......

名詞解析篇

什麼是漸進加強和優雅降級？

建設中...

筆試篇

0 1 1 2 3 5 8，假設第 0 個是 0，第 1 個是 1，求第 n 個數的實現方式？

簡單實現一個發佈訂閱機制？

簡單實現帶當即執行參數的消抖函數：function debounceImmediate (fn: Function, wait: number, immediate: boolean)）？

實現一個撲克牌式的插入排序（咱們老是喜歡將某張撲克牌插入到已排序的撲克中），輸入：[5,6,1,8,7,2,4,3]，輸出：[1,2,3,4,5,6,7]，並提供單元測試思路（如何測試你的代碼是穩定正確的）？

實現一個簡易的模板引擎

let template = '嗨，{{name}}您好，今天是星期 {day}';
let data = {
  name: '張三',
  day: '三'
}
render(template, data); // 嗨，張三您好，今天是星期三
複製代碼

混沌篇

你以爲你最擅長什麼？

假設某個組織下面掛了 10 w 個節點，如何作優化處理？

用 Vue 的時候有沒有遇到過難以解決的問題？

說說你業務中以爲性能優化最大的一個場景？

說說你業務中至今沒有解決的問題？

說說你業務中遇到最難解決的問題？

八卦篇

高效的自學能力，能舉個例子體現一下高效麼？

除了業務上的開發，日常會有什麼學習計劃麼？

日常有什麼興趣愛好？

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程