2016十家公司前端面試小記

前言

　　春節前離職了，年後來了有一週了，把簡歷丟到網上後大概收到了將近七十多個面試邀請，挑了幾個稍微知名一些的公司如國美京東美團百度彩票等和一些中小型公司去面試，這星期一共面了11家公司，除了阿里彷佛沒戲了其餘的十家基本都發了口頭或是正式offer，也不打算再面了，社保斷了也是個麻煩事，打算從這其中挑一個就能夠了。

　　面試過程當中有作面試題的，也有直接聊的，實話講有些面試題其實就是背書，隨便一百度就能出答案的東西其實不太適合用於面試題中。例如某某css屬性的用法，js某函數的做用等等。我的傾向於將實際工做中可能會遇到的問題的場景，以及各類技術的坑做爲面試題，這樣一則能夠看出他的經驗多少，二則也能夠防止他作筆試題的時候手機搜索結果。

　　不過整體來說基本上每家問的問題也差很少，可能不一樣業務的公司問的問題的側重點不太同樣，有點側重於移動端適配css佈局瀏覽器兼容IE hack，而有的側重於JS邏輯面向對象設計模式考察等，若是你有三到五年左右的開發經驗這些問題基本也都碰見過，就算是作個總結吧。

手寫事件模型及事件代理/委託

　　這個算是被問到的最屢次數的問題了，首先要求描述下js裏面的【事件的三個階段】，若是沒據說過三個階段，那基本上就沒戲了。分別是捕獲，目標，冒泡階段，低版本IE不支持捕獲階段。而後可能問到IE和W3C不一樣綁定事件解綁事件的方法有什麼區別，參數分別是什麼，以及事件對象e有什麼區別等等。

　　若是上述都沒問題，接下來可能會問【事件的代理/委託】的原理以及優缺點，這是靠事件的冒泡機制來實現的，優勢是

一、能夠大量節省內存佔用，減小事件註冊，好比在table上代理全部td的click事件就很是棒

二、能夠實現當新增子對象時無需再次對其綁定事件，對於動態內容部分尤其合適

　　事件代理的應用經常使用應該僅限於上述需求下，若是把全部事件都用代理就可能會出現事件誤判，即本不該用觸發事件的被綁上了事件，事實上我見過有人把頁面裏的全部事件都綁定到document用委託的，這是極其不明智的作法。

　　所謂勁酒雖好，可不要貪杯哦~

　　以後對方可能要求你手寫原生js【實現事件代理】，並要求兼容瀏覽器，其實就是考覈對事件對象e的瞭解程度，以及在IE下對應的屬性名。其實此時若是你說就是用target，currentTarget，以及IE下的srcElement和this，基本就能夠略過了。

　　若是上述都ok的話，那麼極有可能要求讓你【實現事件模型】，即寫一個類或是一個模塊，有兩個函數，一個bind一個trigger，分別實現綁定事件和觸發事件，核心需求就是能夠對某一個事件名稱綁定多個事件響應函數，而後觸發這個事件名稱時，依次按綁定順序觸發相應的響應函數。

　　這個需求若是對於作過C#的人來說就再熟悉不過，他根本就是C#中的【委託】（delegate）。而委託與事件幾乎是一家子。回到前面說的題目，大體實現思路就是建立一個類或是匿名函數，在bind和trigger函數外層做用域建立一個字典對象，用於存儲註冊的事件及響應函數列表，bind時，若是字典沒有則建立一個，key是事件名稱，value是數組，裏面放着當前註冊的響應函數，若是字段中有，那麼就直接push到數組便可。trigger時調出來依次觸發事件響應函數便可。

　　不過還有不少細節，好比觸發響應函數時的上下文應該是什麼，觸發響應函數的參數列表應該是什麼，若是要求把調用trigger的參數列表都傳到響應函數中還要考慮到吧arguments對象轉化爲純數組才行等等。

　　還有一些面試官會問到事件如何派發也就是事件廣播（dispatchEvent）等等，這裏再也不展開。

　　有關事件的考覈點大概也就這麼多了

　前端性能優化

　　這個簡直老生常談，不論是園子裏仍是園子外，關於前端優化的東西太多太多了，不一樣角度不一樣方向也有不少，網絡性能優化，加快訪問速度，瀏覽器並行加載數量，怎樣實現原生JS異步載入，CDN加速的原理，如何將不一樣靜態資源發佈到多個域名服務器上，發佈後這些靜態字段的url路徑改怎麼批量改寫，用什麼工具進行項目打包，css打包後的相對路徑怎麼轉換爲絕對路徑，用什麼工具進行項目模塊依賴管理，怎麼進行cookie優化等等，

　　這個提及來就不少了，儘量的按照本身作過的優化來說，不然面試官隨便挑一項深究均可能會卡殼，與其這樣還不如不講

　閉包原理及應用

　　這個問題的經典性，幾乎全部面試官都會問到這個問題，什麼狀況下會發生閉包，爲何須要閉包，什麼場景下須要，閉包閉了誰，怎麼釋放被閉包的變量內存，閉包的優勢是什麼，缺點是什麼等等。

　　關於閉包，有的是上述提問，有的是直接作閉包面試題。關於概念網上一搜一大把，關於閉包面試題，能夠參考我以前寫過的一篇文章：大部分人都會作錯的經典JS閉包面試題（http://www.cnblogs.com/xxcanghai/p/4991870.html）

　　不誇張的講，若是這篇文章徹底弄懂了，基本上沒有能夠難住的閉包的題目了。

　手寫Function.bind函數

　　首先會要求解釋下這個函數的做用，以及在什麼場景下須要用到它，最後手寫一個Function.bind函數。

　　只要掌握核心幾點就沒問題：

一、Function.bind返回的也是一個函數，因此註定發生了閉包，

二、在返回的這個函數中去調用一個其餘的函數，這其實本質上就是函數鉤子(HOOK)

　　關於在JS裏的函數鉤子，我認爲只須要維護如下三點便可：

一、保持函數的this指向

二、保持函數的全部參數都傳遞到目標函數

三、保持函數的返回值

　　有了以上這幾點，這個函數就很是好寫了，下面是MSDN上的標準Polyfill：

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP
                                 ? this
                                 : oThis || this,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

　手寫數組快速排序/去重

　　不論是排序也好，仍是去重也罷，都是計算機基礎知識了，雖然快排寫出來了，去重也用多種方式實現了，可是算法是個人弱項，這裏就不展開了。不過對於準備面試的童鞋來說，準備下經常使用算法仍是比較重要的，大部分公司仍是比較看重此類基礎知識的。

　JS的定義提高

　　利用js的特性定義提高這個知識點衍生出來的面試題至關之多，諸如如下等等

(function(a){
    console.log(a);
    var a=10;
    function a(){};
}(100))

　　這算是我作過的定義提高裏面的最簡單的題目了,建議能夠看下個人上一篇文章:一道常被人輕視的前端JS面試題（http://www.cnblogs.com/xxcanghai/p/5189353.html）

　　基本上能作對那篇文章中所說的題目的話，此類面試題基本平趟無懸念

　跨域

　　關於跨域大概能夠分iframe的跨域，和純粹的跨全域請求。

　　關於跨域的能夠去看園子裏的這幾篇文章:

　　JavaScript跨域總結與解決辦法（http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html）

　　跨域-知識（http://www.cnblogs.com/scottckt/archive/2011/11/12/2246531.html）

　　跨域資源共享的10種方式（http://www.cnblogs.com/cat3/archive/2011/06/15/2081559.html）

　　其實正統的跨全域的解決方法大體也就，JSONP,Access Control和服務器代理這麼三種

　JSONP原理

　　只要你聊到跨域，就必須聊到JSONP，那麼就必需要講一下JSONP的實現原理，以及你在項目中那個需求使用了JSONP，這裏簡單講就是HTML裏面全部帶src屬性的標籤均可以跨域，如iframe，img，script等。

　　因此能夠把須要跨域的請求改爲用script腳本加載便可，服務器返回執行字符串，可是這個字符串是在window全局做用域下執行的，你須要把他返回到你的代碼的做用域內，這裏就須要臨時建立一個全局的回調函數，並把到傳到後臺，最後再整合實際要請求的數組，返回給前端，讓瀏覽器直接調用，用回調的形式回到你的原代碼流程中。

　　基本講到這也就沒什麼要再講的了。

　將url的查詢參數解析成字典對象

　　這個題目不約而同的出如今了多家公司的面試題中，固然也是由於太過於典型，解決方案無非就是拆字符或者用正則匹配來解決，我我的強烈建議用正則匹配，由於url容許用戶隨意輸入，若是用拆字符的方式，有任何一處沒有考慮到容錯，就會致使整個js都報錯。而正則就沒有這個問題，他只匹配出正確的配對，非法的所有過濾掉，簡單，方便。

　　實現代碼：

function getQueryObject(url) {
    url = url == null ? window.location.href : url;
    var search = url.substring(url.lastIndexOf("?") + 1);
    var obj = {};
    var reg = /([^?&=]+)=([^?&=]*)/g;
    search.replace(reg, function (rs, $1, $2) {
        var name = decodeURIComponent($1);
        var val = decodeURIComponent($2);                
        val = String(val);
        obj[name] = val;
        return rs;
    });
    return obj;
}

　函數節流

　　對於常見的場景，如網頁滾動時，常常會有滾動到哪時作什麼樣的動畫效果，遂要註冊onscroll事件，如何減小觸發次數，到達優化性能，同時又知足效果要求不卡頓，一個是優化事件內代碼，減小代碼量，二就是作函數節流。

　　大部分節流都採用時間作節流，即時間間隔小於多少的再也不調用，但同時保證一個最小調用間隔。（不然拖拽類的節流都將無效果），也能夠用調用次數作節流，但要考慮最後一次調用須要要執行。

　　能夠參考：淺談javascript的函數節流(http://www.alloyteam.com/2012/11/javascript-throttle/)

　設計模式

　　這方面被問到的比較多的有觀察者模式，職責鏈模式，工廠模式

　　主要是應用於js開發組件中會常常涉及，純粹的頁面業務邏輯可能涉及很少。

　　好比如何去設計一個前端UI組件，應該公開出哪些方法，應該提供哪些接口，應該提供哪些事件。哪部分邏輯流程應該開放出去讓用戶自行編寫，如何實現組件與組件之間的通訊，如何實現高內聚低耦合，如何實現組件的高複用等等

　css垂直居中方法

　　能夠看到我提到上面大多數都是關於JS的面試題，主要是由於css並非個人強項，但有幾個出現頻率很高，就是經典的垂直居中問題。

　　這個問題又能夠細分爲，被垂直居中的元素是否認高，是文字仍是塊，文字是單行仍是多行文字等等

　　這個能夠百度下，有N多種解決方案，主要仍是看應用場景的限制。

　自適應佈局

　　這個問題能夠劃分爲，左固定右自適應寬度，上固定下固定中間自適應高度等等佈局要求。

　　關於左右自適應的，不低於10種解決方案，還要看dom結構要求是並列仍是嵌套，是否容許有父級元素，是否容許使用CSS3，是否有背景色，是否要兩列等高，等等

　　而關於自適應高度的解決方案就略少一些，大體也是靠，CSS3的calc屬性，內padding，絕對定位後拉伸，動態js計算等等解決方案，一樣也是要看應用場景能用哪一個

　移動端自適應

　　也被問到了不少移動端開發中的各類坑，好比2倍屏，3倍屏的自適應等，我移動端的經驗略少，因此只是按照我作過的經驗去儘量的描述清楚，這裏就很少說了

　其餘關於前端

　　除了技術之外，由於帶過一個小團隊，因此更多的時間都是去聊關於項目，關於團隊，關於如何管理，關於如何處理團隊內問題，如何跨團隊協做等等。這部分純屬工做經驗了，按照作過的不一樣項目也會有不一樣。

　　總之，大部分聊得還算比較愉快，京東評定的是T3，美團評定的是P6，我也不太清楚這算是個什麼等級，不過大部分公司都是評定爲中級最多中高級開發水平。大概就這樣了，從參加工做到如今也有4年了，只混到這麼個水平彷佛也確實有些說不過去。