雙非二本已拿字節、騰訊、墨墨 offer，送大廠面經一份！

前端時空

前端網紅集結號，傳遞一線全棧技術，帶你穿越前端時空。

前端時空，每日一題。回覆「0」進入交流群，回覆「1」看每日一題，回覆「2」看答案解析

作者 | Youhe（前端時空）

前端時空.大廠面經

前言

三月份過去了，筆者的春招實習面試也告一段落了。在這接近一個月的時間，經歷了面試時的緊張、失敗時的痛苦、拿到offer的興奮。目前面了字節、美團、騰訊、清遠墨墨、阿里。並拿到了字節、騰訊、清遠墨墨的實習offer。這次就先從筆者就從自己的心路歷程結合面試乾貨娓娓道來。（ps:由於筆者沒有面試完就及時寫面經的好習慣，以至於一些細節有些忘記了。我會在想起來的第一時間回來補充）

「初面試-字節跳動（頭條部一面）」

這是筆者人生第一次面試，有些緊張。面試官是一個有點嚴肅的小姐姐，看到她第一眼筆者就覺得是自己心目中程序媛的形象。

• 自我介紹
• css選擇器、優先級
• 標準盒模型和ie盒模型
• js繼承 (原型式、構造函數式、組合式、寄生式)
• js判斷類型 （typeof 、 instanceof、 Object.prototype.toString.call）
• settimeout和setinterval區別 。 宏任務、微任務、異步隊列
• 一道考察promise的題

<code>let j = ()=>{
    return  2
}
new Promise((resolve, reject)=>{
    resolve(1)
}).then(j).then(req=>{
    console.log(req);    //2
})
/<code>

• 說幾個http字段吧，作用是什麼（content-type 、Cache-Control 、Etag）
• 跨域問題 node怎麼配置跨域 (cros)
• http狀態碼以及代表什麼
• cookie、session、token
• node的框架學過嗎 express、koa 區別？ 這裡筆者主要講了洋蔥模型
• 筆試題 1.廣度優先遍歷二叉樹 2.多維數組壓平 3.翻轉矩陣 筆試題都不難，是leetcode的easy原題。

這次面試表現得不是很好，很緊張，寫編程題的時候手都在抖。幸運的是當天晚上就被告知通過了。第二天開始二面。

「字節跳動（頭條部二面）」

二面面試官是一個小哥哥，沒有露臉，全程語音交流。

• 前端優化 這個題比較開放，可以從減少資源請求、資源大小、優化網絡、資源加載、迴流重繪等多方面回答。
• vuex狀態管理存在意義？ 單向數據流、集中管理
• vuex的action怎麼觸發？ dispatch
• 介紹下項目 、難點？這個就不細講了，每個人項目都不一樣，答得讓面試官覺得你在遇到問題時有思考的過程就好。
• 筆試題

<code>1.實現一個add方法
add(1)(2,3)(4).value()   輸出：10
function add(...num) {
    let curr = function (...out) {
        return add.apply(this, num.concat(out))
    }
    curr.value = function () {
        return num.reduce(function (pre, cur) {
            return pre + cur
        })
    }
    return curr
}
2.實現一個異步隊列Queue，要求按時間依次執行callback 

new Queue().task(1000, function () {
    console.log(1);
}).task(2000, function () {
    console.log(2);
}).start()
答案1：
function Queue1() {
    this.queue = []
    this.task = (time, fn) => {
        this.queue.push({fn, time})
        return this
    }
    this.start = () => {
        let deffer = 0
        for (let i of this.queue) {
            deffer += i.time
            setTimeout(i.fn, deffer)
        }
    }
}
答案2：
function Queue2() {
    this.queue = []
    this.task = (time, fn) => {
        this.queue.push(function (resolve) {
            setTimeout(function () {
                resolve(fn())
            }, time)
        })
        return this
    }
    this.start = async () => {
        for (let i of this.queue) {
            await new Promise(i)
        }
    }
}
/<code>

這次面試的筆試題寫的時候全是bug，給面試官留下很不好的印象。不過這次面試結束的時候，面試官給了我一些學習上的建議，並給我一定的鼓勵。晚上的時候HR來點說要進行評估，無奈評估未通過。不過想起二面時面試小哥哥對我的鼓勵，決定再戰。

「清遠墨墨」

筆者最開始接觸清遠墨墨是考四級的時候下載了這個app（雖然從來沒有真的用過）。面試的時候有個hr小姐姐加了我，給我介紹公司，通知我面試。面試的時候是在企業微信上，boss和技術一起面我。

• BOSS ：用過墨墨app嗎 （筆者很慌，撒謊說用過）
• 背了多少單詞 （更慌了，隨口說100個左右）
• 怎麼知道有墨墨這個app的 （同學介紹）
• 你簡歷說你自己心思縝密，但是你簡歷上的句子的標點符號有問題啊。（emmm）
• 項目的UI問題
• 技術 ：JavaScript空數組是true嗎？
• JavaScript是單線程嗎
• js精度問題 0.1+0.2 === 0.3 //false
• 你覺得英語水平會影響編程嗎 （答影響不大）

原諒我只記住了這些，這次面試技術上更偏向於js基礎知識，問了很多口頭判斷題，只需要回答yes or no就可以了。如果有想去向清遠墨墨這樣的小公司實習的，筆者建議多瞭解這個公司的相關信息，因為很可能接觸到BOSS的靈魂拷問。清遠墨墨公司壓力相比於大廠小，公司裡養了很多貓，還是個貓咖。如果不是為了麵包，筆者是很青睞這種公司的。雖然拿到了offer，還是婉拒了小姐姐，對方還很禮貌的問我，怎麼不來了呢，是不喜歡廣東嗎？T_T 。

「騰訊PCG一面」

這次面試是在電話上進行的，面試官小哥哥說話很清晰，問的問題也很細，總體來說表現還是可以的。

• 為什麼學習前端？
• 瞭解python、go嗎 ？瞭解python
• node作為後端有什麼優缺點 ？ 這裡小哥哥告訴我node在高併發場景表現和性能存在瓶頸
• 做過音視頻方面的嗎 ？ 答做過網盤，有媒體文件預覽功能
• 瀏覽器重拍重繪，怎麼減少重拍重繪 ？
• 異步隊列 微任務、宏任務 優先級
• 跨域方式有哪些？同源策略 cors、JSONP、postMessage 、代理服務器
• JSONP實現原理 ？ 利用script標籤和註冊全局函數
• localstorage、sessionstorage區別 ？
• 怎麼實現一個水平居中的alert窗口 ？ 定寬高margin、calc、不定寬高transform、flex佈局
• webpack打包過程 ？

❝

1.初始化 webpack.config.js 最後的配置結果 2.初始化compiler對象，註冊所有配置的插件，插件監聽webpack構建生命週期鉤子。調用run。3. 根據入口文件，分析模塊依賴（深度遍歷），treeshicking
4.對應的文件使用對應loader loader是一個函數 右到左的順序執行 輸入參數是一個字符串，輸出參數也是一個字符串 5.得到每個文件結果，包含每個模塊以及他們之間的依賴關係，生成chunk。webpack將所有的模塊打包成一個函數 6.最後生成bound文件 是一個自執行函數

❞

• 用過你覺得最好用的webpack插件 ？ 答模塊熱替換插件
• 什麼是SPA應用，相對於多頁的缺點 首屏緩慢、不利於SEO爬取
• CDN的優勢在哪裡 有用過嗎（答出了優勢，但沒有用過）
• 瀏覽器緩存問題

❝

強緩存 Expires 字段（受限制於本地時間） catcel-control字段 max-age 、 public、 private 、no-store 、no-catch
協商緩存 Last-Modified服務器發往客戶端、f-Modified-Since客戶端發往服務器，攜帶 Last-Modified 不準確 ，引入Etag Etag 文件的唯一識別符 通常是計算文件內容的md5

❞

• 瀏覽器資源加載優先級 ？ 答不瞭解，能給我講講嗎，對面講了下如圖片資源，瀏覽器會優先加載用戶可視的內容。
• 最近在讀過什麼書？ 深入淺出nodeJS
• 3:20 時，求時針分針之間的夾角。這裡注意減去時針偏移的10度。
• 筆試 模擬大整數相加、相乘

<code>function add(a, b) {
    let res = ''
    let newA = a.split('')
    let newB = b.split('')
    let c = 0
    while (newA.length || newB.length || c) {
        c += parseInt(newA.pop() || 0) + parseInt(newB.pop() || 0)
        res = c % 10 + res
        c = c > 9 ? 1 : 0
    }
    return res
}
function multiply(a, b) {
    let arr = []
    let num = 0;
    for (let i of a) {
        let temp = num
        for (let j of b) {
            if (!arr[temp]) arr[temp] = 0
            arr[temp] += (i * j)
            temp++
        }
        num++
    }
    for (let i = arr.length-1; i >0;  i--) {
        if (arr[i] > 9) arr[i-1] += parseInt(arr[i]/10)
        arr[i] = arr[i]%10 

    }
    return +arr.join('')
}
/<code>

這次面試感覺還不錯，面試官小哥哥給我講了很多東西，還告訴我他在工作中的實際業務，使用的技術棧，現在的前端發展。對我這樣的雙非學歷也一視同仁，我個人是非常尊敬欣賞這樣的面試官的。打call!

「阿里釘釘」

阿里釘釘是在釘釘上加了群，和群主老哥聊過幾句，最後也是這位老哥面的我。上來就是兩個筆試題。

<code>1.函數防抖？
    function throttle(fn,delay) {  //節流
        let lasttime = 0
        return function () {
            let nowtime = new Date().getTime()
            if(nowtime-lasttime>=delay){
                fn.call(this)
                lasttime = nowtime
            }
        }
    }
2.爬梯子問題？
function jumpFloor(number)
{
    let fib = [0,1,2]
    if(number<3) return fib[number]
    for(let i = 3;i<=number;i++){
        fib.push(fib[i-1]+fib[i-2])
    }
    
    return fib.pop()
} 

/<code>

面試題

• 前端安全 怎麼防範XSS攻擊？
• 如何進行轉義
• 網絡爬蟲有了解嗎
• CDN主要用來解決什麼問題？ （負載均衡、就近原則）

這次面試和以前的面試遇到的問題差不多，但對面沒有直接問我問題，而是從實際問題引導我回答。我能聽出對面是在引導我回答某方面的知識，但是我就是沒有聽懂他到底想問什麼。面試快結束時，他對我說：我和你是老鄉，之前也有在釘釘上聊過，所以特意把你的簡歷拿到了我這裡，不知道這對你是好事還是壞事。（聽到這裡我知道已經涼了）之後他還順便提醒我，你爬梯子代碼那裡寫的是 * 號，應該是 + 號。（我心裡一陣涼風）。心裡很感謝這位釘釘的老哥，下定決心把平時模糊的概念一定要弄懂。

「阿里CBU一面」

• html節點類型？塊級元素和行內元素
• vue的雙向綁定原理？ 訂閱發佈模式和Object.defineProperties
• vue3.0、2.0、1.0的區別？ 主要答的是虛擬DOM、proxy代替Object.defineProperties
• 為什麼用proxy代替Object.defineProperties 後者只能監聽已有屬性變化，且不能監聽數組的內容變化
• vue的解析器原理？ 用template生成AST語法樹分析
• async瀏覽器支持情況，沒有async的時候用什麼模擬？（generator）
• generator有什麼作用？ 供for of 消費、利用next接口
• 三道很簡單的編程題（前兩個代碼量有點多，把第三題分享出來）

<code> /* 字符串隱藏部分內容
 * mask('85022088'); // 85****88
 */
function mask(str, char) {
    if (str.length <= 4) return str.replace(/\\w/g, char)
    let newStr = ''
    let start = 0
    let mask = `${char}${char}${char}${char}`
    start = Math.floor(str.length / 2 - 2)
    newStr = str.slice(0, start) + mask + str.slice(start + 4, str.length)
    return newStr
}
/<code>

這次面試總體感覺很不錯，主要是因為面試官小哥人很幽默，面試氛圍也很放鬆，和我閒聊了很多。這個小哥帶給我很多積極能量，筆者希望能在以後遇到越來越多這樣的人。

「騰訊PCG二面」

PCG二面很突然，早上剛起床來的電話，就匆匆開始了~

• 談談你的實習經歷，過程中你遇到哪些問題，怎麼克服的 （這裡主要談了自己在技術上和同事協作遇到的問題，一頓胡編。。。）
• 兩個用戶，A在深圳帶寬2M，B在上海帶寬100M，請求一個服務器部署在黑龍江4kb的文件。誰更快？（個人認為理論上差不多，現實上B可能由於距離近會快一些。我的答案不一定正確）
• 瀏覽器地址欄輸入網址到顯示，發生了什麼？大概過程如下：

❝

DNS
迭代查詢 瀏覽器緩存記錄 、本地host文件記錄 、本地的DNS服務器
遞歸查詢 根服務器 頂級域名、二級域名、權威服務器
逐層封裝 tcp->ip->數據鏈路層(首部mac) 幀 ->比特流 -> 經過路由根據ip轉發 -> ip解析到mac地址。 逐層拆解。
tcp三次握手過程 建立http連接
https、http 建立https連接 （TLS/SSL握手）

1 客戶端發送請求，支持的加密協議到服務端 、 服務端返回公鑰和證書到客戶端 2 客戶端證書驗證 生成對稱密鑰隨機數 公鑰對其加密,發送到服務端 3 服務器私鑰解密發來的公鑰，用公鑰加密數據。建立通信

http重定向 狀態碼 等 瀏覽器通過解析HTML，生成DOM樹，解析CSS，生成CSS規則樹，然後通過DOM樹和CSS規則樹生成渲染樹。渲染樹。重排重繪。

❞

這是個開放性問題，我也只能答到這種程度。

• 砝碼分鹽問題。140g鹽用2g和7g砝碼，一個天平，三次分出50g、90g
• 反問環節 這裡我問道面試官我有哪裡不足？對方很中肯的告訴我在計算機網絡底層需要加強。

「字節商業變現平臺一面」

• 怎麼判斷數組類型？Object.prototype.toString.call([]).slice(8,-1) === 'Array'
• bind、call、apply區別
• 瀏覽器地址欄輸入網址到顯示，發生了什麼？（這個和上邊一樣）
• TCP三次握手 為什麼三次？
• http狀態碼？
• web通信技術? Comet（http流 、ajax輪詢）、SSE、 websocket
• 都接觸過哪些後端語言？ node、python
• react和vue的區別？ 答雙向綁定和單向數據流
• vuex的作用？ 狀態管理、集中式管理、把公用數據抽象出來、便於開發維護
• react和jquery有什麼區別？聲明式和命令式區別？
• MVVM和MVC？

個人覺得是因為這次面試問的問題恰好都是我瞭解的，對面印象不錯，甚至誇讚我基礎很牢固。面完直接開始進行二面。

「字節商業變現平臺二面 + HR面」

這次面試官是部門的leader，比較嚴肅

• 做過哪些項目
• 項目安全問題 項目裡md5在哪裡加密 （我答是前端加密）
• 防止XSS、CSRF攻擊？
• 前端鑑權 token
• 有做過管理類的項目嗎 答無
• 一個算法題 這個題筆者沒有寫出來，但是說了說思路，並表示自己算法很菜
• 有什麼想問的？ 筆者問商業變現平臺是做啥子的blabla...

大概是這些問題，有點記不清了。面完後就被告知通過了，等HR。兩天後HR面，主要是問問你的優缺點，最近在讀什麼書，平時成績如何。面完的兩個小時便拿到offer，不得不說字節的效率是真的很高。個人覺得之所以字節發展的如此之快，和字節的務實、技術氣氛濃厚，在管理上扁平化，有著很大關係。

這裡拿到字節的offer後，網易來電面試，因為地域問題（筆者是東北銀），婉拒了這次邀請。

「騰訊CSIG交叉面 + HR面」

過了大概幾天開始騰訊PCG三面，這段時間拿到字節offer後面試慾望十分低迷。在PCG三面的時候我拒絕了接下來的面試。對面問了我為什麼不面了，去了哪家公司，表示尊重選擇。戲劇性的是，之後過了兩天騰訊CSIG部門來電，我表示不太想繼續面的時候，對方表示理解，告訴我之前PCG的面試的評價還不錯，並問我如果直接發offer，是否願意來騰訊。筆者當時很驚訝，答了願意。沒想到直接發郵件邀我三面。三面面試官明顯是一個大佬，在騰訊會議上面試，主要問了些項目的細節，全程只有不到20分鐘，之後就進入到了HR面。HR面的時候，對方遲到了10分鐘，我連忙打電話過去問，HR小姐姐抱歉說剛剛在開會，之後電話面了20分鐘。一週後拿到正式offer。

「美團到店事業群涼麵」

這次面試我沒有任何準備，來的很突然，拿到三個offer的我不禁有些得意，以為能掌控一切，沒想到涼涼。。。

1. 計算機網絡七層模型
2. IP在哪一層 傳輸層。應用層有哪些協議 HTTP、FTP等
3. 講講TCP四次分手
4. UDP、TCP區別
5. TCP流量控制、擁塞控制？滑動窗口、擁塞窗口，慢開始、快重傳、快恢復
6. 你覺得QQ聊天是用的什麼協議 。我答TCP，對面說是UDP，TCP開銷太大。
7. 十大排序算法？複雜度？
8. 平時成績怎麼樣，我答中等生，還掛過一科。
9. 你為什麼來美團（我答經常用美團訂外賣吃，他說你這個回答牽強了點）
10. 筆試題： 和為S的連續正數序列

<code>function FindContinuousSequence(sum)
{
    let [start,end] = [1,2]
    let result = []
    while(start        //這裡把求和公式忘掉了，最後還是對面提醒的我。
        let total = (start+end)*(end-start+1)/2  
        if(total        else if(total>sum) start++
        else {
            let list = []
            for(let i=start;i<=end;i++){
                list.push(i)
            }
            result.push(list)
            end++  //start++
        }
    }
    return result
}
/<code>

這次面試問的大部分都是項目相關的事。面試老哥操著一口標準的東北話，跟我聊了50分鐘，大部分時候都是我倆在那哈哈哈的笑，或者是他在那沉默。個人感覺表現的不是很好，不過手裡有offer，掛了也沒所謂啦。

「阿里CBU二面」

• 自我介紹
• 項目安全（這裡和我探討了下localstorage存放token有哪些安全問題，如何讓改善）
• vue、react區別
• vue除了父子傳值還有哪些辦法？eventbus、vuex
• socket.io協議降級有了解嗎？
• koa框架和原生node有什麼不同？
• XSS攻擊

這次面試談到項目時說了我做的雲盤和聊天室，對方表示懷疑我是在培訓班做的，我表示我只是個大三學生呀（哪有錢報培訓班）。雖然問到的幾乎所有問題都答了出來。但對面表示項目上沒有亮點，建議我我在一些方向繼續深挖。我很感謝面試官的建議。筆者雖然基礎還OK，但是確實在項目上有所欠缺，對面也是很看重項目經驗。之後對方部門組加了我微信，問到拿到哪些offer後（說了騰訊），表示可以去深造半年，秋招的時候會再次主動聯繫我。（那好吧）。有些遺憾的是，筆者春招是第二次與阿里失之交臂了，唉，菜是原罪啊。

「尾聲」筆者的面試經歷大概就是這樣了，感謝你的閱讀。希望我們一起加油，為了搬磚努力把~

閱讀更多 前端時空 的文章

關鍵字: 跳槽那些事兒 雙非 騰訊