寒冬中的前端社招面試

前言

本人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：歡迎你們關注個人公衆號【前端小館】，你們一塊兒來討論技術。