1月前端面試記

背景

我於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>>，面試前我前先後後看過三遍。共勉之！