騰訊校招前端三面,虐完繼續擼|掘金技術徵文

天道酬勤_我萌我贏發表於2017-09-25
前端

上星期，參加了騰訊前端校招三次面試，一次電話，兩次現場面試。問到的知識廣度很全面，深度讓人也有點無奈，大部分很多東西平時確實沒有深究，深究可能也只是看看別人的部落格，沒有自己敲程式碼來實現，問到就會有些模糊，答得不是很好。特別是第三面，讓騰訊大佬問得啞口無言，當時真的是欲哭無淚。休整了兩天，準備將前端面試的知識點整理一下，分享給大家，後面還有很多網際網路公司，希望大家也能夠找到一份好工作。

如果您喜歡這篇文章，可以點個贊，本文會很長，建議您收藏下來，方便日後回顧

我這裡會將所有的知識點都列出來，並附上完整的答案，但是有些問題答案太多，一句兩句說不清，我會將我覺得不錯的答案連結放上來，以便大家按需取用

-----------底部有更新---------------9.26---------------------放上了三面的問題-------------

下面的知識點主要從基礎知識（HTML+CSS）,JavaScript(包括node，angular)，前端綜合知識（HTTP，快取，效能優化，效能監控，跨域等）展開

基礎知識

1.html5有哪些新特性、移除了那些元素？（這是一個很經典的問題，基本上都會問到，當然後面會展開部分知識點）
新特性
（1）語意化更好的內容元素，比如 article、footer、header、nav、section，
表單控制元件，calendar、date、time、email、url、search;
（2）一些功能標籤，如繪畫 canvas，用於媒介播放的 video 和 audio 元素;
（3）本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
sessionStorage 的資料在瀏覽器關閉後自動刪除;
（4）新的技術，如webworker, websocket, Geolocation;
移除的元素：
（1）純表現的元素：basefont，big，center，font, s，strike，tt，u;
（2）對可用性產生負面影響的元素：frame，frameset，noframes；

2. cookies，session,sessionStroage和localStorage的區別
首先要分清的是，cookies，sessionStroage和localStorage是在客戶端，session是在伺服器端。伺服器端的session機制， session 物件資料儲存在伺服器上。實現上，伺服器和瀏覽器之間僅需傳遞session id即可，伺服器根據session id找到對應使用者的session物件。會話資料僅在一段時間內有效，這個時間就是server端設定的session有效期。伺服器session儲存資料安全一些，一般存放使用者資訊，瀏覽器只適合儲存一般資料
其次，是cookies，sessionStroage和localStorage三者的區別
（1）cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。
（2）儲存大小限制也不同，cookie資料不能超過4k，同時因為每次Http請求都會攜帶cookie（這裡可能還會追問，cookie是在http報文什麼地方，答:cookie是攜帶在http請求頭上的），所以cookie只適合儲存很小的資料，比如會話標識sessionStroage和localstroage雖然也有大小限制，但是比cookie大很多，可以達到5M；
（3） 資料有效期也不同，cookie在設定的有效期（服務端設定）內有效，不管視窗或者瀏覽器是否關閉，sessionStroage僅在當前瀏覽器視窗關閉前有效（也就是說只要這個瀏覽器視窗沒有關閉，即使重新整理頁面或進入同源另一頁面，資料仍然存在。關閉視窗後，sessionStorage即被銷燬）；localStroage始終有效，視窗或者瀏覽器關閉也一直儲存；
（4） Web storage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。如下：

window.addEventListener("storage", function (e) {
        alert(e.newValue);
    });複製程式碼

Web Storage帶來的好處：
減少網路流量：一旦資料儲存在本地後，就可以避免再向伺服器請求資料，因此減少不必要的資料請求，減少資料在瀏覽器和伺服器間不必要地來回傳遞。
快速顯示資料：效能好，從本地讀資料比通過網路從伺服器獲得資料快得多，本地資料可以即時獲得。再加上網頁本身也可以有快取，因此整個頁面和資料都在本地的話，可以立即顯示。
臨時儲存：很多時候資料只需要在使用者瀏覽一組頁面期間使用，關閉視窗後資料就可以丟棄了，這種情況使用sessionStorage非常方便。

3.meta標籤有哪些？點這裡

4.佈局方面 參考這一篇

5.BFC概念及使用BFC概念及使用

6.flexbox 阮一峰

7.CSS如何實現居中CSS實現居中的7種方法

JavaScript

1.資料型別判斷
尤其是Object.prototype.toString，是個神器更多點這裡

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;複製程式碼

2.XHR具體底層原理(要求手寫ajax)

function ajax(){
    var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        // code for IE6, IE5
        xmlhttp = ActiveXObject("Microsoft.XMLHTTP");
    }

    //判定執行狀態
    xmlhttp.onreadystatechange = function(){
        /*
        readyState
            0: 請求未初始化
            1: 伺服器連線已建立
            2: 請求已接收
            3: 請求處理中
            4: 請求已完成，且響應已就緒
        status
            200:請求成功
            404:未找到
            500:伺服器內部錯誤
        */
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//獲得字串形式的響應資料
        }
      }
    xmlhttp.open("Get","url",true);

    //設定頭資訊
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    //將資訊傳送到伺服器
    xmlhttp.send();    

}複製程式碼

3.Js事件機制？IE和谷歌，火狐有何區別？
下面這段程式碼是相容各個瀏覽器，特別注意的是移除事件時傳參必須和繫結時保持一致，尤其是回撥函式不能使用匿名函式

var EventUtil ={
    addHandler: function(element, type, handler){
        if(element.addEventListener){//標準瀏覽器webkit，ff
            element.addEventListener(type, handler, false);
        }
        else if(element.attachEvent){//ie
            element.attachEvent('on' + type,handler);
        }else{
            element['on' + type] = handler;
        }
    },
    removeHandler: function(){
        if(element.removeEventListener){
            element.removeEventListener(type, handler, false);
        }else if(element.detachEvent){
            element.detachEvent('on' + type, handler);
        }else{
            element['on' + type] = null;
        }
    }
}複製程式碼

最好能找到javascript高階程式設計這本書，裡面有一章專門講事件
我也來說說js的事件機制

4.什麼是閉包?堆疊溢位有什麼區別？ 記憶體洩漏? 那些操作會造成記憶體洩漏？怎麼樣防止記憶體洩漏？
閉包：就是能夠讀取其他函式內部變數的函式。
堆疊溢位：就是不顧堆疊中分配的區域性資料塊大小，向該資料塊寫入了過多的資料，導致資料越界，結果覆蓋了別的資料。經常會在遞迴中發生。
記憶體洩露是指：用動態儲存分配函式記憶體空間，在使用完畢後未釋放，導致一直佔據該記憶體單元。直到程式結束。指任何物件在您不再擁有或需要它之後仍然存在。
造成記憶體洩漏：
setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏。
閉包、控制檯日誌、迴圈（在兩個物件彼此引用且彼此保留時，就會產生一個迴圈）
防止記憶體洩露：
(1)不要動態繫結事件；
(2)不要在動態新增，或者會被動態移除的dom上綁事件，用事件冒泡在父容器監聽事件；
(3)如果要違反上面的原則，必須提供destroy方法，保證移除dom後事件也被移除，這點可以參考Backbone的原始碼，做的比較好；
(4)單例化，少建立dom，少綁事件。
學習Javascript閉包

5.js繼承
這一塊是js的重點，要求能夠手寫
JS實現繼承的幾種方式
想把js整個原型，繼承這一塊搞清楚的，可以看看這一系列文章
深入理解javascript原型和閉包

6.es6中let和const
const定義的變數不可以修改，而且必須初始化。
（1）let的優點是嚴格了變數宣告，不會允許你在同一作用域下重複宣告，同時也加入了塊級作用域的概念，比如
if(*){這使用let就是一個作用域}和for(){let a = };每一次迴圈體中宣告的a是相互獨立的分屬於不同的作用域;
（2）const除了let的作用還多了：改變值或者指標的時候const會報錯。

7.自己實現一個Promise
手把手教你實現一個完整的 Promise
promise非同步程式設計的原理

8.express和koa區別
這個要對node的框架比較熟悉，下面是大牛的解答
Express和koa各有啥優缺點
Node.js框架之express與koa對比分析

9.angular雙向繫結實現
構建自己的AngularJS，第一部分：Scope和Digest

10.正則匹配
JS正規表示式完整教程

11. js中this的指向，如何改變，call和apply和bind的區別
在JavaScript中this可以是全域性物件、當前物件或者任意物件，這完全取決於函式的呼叫方式，this 繫結的物件即函式執行的上下文環境
情況1：如果一個函式中有this，但是它沒有被上一級的物件所呼叫，那麼this指向的就是window(非嚴格模式，在嚴格版中的預設的this不再是window，而是undefined)
情況2：如果一個函式中有this，這個函式有被上一級的物件所呼叫，那麼this指向的就是上一級的物件。
情況3：如果一個函式中有this，這個函式中包含多個物件，儘管這個函式是被最外層的物件所呼叫，this指向的也只是它上一級的物件

// 作為物件方法呼叫
var test = {
    a : 5,
    b : 6,
    sum : function () {
        return this.a + this.b;     // 此處this = test
    }
}
alert(test.sum());     // 11複製程式碼
// 作為函式呼叫
a = 4;
b = 3;
function sum(){
    return this.a + this.b;         // 此處this = window
}
alert(sum());      // 7複製程式碼
var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();複製程式碼
var o = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();複製程式碼
var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();複製程式碼

對於建構函式，this會指向new出來的例項

function Fn(){
    this.user = "萌爺";
}
var a = new Fn();
console.log(a.user); //萌爺複製程式碼

如果返回值是一個物件，那麼this指向的就是那個返回的物件，如果返回值不是一個物件那麼this還是指向函式的例項。

function fn()  
{  
    this.user = '萌爺';  
    return 1;
}
var a = new fn;  
console.log(a.user); //萌爺複製程式碼
function fn()  
{  
    this.user = '萌爺';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined複製程式碼

如何改變

  1. new操作符會改變函式this的指向問題
    首先new關鍵字會建立一個空的物件，然後會自動呼叫一個函式apply方法，將this指向這個空物件，這樣的話函式內部的this就會被這個空的物件替代。
  2. apply或call，bind
    bind與apply、call最大的區別就是：bind不會立即呼叫，其他兩個會立即呼叫，如果多次呼叫bind，那麼多出來的次數都是無效的
    都是用來改變函式的this物件的指向的，第一個引數都是this要指向的物件，都可以利用後續引數傳參。
    將上述一個例子改造一下
    var a = {
 user:"萌爺",
 fn:function(){
     console.log(this.user); //萌爺
 }
}
var b = a.fn;
var c = b.bind(a);
c();複製程式碼

    前端綜合知識

    1跨域
    同源策略是由Netscape提出的著名安全策略，是瀏覽器最核心、基本的安全功能,它限制了一個源(origin)中載入文字或者指令碼與來自其他源(origin)中資源的互動方式
    ，所謂的同源就是指協議、域名、埠相同。
    簡單說來，只有當協議，域名，埠相同的時候才算是同一個域名，否則均認為需要做跨域的處理。

同源
同源

解決方法

  1. JSONP( Script 標籤)（不支援Post）
  2. CORS（Access-Control-Allow-Origin）（存在相容問題，僅支援 IE 10 以上）
    跨域資源共享 CORS 詳解
  3. Server Proxy(當你需要有跨域的請求操作時傳送請求給後端，讓後端幫你代為請求，然後最後將獲取的結果傳送給你)
  4. location.hash+iframe(資料直接暴露在了 url 中且資料容量和型別都有限)
  5. window.name
  6. postMessage
  7. document.domain(主域相同而子域不同)
    參考這篇文章關於跨域，你想知道的全在這裡

2.HTTP綜合知識
（1）狀態碼
HTTP 響應中包含一個狀態碼，用來表示伺服器對客戶端響應的結果。

狀態碼一般由3位構成：

1xx : 表示請求已經接受了，繼續處理。
2xx : 表示請求已經處理掉了。
3xx : 重定向。
4xx : 一般表示客戶端有錯誤，請求無法實現。
5xx : 一般為伺服器端的錯誤。複製程式碼

比如常見的狀態碼：

200 OK 客戶端請求成功。
301 Moved Permanently 請求永久重定向。
302 Moved Temporarily 請求臨時重定向。
304 Not Modified 檔案未修改，可以直接使用快取的檔案。
400 Bad Request 由於客戶端請求有語法錯誤，不能被伺服器所理解。
401 Unauthorized 請求未經授權，無法訪問。
403 Forbidden 伺服器收到請求，但是拒絕提供服務。伺服器通常會在響應正文中給出不提供服務的原因。
404 Not Found 請求的資源不存在，比如輸入了錯誤的URL。
500 Internal Server Error 伺服器發生不可預期的錯誤，導致無法完成客戶端的請求。
503 Service Unavailable 伺服器當前不能夠處理客戶端的請求，在一段時間之後，伺服器可能會恢復正常。複製程式碼

（2）HTTP請求
看這一篇足以網路基礎知識之 HTTP 協議

3.快取機制
HTTP快取機制詳解

4.當我們在瀏覽器中輸入 www.baidu.com/** 訪問百度的時候瀏覽器做了哪些事情

首先 Chrome 搜尋自身的 DNS 快取。(如果 DNS 快取中找到百度的 IP 地址，就跳過了接下來查詢 IP 地址步驟，直接訪問該 IP 地址。)
搜尋作業系統自身的 DNS 快取。(瀏覽器沒有找到快取或者快取已經失效)
讀取硬碟中的 host 檔案，裡面記錄著域名到 IP 地址的對映關係，Mac 電腦中位於 /etc/hosts。(如果前1.2步驟都沒有找到)
瀏覽器向寬頻運營商伺服器或者域名伺服器發起一個 DNS 解析請求，這裡伺服器有兩種方式解析請求，這在稍後會講到，之後瀏覽器獲得了百度首頁的 IP 地址。
拿到 IP 地址後，瀏覽器就向該 IP 所在的伺服器建立 TCP 連線(即三次握手)。
連線建立起來之後，瀏覽器就可以向伺服器發起 HTTP 請求了。(這裡比如訪問百度首頁，就向伺服器發起 HTTP 中的 GET 請求)
伺服器接受到這個請求後，根據路徑引數，經過後臺一些處理之後，把處理後的結果返回給瀏覽器，如果是百度首頁，就可以把完整的 HTML 頁面程式碼返回給瀏覽器。
瀏覽器拿到了百度首頁的完整 HTML 頁面程式碼，核心和 JS 引擎就會解析和渲染這個頁面，裡面的 JS，CSS，圖片等靜態資源也通過一個個 HTTP 請求進行載入。
瀏覽器根據拿到的資源對頁面進行渲染，最終把完整的頁面呈現給使用者。
如果瀏覽器沒有後續的請求，那麼就會跟伺服器端發起 TCP 斷開(即四次揮手)。複製程式碼

從輸入 URL 到頁面載入完成的過程中都發生了什麼事情？
5.效能優化
效能優化肯定是參考雅虎前端優化的35條軍規

6.瀏覽器工作原理詳解
這篇文章是以色列開發人員塔利·加希爾的研究成果瀏覽器工作原理詳解 ，強力推薦，深度好文

到此為止，已經把大部分內容涵蓋到了，想看基礎點的可以點這裡html+css，js基礎

本篇文章主要是針對於理論多一些，對於面試時要求手寫一些案例，或者是一些小演算法，本篇文章只是略有涉及，希望能夠在校招面試中能夠幫到大家

有人在評論中詢問了三面的問題，我在寫文章有些問題沒有放上來，主要是是自己沒怎麼實踐過，我在下面會列出來，大家有好的答案也可以分享出來
1.node異常捕獲 Node.js捕獲異常的一些探索
2.前端效能監控
3.js繼承+閉包，手寫了組合繼承
4.js實現雙向繫結
5.為何不用koa，而用express，區別？
6.專案架構圖
7.負載均衡
8.node與java等比較

如果您喜歡這篇文章，可以點個贊，本文會很長，建議您收藏下來，方便日後回顧

如有任何錯誤，歡迎指正！如有任何問題，歡迎跟我交流！掘金技術徵文

相關文章