深信服2019屆秋招

心疼自己中秋節當天還去面試，順便也心疼一下面試官。 說說我的第一次正式面試，簡直是體驗不要太好。深信服的一二面簡直不要太舒服，我聽別人面試都是說好緊張，搞得自己也有點小緊張；進去後才發現，根本不存在緊張的說法，好嗎？一面的面試官是15屆畢業生（我問他的），根本就沒想象中那種冷麵、居高臨下的感覺，我答不上來的題，他都會跟我解釋，然後接著提問題。整個過程給我的感覺就是一次技術交流，最後給我的感覺就是自己跟工作了三年的師兄？前輩？之間的差距，他確實考慮到我之前很多沒想過的點，說的每個點，我第一反應：什麼還能這樣玩？真的是學到了。

一面

1. Q：nodejs的建立檔案操作

   A：fs.writeFileAsync()

   ：寫檔案操作；fs.readFileAsync()：讀檔案操作

2. Q：Linux下檢視檔案的命令

   cat、more....
   

   （我這裡答的是vi，然後他就順勢問了我，那儲存操作呢。:wq、:w）

3. Q：webpack配置路徑別名

   A：這個，我是真的不會。。。我只是秒過一眼，是現在想不起來怎麼配置的了。

   module.exports = {
     entry: '',
     output: '',
     resolve: {
       extensions: ['.js', '.vue', '.json'],
       alias: {
         'vue$': 'vue/dist/vue.esm.js'
    
   ,
         '@': resolve('src') // 重點在一句
       }
     },
     module: {}
   }
   

4. Q：Vue中父子元件的傳值？

   • 在父元件中註冊子元件，在子元件上面直接v-bind:data；
   • 子元件中，設定props接收父元件的資料。
   • 注：Vue中的父子元件的傳值是單向的
   • 子元件中，利用$emit向父元件廣播一個訊息
   • 父元件在子元件上用@繫結監聽子元件的事件

   Q：這種傳值過程是單向還是雙向？如果我想直接在子元件修改父元件中傳過來的資料同時修改父元件（不用$emit，怎麼做）？

   • A：用Vuex
   • Q：不用這個呢。
   • A：這…我涉獵的比較少。不知道
   • Q：直接在前面加一個.sync
     修飾符

   Q：在前面的基礎上，我在子元件中修改了物件資料，那麼父元件中的資料會不會隨之改變？為什麼？

   • A：會，因為它這裡是對父元件的資料的一個引用

   Q：那怎麼去解決這個問題？

   • A（你要解決，那你前面不要把資料變成雙向的啊…）：用深拷貝，將整物件拷貝。
   • Q：怎麼深拷貝
   • A：用Object.create()
   • Q：你都是用這個去拷貝物件嗎？
   • A：是的，還有一種就是遞迴物件，再將每個屬性賦值給一個新的物件（此處應有手撕程式碼？？？）

5. Q：元件A由元件B、C組成，且A掛在路由上，那麼B、C有路由鉤子嗎？路由鉤子有哪些？

   • A：B、C沒有。（後面這個我答不上來，我跟他說了有三個，但是我忘了函式名）
   • 元件內路由鉤子：beforeRouterEnter、beforeRouteUpdate和beforeRouteLeave
   • 全域性鉤子：beforeEach、afterEach

6. Q：平時會用setTimeout嗎？現在有一個場景：你在元件A中設定了一個定時器5s後執行，突然你跳轉到元件B，那麼請問這個定時器還會執行嗎？那這個定時器中的函式訪問了元件A中的某些變數，會報錯嗎？怎麼去解決這個bug？

   • A：會執行。也會報錯。怎麼解決嗎？清除微任務裡面所有的setTimeout(這裡我說錯了，其實setTimeout是在巨集任務裡的)
   • Q：具體怎麼清除？
   • A：我說在destroyed中去呼叫clearTimeout
   • Q：你確定嗎？這樣子其實是不行的，你回去自己實驗一下。

7. Q：Vue放在computed中所有方法都可以放到methods中嗎？反過來可以嗎？為什麼？

   • A：可以的。
   • A：不可以
   • A：…真不知道（期間，胡扯海說了一堆，都沒扯對）
   • Q：其實你想一下，computed中的函式是不能傳參的，它只有新值和舊值這兩個引數；而methods是可以的。另外前者的效能比後者要好一點。
   • A：我…學到了。

8. Q：你跟我說說Vue的生命週期吧。

   • beforecreated：Vue例項正在被建立，$el 和 data 並未初始化
   • created:完成了 data 資料的初始化，$el沒有
   • beforeMount：完成了 $el 和 data 初始化，掛載之前為虛擬的 DOM
   • mounted ：完成掛載
   • beforeUpdate：在 data 變化時，觸發該函式
   • updated： 在 data 變化時，觸發該函式
   • beforeDestroy： 在元件銷燬前，觸發該函式
   • destroyed：在元件銷燬後觸發，此時 Vue 例項解除對事件的監聽和資料的繫結，但 DOM 結構還是存在。

9. Q：瞭解網路程式設計嗎？GET和POST在一次完整的請求中分別與伺服器互動了幾次？

   • A：POST比GET要多一次互動，GET是一次，POST是兩次。
   • Q：你說對了。POST發的兩次是哪兩次？
   • A：再次懵逼…（還有這種操作？）
   • Q：POST第一次發的是PUT，第二次再發起POST。

10. Q：說說TCP的三次握手吧。

    • A：…（網上一大堆，我這裡就不貼文字了。）

11. Q：你還有什麼問題要問我的嗎？

    • A：你是什麼時候畢業的？
    • Q：（一臉驚愕）為什麼會有這個問題？
    • A：我覺得你應該比我大不了多少，和你聊天很輕鬆…
    • A：可以請你評價一下我本次的面試嗎？
    • Q：整體來說，你的基礎挺紮實的…
    • A：可以不用這麼客套，可以扎心一點的。
    • Q：你基礎算不錯，但技術的廣度差一點，像webpack的配置其實是挺簡單的，你可以去二面…
    • A：（欣喜若狂）

二面

1. Q：談談Koa的中介軟體？說說Koa中介軟體的模型。

   • A：第一個問題，卒。

2. Q：你能手寫一個防抖節流函式嗎？

   function throttle(fn, timer){
     clearTimeout(fn.timer);
     fn.timer = setTimeout(fn, timer);
   }
   

3. Q：如果我要在一個頁面載入一萬/百萬條資料，那麼頁面在滑動的過程會發生卡頓，你說說怎麼優化它？

4. Q：一個頁面內都是圖片（一百張以上），你會怎麼去優化它？

5. Q：看過jQuery原始碼，是嗎？用虛擬碼說說$()這一個選擇器的功能。

6. Q：瞭解call和apply嗎？它們有啥區別？如果我跟你說這兩個中有一個性能要比另一個好，你覺得是哪個？為什麼？

   • A：兩個都是用來修改this指標。兩個的傳參不一樣。前者是一個一個傳，後者傳一個數組。
   • A：apply
   • A：因為它不用一個一個傳引數，直接一個數組就行了（瞎掰）

   面試後找的答案，其實 call 的效能是要比 apply 好一點的。

   因為 apply 最後還是轉化成 call 來執行的。

   知乎上有人做過測試，用 call 和 apply 分別去執行一萬次 add 函式，得到的結果是 11ms 和 25ms。

7. Q：談談JS的垃圾回收機制吧？什麼時候會觸發瀏覽器的垃圾回收？

   • 標記清除

     JavaScript 中最常用的垃圾收集方式是 標記清除（mark-and-sweep）。當變數進入環境（例如，在函式中宣告一個變數）時，就將這個變數標記為“進入環境”。從邏輯上講，永遠不能釋放進入環境的變數所佔用的記憶體，因為只要執行流進入相應的環境，就可能會用到它們。而當變數離開環境時，則將其標記為“離開環境”。

   • 引用計數

     引用計數的含義是跟蹤記錄每個值被引用的次數。當聲明瞭一個變數並將一個引用型別值賦給該變數時，則這個值的引用次數就是1。如果同一個值又被賦給另一個變數，則該值的引用次數加1。相反，如果包含對這個值引用的變數又取得了另外一個值，則這個值的引用次數減1。當這個值的引用次數變成0時，則說明沒有辦法再訪問這個值了，因而就可以將其佔用的記憶體空間回收回來。這樣，當垃圾收集器下次再執行時，它就會釋放那些引用次數為零的值所佔用的記憶體。

   • 分代回收

     目的是通過區分「臨時」與「持久」物件；多回收「臨時物件區」（young generation），少回收「持久物件區」（tenured generation），減少每次需遍歷的物件，從而減少每次GC的耗時。**Chrome 瀏覽器所使用的 V8 引擎就是採用的分代回收策略。**如圖：

   • 增量回收

     這個方案的思想很簡單，就是「每次處理一點，下次再處理一點，如此類推」。這種方案，雖然耗時短，但中斷較多，帶來了上下文切換頻繁的問題。Firefox 瀏覽器所使用的 JavaScript 引擎就是採用的增量回收策略。

   • 什麼時候觸發垃圾回收

     • 通常在引擎申請記憶體配置時，已分配記憶體不足的情況下會觸發 GC 操作。

8. Q：從地址輸入url，回車。這個過程都發生了啥？

9. Q：前端可以訪問到所有的cookie嗎？

   A：可以。（正確答案是不可以。。。）

   答案：禁止javascript操作cookie（為避免跨域指令碼(xss)攻擊，通過javascript的document.cookie無法訪問帶有**HttpOnly**標記的cookie）

10. Q：會打斷點嗎？會看堆疊嗎？在哪裡看？

11. Q：學的是Vue，是吧？知道虛擬DOM吧，說一下它的基本原理吧。根據你剛才說的，你再說說jQuery手動去操作DOM和虛擬DOM的效能，哪個好？虛擬DOM的效能一定比jQuery操作DOM的效能好嗎？

12. Q：瞭解diff演算法嗎？

13. Q：Vue中的雙向資料繫結原理是defineProperty，你還知道哪些方式能實現雙向資料繫結嗎？

14. Q：你等一下哈。（走過去和一面的面試官討論，回來）根據你的情況，我覺得你作為一個研究生…

    A：哈？我是本科的…

    Q：你等一下，（又過去和一面面試官討論，回來）。如果你是研究生的話，你說你記不起之前做node的專案了，我是覺得不應該的，因為我對研究生會有更高一點的要求。但，你是本科，我覺得還是可以的。你出去登記一下待會直接HR面吧。

    A：（心情跟坐過山車一樣，賊刺激）我可以問你一些問題嗎？

    Q：emmm？

    A：你覺得我面得怎麼樣？

    Q：基礎不錯，其他的也挺好的。

    A：那你覺得我這樣去HR面會有多大概率拿到offer?

    Q：hr面的話，更多是看你這個人的性格，人品，品質什麼的。你的技術，經過我們兩輪的技術面，我們是肯定了你的技術的，所以你不用擔心hr還會問你技術的問題。

    A：謝謝。

HR面

…