寒冬中的前端社招面試

前言

本人17年畢業至今，一年多工作經驗，三月中旬加入了找工作的大潮。這裡整理了一下最近面試的題目，分享給大家。

再惠

一面

1. 自我介紹一下
2. 看到你用過mobx，說一下mobx的優勢？實現原理呢？
3. 你工作以來，在專案中遇到的印象深刻的問題有哪些？有沒有在專案實踐過一些自己的想法和新技術？
4. 說說TS和ES的區別，以及TS帶來的好處？
5. 你說你學習能力強，那你畢業這一年多來，你都是怎麼熟悉業務和專案的？有系統的看完過哪本書？
6. 對小程式有了解嗎？（我只寫過demo）
7. 對打包工具有了解嗎？
8. 除了react，你還用過哪些框架？
9. 求契波那切數列的第N項
10. 獲取到契波那切數列的前N項
11. 求一個物件的層級數（我寫完後，又問如果不用遞迴，只用迴圈實現呢）
12. 實現下面這道題中的machine函式

function machine() {
    
}
machine('ygy').execute() 
// start ygy
machine('ygy').do('eat').execute(); 
// start ygy
// ygy eat
machine('ygy').wait(5).do('eat').execute();
// start ygy
// wait 5s（這裡等待了5s）
// ygy eat
machine('ygy').waitFirst(5).do('eat').execute();
// wait 5s
// start ygy
// ygy eat
複製程式碼

二面

1. 介紹一下你們那邊的業務？那你們業務都是在app裡面嗎？（安卓、IOS、H5甚至小程式和快應用都有，基本上都是webview套h5做的）
2. 你最近有比較感興趣的、主要研究的技術嗎？為什麼感興趣？
3. 我看了你的github，上面star了一個react.backbone，這個是什麼？
4. 我看你的github裡面有個mobx-jquery，這個是做什麼的？
5. 這個mobx-jquery裡面的observer你是怎麼實現的？（封裝的autorun）那麼autorun的原理是什麼？
6. 你對團隊的要求是怎麼樣的？你畢業這一年多收穫最大的是什麼？
7. 看到你寫了TS，那麼TS的優勢是什麼呢？你說修改欄位後其他還用原欄位的地方會報錯，那麼是怎麼跟蹤到是否修改的呢？vscode裡面是怎麼實現根據型別檔案來給一個方法新增型別的呢？
8. 看到你的簡歷裡面寫著維護一個老專案，這個lizard是什麼框架？（基於backbone封裝的一個Hybrid框架xxxxx）
9. 那來做道題吧。實現一個函式，可以按順序獲取到一個DOM節點下面所有的文字。
10. 你有什麼想問我的嗎？（你平時在公司的一天都是在做什麼呢？）

總結

感覺技術棧和這家可能不是很匹配，他們主要做h5和小程式，h5也以vue居多，所以這些問題基本上都沒怎麼深入。

面試除了mobx，也沒問過我react相關的技術，也沒問過app開發方面的東西，他們唯一感興趣的就是TS，可惜我TS寫的不多。

但是面試體驗還不錯，我屬於比較緊張的人。面試官讓現場寫程式碼，可以查資料，可以現場除錯，甚至有不懂的還可以問一下他，我覺得這個挺好的。聽他們描述，感覺團隊技術氛圍不錯，和HR聊了一下，覺得福利還算不錯。

附上一面第12題的答案。

function machine(name) {
    return new Action(name)
}
const defer = (time, callback) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(callback())
        }, time * 1000)
    })
}
class QueueItem {
    constructor(defer, callback) {
        this.defer = defer;
        this.callback = callback;
    }
}
class Action {
    queue = []
    constructor(name) {
        this.name = name;
        this.queue.push(new QueueItem(0, () => console.log(`start ${this.name}`)))
    }
    do(eat) {
        this.queue.push(new QueueItem(0, () => console.log(`${this.name} ${eat}`)))
        return this;
    }
    wait(time) {
        this.queue.push(new QueueItem(time, () => console.log(`wait ${time}s`)))
        return this;
    }
    waitFirst(time) {
        this.queue.unshift(new QueueItem(time, () => console.log(`wait ${time}s`)))
        return this;
    }
    async execute() {
        while(this.queue.length > 0) {
            const curItem = this.queue.shift();
            if (!curItem.defer) {
                curItem.callback();
                continue;
            }
            await defer(curItem.defer, curItem.callback)
        }
    }
}
複製程式碼

富途

一面（記不清了）

1. 自我介紹
2. 為什麼離職？你說你覺得做的業務無聊，那怎麼樣才是不無聊的呢？你期望的團隊是怎樣的？
3. 什麼是xss攻擊？有什麼危害？怎麼解決？
4. 實現一個深拷貝
5. 有兩個有序陣列M和N，怎麼判斷N是否為M的子集？
6. 箭頭函式和普通函式有什麼區別？
7. for迴圈裡面setTimeout列印的值是多少？怎麼解決這個問題呢？（let和閉包解決，解釋一下原理就好了）
8. 你們團隊中的每個成員都是什麼角色？你在裡面扮演什麼角色？
9. 怎麼優化頁面的載入速度？如果有很多個小圖示，怎麼優化？iconfont有什麼缺點？
10. 移動端相容不同裝置有哪些解決方案？這些方案都有哪些缺點？

達達-京東到家

面試過去的時候，先讓做了一張試卷，主要是考察http、css和js的。

筆試題（只記得這幾道http相關的）

1. http2.0的新特性有哪些？（選項是多路複用、頭部壓縮、設定優先順序、服務端推送、二進位制傳輸）
2. DNS的作用有哪些？（選項是域名解析、防火牆、負載均衡、控制流量還有一個我不記得了）
3. 以下哪些協議是可靠的？（選項是TCP、UDP、FTP、HTTP還有一個我不記得了）
4. 以下關於POST請求說法正確的是？（POST請求只能通過body帶引數、伺服器一定能夠收到POST請求傳送的資料、POST請求傳送了兩個資料包、POST請求可以被快取）

一面

1. 什麼是BFC？垂直margin重疊是為什麼？怎麼解決這個問題？
2. CSS裡面有哪些相對單位？都是相對什麼的？
3. fixed是相對於誰定位的？如果加上transform會出現問題嗎？
4. 什麼是XSS攻擊？怎麼解決？
5. innerHTML有什麼問題？有什麼簡單的辦法可以避免插入文字被XSS攻擊嗎？
6. 為什麼不推薦用style內聯元素？內聯元素有什麼缺點？（css檔案可以快取）
7. 什麼是原型鏈？原型鏈的終點指向什麼？
8. cookie、sessionStorage、localStorage的區別和作用是？
9. http狀態碼有哪些？301和302的區別是什麼？304是指什麼？
10. 什麼是閉包？使用場景有哪些？閉包會引起什麼問題？
11. 什麼是淺拷貝和深拷貝？怎麼實現一個深拷貝？
12. lodash和ramda的區別是什麼？
13. HTML中attribute和property的區別是什麼？
14. 怎麼解決跨域？
15. 字串和new String出來的字串有啥區別？

二面

1. 解釋一下react中setState？（說說setState的表現和原理實現）
2. 如果我需要上傳一個檔案，前端展示進度條，用setState會導致合併更新，你有什麼好辦法？（Promise封裝setState、利用setState底層特性，使用非同步函式（setTimeout、async）包裹）
3. 有狀態元件和無狀態元件，有人說有狀態的更好複用，有人說無狀態的更好複用，你平時寫的時候是怎麼分的？（這個還是要看業務場景）
4. 如果有個react專案，你該管理元件狀態？（從local state、global state和global store三個方向來解釋）
5. react中元件是怎麼響應資料的變化從而更新的呢？
6. react中的生命週期分為哪幾個階段？react16廢棄了哪幾個生命週期api？
7. 虛擬DOM相比真實DOM，為什麼會帶來效能上的優化？
8. diff演算法是怎麼比較新舊節點並更新的？key有什麼作用？
9. 如果我這裡有一個文字元件，我修改了裡面的文字，那麼會影響到其他的元件嗎？（所以這個還是要看場景）
10. 如果store中有一個cityList欄位，我們需要在使用者重新整理後保持原來的樣子，做快取，如果這個時候上方下達了一個命令，需要關閉某個城市的物流配送，這個時候需要將該城市移除，使用者不重新整理瀏覽器的情況下，如何做到？（這道題說實話我沒理解，我說更新store和快取，但被面試官否定了，後來只能說不知道，也忘了問他答案是什麼了）
11. 對webpack有了解嗎？chunk、bundle和module有什麼區別？
12. 說說hash、chunkhash和contenthash的區別？
13. TypeScript有哪些好處？
14. 瀏覽器頁面渲染的流程是什麼？
15. css會阻塞頁面渲染嗎？會的話該怎麼解決呢？怎麼做到只載入首頁的css？
16. 你覺得你最擅長的技術是哪一塊呢？

綜合面（綜合+HR+部門leader）

1. 從你的專案中隨便找一個，說一說這個專案解決了哪方面的問題，業務或者技術上的都行。
2. 這個專案中你的角色是什麼？你做了哪些？哪裡又能夠體現你的能力呢？
3. 為什麼只在攜程呆了一年多就出來找工作了？你現在的職級是多少？
4. 你最近有看過什麼書？最近在研究的技術是什麼？
5. 用過vue嗎？感覺和react的區別是什麼？如果讓你做vue專案，你能接受嗎？
6. 這邊是一個vue重構到react的專案，最近招人來做這塊的內容，包括webpack之類的都是重新搭，你覺得你能hold住嗎？
7. 打算在上海定居嗎？是打算啥時候回二線？
8. 你未來3-5年的職業規劃是什麼？
9. 其他私密問題等等

總結

二面的時候，面試官問我有什麼想問的嗎？我說，對於我這種剛畢業1-2年的人來說，我對webpack和node接觸比較少，在公司也很難接觸到，自己寫專案又遇不到很多深入的場景，接下來我該往哪方面發展呢？什麼才是更重要的呢？

面試官說，你之前說自己為什麼離職的時候已經說的很清楚了，我相信你已經找到答案了。我覺得對於畢業1-3年的人來說，如果能夠做到獨立去帶一個專案和團隊，這是非常可貴的。

部門leader面的時候，問了我很多專案方面的問題，不少正中我要害，剛畢業一年多來確實沒有想過那麼多東西。在技術不夠突出，工作經驗也比較少的情況下，似乎也很難說哪裡能夠體現出自己的能力。如果能多呆半年，肯定會有不一樣的回答。

HR面的時候，這個HR對前東家的薪資待遇、職稱等等可以說非常瞭解了，問了很多深入和細節的問題，也和我聊了很多，導致我非常尷尬和緊張（我一向不會撒謊，很多都是照實說了）。

這是自己遇到時間最久一次面試，算上HR面前後有五輪。不過，還算是愉快，至少讓我積累了一大筆很寶貴的面試經驗。

PS：歡迎大家關注我的公眾號【前端小館】，大家一起來討論技術。