【金三銀四】一年半經驗，小羽同窗的CVTE突襲面經

若是生活存在奇蹟，那必定是努力的軌跡！前端

Hello，你們好，我是小羽同窗，一個平凡而又不甘於平凡的前端開發工程師。vue

emmm，今天呢，主要就想和你們聊聊小羽同窗的 CVTE突襲面經 吧~node

爲啥說是 突襲面經 捏？react

嗯，就是突如其來，毫無還手之力的面試邀請。jquery

收到面試邀請時，我TM纔剛開始複習兩天！！！webpack

原本是準備3月底/4月初讓呆呆幫忙內推的。。。nginx

後面讓呆呆大佬幫我查了下記錄，年前就進入人才庫了！沒啥印象了呀，大人我冤枉啊！git

還好呆呆說我掛了的話，還能夠把我撈起來（繼續鞭屍），而後我就豁出去了，衝啊＿φ( °-°)/github

先簡單的說一下我的的基本狀況吧web

【基本信息】

19年6月畢業，計算機科學與技術，渣本
工做經驗一年半，實際工做年限2年（由於大廠的工做經驗是從畢業時間算起的）
技術棧：vue全家桶系列、nodejs、nginx、CI/CD、docker
目標：廣州一線大廠的前端開發崗位

【優點】

科班出身
搭建了公司項目的前端框架
參與並解決過公司項目的前端性能調優問題
擔任過面試官，對面試的題目有一個總體性的瞭解
開源項目《小羽直播平臺》
開源項目 SULG UI組件庫

【劣勢】

技術棧是vue（目標是大廠，而大廠通常都是react）
一年半經驗，兩次跳槽（如今是第二次，緣由都是想進一線大廠，惋惜第一次連大廠的面試機會都沒能撈到）
github的星星量較少（小夥伴們能夠幫下忙嗎？）

小羽有過前端面試官的經歷，也面試過很多的人選了，因此也說一下做爲面試官，對人選的感受吧。小羽把人選總結了一下，大概能夠分爲如下三類

【不夠自信】

這類小夥伴給人的感受就是有必定的技術，但面試的時候比較緊張，致使說話結巴或者對技術的描述斷斷續續的，而後給面試官的感受就是人選不夠自信，對技術的掌握程度不高，而後會拉低面試的評價。因此建議感受建議這類小夥伴能夠在複習時，模擬面試的場景用本身的語言組織答案。若是時由於緊張的緣由致使的，能夠先去一些非目標公司練下手，熱下身，主要仍是要克服本身的心理。

ps：小羽在面CVTE前也想去熱身的，但是條件不容許了，啊啊啊啊啊啊啊啊 (╯°Д°)╯︵┻━┻

【過於自信】

這類小夥伴怎麼說呢，可能就是對本身的認知不夠深入。以爲面試官問的全部問題本身必須能答得上來（固然能所有都答上就再好不過了）。emmm，怎麼說好捏。其實面試的時候不是必需要所有都答上，有個一兩道不懂是挺正常的。碰到本身沒複習或者感受了解不夠深的地方，能夠直接說沒怎麼了解過，面試官不會由於這麼兩道題就給你直接掛掉。若是你以爲本身能答上，可是瞭解的不夠深，就會被面試官刨根問底的開虐了。

ps：小羽在CVTE技術二面的時候，不當心就陷入這個局面，反正多多少少算是個減分項吧 o(╥﹏╥)o

【自信、陽光】

這類小夥伴是最有機會經過面試滴。他們一般會作比較多的準備，面試的時候給小羽的第一感受就是陽光自信。給人的感受就特別的棒，有想讓他們加入本身的團隊的想法。這類小夥伴基礎通常都比較紮實，而後會在簡歷、自我介紹、項目描述等多個維度，會有意無心的把面試官往本身最擅長的領域去引，而後就感受像是在作一場技術交流而不是面試，因此這類小夥伴經過的概率是最大滴。

通常來講，一輪技術面的時間是30-60min，當超過60min後，面試官就算還有想問的東西，他也會盡快的把這場面試結束掉，因此小夥伴們，在本身熟悉的領域能多說就儘可能多說點哦~。而後面試官也是沒有挖掘你的特色的義務的，就像剛剛介紹那類陽光自信的小夥子，他們就會從各類維度把面試官引入本身熟悉的領域，而後展現本身的優勢，儘可能多說點。面試其實就是在展現本身的優勢，若是在本身熟悉的領域都不能折服面試官了，其餘層面就更不用說了。

嗯，基本信息和麪試官的一些感想聊完了，就開始聊聊小羽同窗這段夢幻般的複習和麪試經歷吧

在收到CVTE的突襲邀請後，複習了兩天就開始面試了。複習的這段時間，基本天天早上6點就強忍着倦意起來了刷api手寫系列和leetcode（原來都是9點起牀洗刷，而後晃悠晃悠的走去公司的）。天天下班後，都是快速解決晚飯，而後就瘋狂惡補梁哥的【求職系列】。在這裏先感謝一下樑哥的總結，沒這份總結，小羽不管再怎麼抱佛腳，也是沒辦法將那些縱橫錯落的知識點拼湊成一條完整的知識鏈。

給你們介紹一下個人外掛，額，最強應援團！！！

CVTE 技術一面（電話面 50min）

面試官是一個小哥哥，沒有自我介紹，直接開始面試了，這是想說：要不快點開始吧？我已經火燒眉毛的想吊打你了，自我介紹那種東西就不須要了。【囧】

1.var let const 區別變量提高堆內存棧內存（大概問到了這些知識點）

var 有變量提高，而let 和 const 是塊級做用域

var和let均可以先聲明不賦值，const必需要賦值，不然會報錯

js中有基本數據類型和引用數據類型

基本數據類型存儲於棧內存（存值），引用數據類型存在堆內存中（存地址）

而const定義的是一個常量，若是定義的是一個基本數據類型是不能改變的。若是定義的是一個引用數據類型，那麼引用數據類型中的數據是能夠改發生改變的，由於堆存的是地址，即地址沒法改變。

2.cookie localStorage sessionStorage 區別以及使用場景

【相同點】

都屬於本地緩存

【不一樣點】

大小：cookie 4k左右，localStroage、sessionStorage通常是5M（IE是3M左右）

通訊：cookie每次都會攜帶在請求頭中，localStroage、sessionStorage不會參與和服務器的通訊

失效時間：cookie通常是瀏覽器關閉就失效了（能夠設置expire來改變失效時間），localStorage不刪除都會有效，sessionStorage則是在tab標籤關閉後就失效了

【使用場景】token，而後就引出了下面的單點登陸和token

3.單點登陸和token、系統權限

面試官：大家公司的單點登陸系統是怎麼實現的，token又是什麼？系統權限大家又是怎麼實現的？

我：吧啦吧啦。。。

4.http 2.0、域名發散、域名收斂

使用hpack算法，進行頭部壓縮

支持二進制傳輸，http1.x是字符串傳輸

多路複用（中間面試官拓展的問了一下域名發散和域名收斂相關的問題）

服務器推送

5.flex佈局

emmm，這個忘記問了啥，尷尬。。。

6.性能優化

面試官小哥哥：看你在項目中有作過性能優化，能分享一下嗎？

我：巴拉巴拉。。。

7.虛擬列表

從性能優化中引出來的

主要就是用來優化長列表的（當沒法使用分頁時）

經過計算，僅渲染可視化窗口部分。

感興趣的小夥伴能夠去看下SULG UI，源碼

8.nodejs

面試官小哥哥：有用過nodejs嗎？作過一些什麼呢？

我：我學習nodejs主要是爲了可以更深的瞭解先後端的交互，寫過一些簡單的的後臺和爬蟲

面試官小哥哥：有寫過中間件嗎？

我：沒有

而後就沒問了

9.webpack、loader、plugin

關於webpack系列的，首推ENOW大前端團隊的《當面試官問Webpack的時候他想知道什麼》

10.項目問題

略

電話一面不難，大部分都是基礎+項目問題。像小羽這麼菜的人都過了，小夥伴們準備一下應該都問題不大，加油喲~

第一輪技術面試和第二輪技術面試間拖了一週左右的一個時間，終於可讓我從頭至尾把梁哥的求職系列看了一遍（除了react，還好CVTE能夠接受vue轉react）。其實小羽在技術二面時leetcode刷的並很少，從複習開始一天5-7道，簡單題大概刷了60道左右吧，主要是科班出身，有一丟丟算法基礎。這也算是盡了最大的努力了，畢竟時間實在是太緊了！！！

CVTE hr一面（視頻面 40min）

但我沒想到接下來的是hr面（大概兩天後），我還覺得是技術面，又是一個措手不及！！！

我的的一些基本狀況
跳槽緣由
薪資狀況
指望薪資
我的規劃
家庭狀況
工做中的相關狀況
技術二面的時間

CVTE 技術二面（視頻面 70min）

原本是想約現場面試的，順便和呆呆面基的，哈哈哈

可是後面由於某些狀況，又改回了視頻面

1.自我介紹

略

2.工做內容，怎麼領導新員工

略

3.SULG UI開源組件庫

怎麼和朋友分工的？

怎麼設計組件的？

遇到什麼難點？

4.項目難點，你是怎麼搭建架構的

主要有單頁面應用改多頁面應用和性能調優兩塊吧

而後，開始吧啦吧啦

5.有了解過微前端嘛，爲啥單頁面應用改多頁面時不考慮微前端呢？

有看過阿里的qiankun（路由分發式微前端），本身也有寫過相關的Demo

可是微前端對於團隊的總體能力要求會比多頁面應用高一點，而咱們的項目都是統一的vue，你們都會使用的，不存在vue、react、angular、jquery等多種技術棧混合在一塊兒的，因此暫時沒有改爲微前端的必要。

6.http緩存

強緩存、協商緩存、啓發式緩存

【強緩存】

強緩存是利用 http 頭中的 Expires 和 Cache-Control 兩個字段來控制的。強緩存中，當請求再次發出時，瀏覽器會根據其中的 expires 和 cache-control 判斷目標資源是否「命中」強緩存，若命中則直接從緩存中獲取資源，不會再與服務端發生通訊。

expires 是一個時間戳，二次請求咱們試圖向服務器請求資源，瀏覽器就會先對比本地時間和 expires 的時間戳，若是本地時間小於 expires 設定的過時時間，那麼就直接去緩存中取這個資源。

它最大的問題在於對「本地時間」有很大的依賴。若是服務端和客戶端的時間設置可能不一樣，或者我直接手動去把客戶端的時間改掉，那麼 expires 將沒法達到咱們的預期。因此咱們有第二種方法Cache-Control。

Cache-Control 是一個時間長度，咱們經過 max-age 來控制資源的有效期，它意味着該資源在時間長度之內都是有效的，完美地規避了時間戳帶來的潛在問題。它的優先級更高，當二者同時出現的時候咱們以Cache-Control爲準。

【協商緩存】

協商緩存依賴於服務端與瀏覽器之間的通訊。協商緩存機制下，瀏覽器須要向服務器去詢問緩存的相關信息，進而判斷是從新發起請求、下載完整的響應，仍是從本地獲取緩存的資源。若是服務端提示緩存資源未改動（Not Modified），資源會被重定向到瀏覽器緩存，對應狀態碼是304。

【啓發式緩存】

若是響應中未顯示Expires，Cache-Control：max-age或Cache-Control：s-maxage，而且響應中不包含其餘有關緩存的限制，緩存可使用啓發式方法計算新鮮度壽命。一般會根據響應頭中的2個時間字段 Date 減去 Last-Modified 值的 10% 做爲緩存時間。

7.http1.0/1.1/2.0/3.0

這個直接參考梁哥的【jsliang 求職系列 - 29 - HTTP/HTTPS】就能夠了~

8.宏任務與微任務

給了一道題，說了一下輸出的前後順序。而後又扯了一下even loop

宏任務（macrotask）和微任務（microtask）表示異步任務的兩種分類。

1.一開始整個腳本 script 做爲一個宏任務執行

2.執行過程當中，同步代碼 直接執行，宏任務 進入宏任務隊列，微任務 進入微任務隊列。

3.當前宏任務執行完出隊，檢查微任務列表，有則依次執行，直到所有執行完畢。

4.執行瀏覽器 UI 線程的渲染工做。

5.檢查是否有 Web Worker 任務，有則執行。

6.執行完本輪的宏任務，回到步驟 2，依次循環，直到宏任務和微任務隊列爲空。

9.算法題（暴力遞歸）

給定一系列的任務，這些任務可能有依賴關係，有依賴關係須相繼執行，沒有依賴關係則能夠同時執行。寫一個函數，計算完成給定全部任務須要的時間。
//例以下面這些任務執行總時間爲 4
   const tasks = [
       {
           "name": "task1",
           "time": 1,
           "dependency": "",
       },
       {
           "name": "task2",
           "time": 2,
           "dependency": "",
       },
       {
           "name": "task3",
           "time": 3,
           "dependency": "task1" 
       },
   ];
複製代碼

function getTime(tasks){
          let taskObj = {},max = 0
          for(let item of tasks){
              taskObj[item.name] = item
          }
          for(let item of tasks){
              let currentMax = item.time
              if(item.dependency){
                  currentMax += dep(taskObj[item.dependency],taskObj)
              }
              if(currentMax > max){
                  max = currentMax
              }
          }
          return max
      }

      function dep(task,taskObj){
            if(task.dependency){
                return task.time+dep(taskObj[task.dependency],taskObj)
            }else{
                return task.time
            }
      }
複製代碼

10.鏈式調用

還沒複習到鏈式調用，小羽答得很是糟糕，以致於一度覺得本身掛掉了。

關於鏈式調用，小夥伴們能夠去搜一下lazyMan那個題就行了（CVTE不是lazyMan，但思路是同樣的）

CVTE hr二面（視頻面 40min）

因爲cvte技術二面的鏈式調用答得很是糟糕，快三天沒收到電話，覺得本身掛在了技術二面了，沒想到電話它忽然響起來了！！！

跳槽緣由
對新公司顧慮的地方
前端將來的發展趨勢
目前工做的做息時間
下班後會作些什麼
壓力大的一段時間
公司技術部的狀況
我的能力在公司的排行
大學期間的學習情況
我的將來3-5-10年的事業和生活的規劃
假如說將來工做和事業沒能達到你的指望，你會怎麼辦？
你想進大廠的緣由
若是有其餘更好的公司，你會怎麼抉擇
我的的興趣愛好
對你我的影響比較大的事或者人
還有什麼想問嗎？

emmm，面完hr二面後。大概2-3天就收到了口頭offer，忽然以爲挺對不起呆呆的，由於我把他的內推獎勵給弄丟了。

CVTE 希沃加面（視頻面 60min）

emmm，原本hr二面後已經拿到口頭offer了，由於某些特殊緣由加面了希沃（偷偷甩個鍋給呆呆，是他在微信視頻號裏面點了個贊，而後我「萬惡」的好奇心，一個不當心點了進去。嗯，而後我就被希沃吸粉了）。

1.自我介紹

2.性能調優

如下全是由性能調優開始擴展開來

v-for添加key值，而後扯了下diff算法、以及如何肯定性能是否有提高

v-if和v-show的合理使用

v-once渲染只須要渲染一次的元素

合理的使用生命週期，使用場景

合理的使用computed和watch，使用場景以及兩者之間的區別

過濾api接口的數據，object.freeze()（引出vue的數據劫持原理，爲何要過濾掉沒用的數據）

圖片懶加載，路由懶加載（引出：100個http請求，http1.0/1.1/2.0須要創建多少個連接，爲何？而後又問了http相關的一些問題）

cdn，什麼樣的文件適合放cdn（引出http緩存），若是須要更新cdn怎麼辦

nginx調優

還有什麼想問的?

中間插入一道簡單的算法題（有點緊張，一開始沒注意到空格，大佬給了點提示才寫出來，遞歸）

// 如下是單元測試

const test = () => { const listArray = [

{
     input: [1, 2, [3, 4, 5]],
     output: '[ 1 2 [ 3 4 5 ] ]',
 },
 {
     input: [79, [[88, 98], 99]],
     output: '[ 79 [ [ 88 98 ] 99 ] ]',
 },
複製代碼

]

listArray.map(data => {

const result = stringify(data.input)

 console.log(result === data.output)
複製代碼

}) }

test();

const stringify = (list,res="") => {
    // 這個函數用來把數組扁平化爲字符串, 格式見示例
    // 輸入的數組只包含數組和數字兩種類型複合
    res += "[ "
    for(let item of list){
        if(Array.isArray(item)){
            res+=`${stringify(item)} `
        }else{
            res += `${item} `
        }
    }
    res += "]"
    console.log(res)
    return res
}
複製代碼

希沃加面完後，和呆呆打了個視頻電話，呆呆告訴我這是他老大，而後在電話中也聊了很多其餘的東西。好比說我一個不當心就從呆呆的小本本上溜了出來，反正主要聊得都是我一段快能夠寫成小說的夢幻般經歷吧，哈哈哈。

ps：小夥伴們能夠猜一下呆呆會幹嗎，反正無論大家猜沒猜中我都不會告訴大家滴~【狗頭】

但願個人CVTE突襲面經能給小夥伴們帶來必定幫助和啓發，嘿嘿

若是有夢想就不要輕易放棄，相信本身也是能夠的，歐力給！！！

在最後，再次感謝個人應援團（外掛團）的兩位大佬，呆呆和梁哥。順便求一波關注，愛大家喲~