1月前端面試記

WU_CHONG發表於2017-01-17
前端面試

背景

我於16.12.18辭職，之前有過一年左右的前端工作經驗。從12月26號開始到1月9號先後面試了微信，百度，阿里巴巴uc，唯品會以及深圳騰訊等幾家公司，特此總結與各位共勉。

微信

由於我已經畢業工作過，所以去微信面試是走的社招。微信社招極其嚴格，共八輪面試，總體來說我基本上當了一把炮灰。由於騰訊前端又細分為重構和JS，所以微信的面試基本上以JS為主。
微信第一面是筆試，共一個小時，四道程式設計題:

  • JS手寫二分搜尋演算法
  • 給你一段程式碼，讓你發現其中的問題(考察閉包)
  • 實現一個Lazyman(請自行搜尋)
  • 用JS程式碼求出頁面上一個元素的最終的background-color，不考慮IE瀏覽器，不考慮元素float情況。

前兩道題比較基礎，只要有JS基礎的同學一般都應該沒什麼問題。第三道題，有些難度，但是我之前曾在網上見過該題，使用佇列或者promise都可以。第四道題，看完之後一臉懵逼，想了半天也沒明白它考察什麼內容。由於時間關係，我直接用了window.getComputedStyle。後來交完之後仔細想想，好像確實有很多情況沒考慮到，例如當這個元素的背景色為透明時，它最終的背景色應該為其父元素的背景色。

微信二面是專案經歷面，我跟面試官大致介紹下我過去一年做的專案。然後掏出筆記本開始一起看我之前寫的程式碼，面試官覺得我之前做的專案複雜度不太高。然後就問了我其他幾個問題:既然你面的是小程式組，那麼你瞭解小程式嗎？我說不了解。然後問我是否使用過React，我說沒有。面試官不是很滿意，但最終讓我過了。

微信第三面是前端基礎面，面完之後我的人生觀發生了改變，我感覺我不配做前端。第一個問題是，請問前端優化的手段有哪些？我心裡暗喜，這麼簡單的問題還問。然後我答將CSS檔案放在上面，JS檔案放在下面。正準備說下一條時，面試官問為什麼這樣做?我答JS下載解析時會阻塞DOM樹的構建，如果放在上面可能會出現白屏的情況。然後面試官問，有沒有可能讓JS下載解析不阻塞DOM樹構建?我答使用defer或asyn欄位。面試官問有什麼區別？我答...然後面試官問CSS下載解析會不會阻塞DOM樹渲染?我已經開始一身汗了，這個問題我不太確定。然後面試官讓我接著說優化手段，我答CSS-sprit或者將小圖使用base64內嵌。面試官問我CSS-sprit原理是什麼?使用base64雖然會減少請求數，但是會增大檔案的大小，以什麼為基準去衡量什麼時候使用base64?此時我已經淚流滿面。然後面試官問我瞭解HTTPS嗎？我說了解。他問，請問HTTPS和HTTP有什麼區別?我答HTTPS增加了SSL層。面試官問請畫出SSL四次握手過程?此刻已經崩潰，我答不會。然後他問請問SSL握手時有對稱加密和非對稱加密嗎？我答不知道。他問如何優化這一層？我答不知道。然後繼續回答優化手段?我答將靜態內容推向CDN。然後他問現在CDN不穩，時而工作時而崩潰，我有一個首頁如何確保每次都能正常顯示該首頁?答案是CSS inline。他看了看時間，說那就下一個問題。然後給了我一個柱狀圖，讓我使用html和CSS繪製出來。當時我是用了flex。然後他讓我手寫一個快排演算法，我寫了。然後他讓我用CSS和JS動畫在剛才那個柱狀圖中表現出快排的整個過程，然後我哭了。其實這個動畫是見過的，只不過平時使用的都是canvas。面試結束，我跪了。

整體來言，微信的面試難度還是挺大的。他對每個細節的考察非常仔細，不僅要求你知其然更要讓你知其為什麼。另外一方面我也意識到了準備的不足。

百度

百度的面試是我最喜歡的，考察的比較全面。百度第一面為基礎面，包括HTML/CSS/JS各方面，共50分鐘左右，大約30個問題左右:

  • HTML5新特性(新增的標籤, API等)，如localstorage的用法以及與cookie的區別，如何理解web語義化
  • CSS3新特性，如動畫等
  • CSS特性，如position的用法，如何實現居中，bootstrap原始碼的理解，盒模型(W3C和IE)，flex的使用
  • 前端相容性處理(CSS hack技術)
  • JS基礎，如this用法，new關鍵字的過程，call與apply的區別，閉包，原型以及JS如何實現繼承
  • 前端基礎，瀏覽器快取，跨域，從輸入url到渲染的整個過程，事件(W3C和IE)，TCP三次握手過程，如何實現懶載入(跟預載入的區別)

百度二面為基礎面+演算法+專案經歷，持續一個小時。問題如下:

  • 之前有看過你做的一個移動頁簡歷，請問如何實現？我主要是使用REM+Media Query，根據不同尺寸的裝置進行不同的font-size設定。然後問我REM和EM的區別，如果父元素的font-size也是採用em表示，那麼子元素的font-size怎麼計算等。
  • 有沒有遇到過margin重疊的現象，如何解決？BFC
  • 常見的清除浮動的方法有哪些？bootstrap是怎麼做的？bootstrap是怎麼實現grid系統的？
  • 怎麼理解JS模組化？有沒有使用過webpack？

演算法題只有一道:什麼是淺複製和深複製？有什麼區別？如何實現Object的深複製？

首先我對這個問題進行分析，Object是一個樹形結構，所以我採用遞迴的方法進行復制。面試官隨後提問能否通過迴圈的方法？我思考了一會，回答說迴圈的關鍵在於迴圈條件的設定，我想借助棧作為迴圈判斷的條件，當棧為空時，迴圈結束。當時我立馬反應過來，因為Object子節點的個數不確定，可能入棧出棧會存在一定問題。面試官隨後問，還有什麼東西沒有考慮到嗎？我想了下說沒有。他提示了下，如果出現環怎麼辦？我愣了一下說不知道。然後他給我個提示說使用深度優先的方法藉助棧並不能解決這個問題，然後讓我使用寬度優先試試，將程式碼發給他。面試結束後我發給了他我的程式碼，各位可以參考下:

// 深度優先遍歷複製, 藉助佇列
function deepCopy(obj) {
    var newObj = {},
        srcQueue = [obj], srcVisitedQueue = [],
        copyQueue = [newObj], copyVisitedQueue = [];

    while (srcQueue.length > 0) {
        var currentSrcElement = srcQueue.shift(),
            currentCopyElement = copyQueue.shift();

        srcVisitedQueue.push(currentSrcElement);
        copyVisitedQueue.push(currentCopyElement);

        for (var key in currentSrcElement) {
            if (typeof currentCopyElement[key] !== 'object') {
                currentCopyElement[key] = currentSrcElement[key];
            } else {
                // 有環的情況
                var index = srcVisitedQueue.indexOf(currentSrcElement[key]);
                if (index >= 0) {
                    currentCopyElement[key] = copyVisitedQueue[index];
                } else {
                    srcQueue.push(currentSrcElement[key]);
                    currentCopyElement[key] = {};
                    copyQueue.push(currentCopyElement[key]);
                }
            }
        }
    }

    return newObj;
}

// Test case
// 1. 只含有簡單型別的Object{a: 1, b:2} => pass
// 2. 簡單型別和複雜型別同時存在的情況下的Object => pass:
// var obj1 = {
//     a: 1,
//     b: 2,
//     c: {
//         d: 3,
//         e: {
//             f: 4,
//             g: 5
//         }
//     },
//     h: {
//         i: 6,
//         j: 7
//     }
// };
// 3. 有環的情況下的Object => pass:
// var obj1 = {
//     a: 1,
//     b: 2,
//     c: obj1
// };複製程式碼

然後面試官問了關於我專案經歷，之前曾看到你推進過公司的模組化，請問是基於什麼背景，你是如何推進的，遇到過什麼問題等等。

百度三面就是屬於開放性面試。首先面試官跟我討論了下我二面當中的那道演算法題，問我是否解決，環如何解決，然後問是否看過Jquery的原始碼怎麼進行Object的深複製的？我答看過，是採用遞迴。他然後問為什麼Jquery對環的考慮只判斷當前節點是否為根節點?該問題我沒回答上來。然後他說現在百度有許多部門，每個部門都有自己的元件庫，實現的功能基本相同，但有的用的是原生的JS，有的是使用JQuery，有的是使用React，現在想進行統一，如何解決？我說採用重構，他問了問我重構的思路有哪些。然後他說百度有些專案線上上已經很久了，程式碼比較陳舊，如果你去重構可能會對線上的版本有衝擊，你怎麼解決這個問題?我答小幅度重構，然後進行回滾等。然後他問，現在有一個很急的專案，需要一個元件，剛好網上提供的有該元件，你是如何遮蔽該元件與現有專案的差異?我的思路是寫一個wrapper遮蔽掉該元件與現有庫的差異。然後面試官問，如果引入該元件必須引入一個新的庫，如React你該如何選擇？引入的話有什麼好處壞處？我提供了自己的一些看法。

阿里巴巴UC

UC的面試是最輕鬆的，以至於我感覺我可能沒通過。

UC第一面是一個阿里非常高階的前端工程師，面試大約一小時。首先讓我講了講我對移動前端的瞭解？然後我講了講移動前端佈局，JS方面，效能優化等，大於15分鐘。然後他問我如何理解前端工程化？然後我又講了15分鐘等。然後他問我有什麼問題嗎？我問請問你如何理解前端以及你是如何從pc端轉入移動端？他站在黑板上給我講了20多分鐘。包括hybrid技術以及現在流行的RN和Weex，以及阿里現在的業務使用的一些技術以及為什麼使用等。第一輪面試結束。

第二輪面試是一個後端的哥們，面試大約30分鐘。問了我一些前端優化的方法，以及平常遇到過最大的困難是什麼，如何解決。有什麼難忘的事等。然後問我有什麼問題？我說為什麼你不問我前端的基礎知識也不問我前端的專案經驗？他說沒必要，已經瞭解我的背景了等等，然後帶我吃了個飯。

唯品會

唯品會技術面共5輪，考察的非常全面。前兩面都是基礎面跟百度大概類似。但是它重點問了我web安全的一些知識，xss和csrf。問我如何解決相關的問題？xss的話主要使用轉義，csrf的話專案中我主要使用的是jwt(javascript web token)。然後針對jwt細節問了我20多分鐘。第三面是一個產品經理面，說雖然是技術但是還是要了解產品才行。問我有沒有用過唯品會app，我說沒有。然後問我知道唯品會是幹什麼的嗎？我說一家專做特賣的網站。然後給我一個唯品會的頁面問我有什麼建議，然後我講了20多分鐘。第四面是技術總監，進來之後先把我吊了一頓。說雖然感覺你前端基礎各方面比較好，但是唯品會的業務性非常強，我沒有任何電商方面的經驗等，讓我過來從頭做起之類的。

騰訊

由於面試的是移動方面的業務，所以主要問的有zepto庫的使用，移動端佈局，優化，JS的一些基礎還有localstorage等。重點還問了一下我是如何在專案中開展測試的(單元測試和e2e測試)。後序面試由於要去深圳總部，所以我推掉了。

總結

針對於前端的面試，還是需要一定的時間去好好梳理，尤其是知識點的細節一定要非常清楚。關於專案經歷一定要有一條主線，在這條主線上你做過什麼，遇到過什麼坑，怎麼解決一定要非常清楚等。另外一點演算法還是很重要的，推薦大家一本書<<劍指offer>>，面試前我前前後後看過三遍。共勉之！

相關文章