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

時間 2019-11-05

標籤騰訊前端三面繼續技術徵文欄目騰訊简体版

原文原文鏈接

上星期，參加了騰訊前端校招三次面試，一次電話，兩次現場面試。問到的知識廣度很全面，深度讓人也有點無奈，大部分不少東西平時確實沒有深究，深究可能也只是看看別人的博客，沒有本身敲代碼來實現，問到就會有些模糊，答得不是很好。特別是第三面，讓騰訊大佬問得啞口無言，當時真的是欲哭無淚。休整了兩天，準備將前端面試的知識點整理一下，分享給你們，後面還有不少互聯網公司，但願你們也可以找到一份好工做。javascript

若是您喜歡這篇文章，能夠點個贊，本文會很長，建議您收藏下來，方便往後回顧css

我這裏會將全部的知識點都列出來，並附上完整的答案，可是有些問題答案太多，一句兩句說不清，我會將我以爲不錯的答案連接放上來，以便你們按需取用html

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

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

基礎知識

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；java

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 支持事件通知機制，能夠將數據更新的通知發送給監聽者。以下：node

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

Web Storage帶來的好處：
減小網絡流量：一旦數據保存在本地後，就能夠避免再向服務器請求數據，所以減小沒必要要的數據請求，減小數據在瀏覽器和服務器間沒必要要地來回傳遞。
快速顯示數據：性能好，從本地讀數據比經過網絡從服務器得到數據快得多，本地數據能夠即時得到。再加上網頁自己也能夠有緩存，所以整個頁面和數據都在本地的話，能夠當即顯示。
臨時存儲：不少時候數據只須要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就能夠丟棄了，這種狀況使用sessionStorage很是方便。git

3.meta標籤有哪些？點這裏angularjs

4.佈局方面參考這一篇es6

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複製代碼

如何改變

new操做符會改變函數this的指向問題
首先new關鍵字會建立一個空的對象，而後會自動調用一個函數apply方法，將this指向這個空對象，這樣的話函數內部的this就會被這個空的對象替代。
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)中資源的交互方式
，所謂的同源就是指協議、域名、端口相同。
簡單說來，只有當協議，域名，端口相同的時候纔算是同一個域名，不然均認爲須要作跨域的處理。

解決方法

JSONP( Script 標籤)（不支持Post）
CORS（Access-Control-Allow-Origin）（存在兼容問題，僅支持 IE 10 以上）
跨域資源共享 CORS 詳解
Server Proxy(當你須要有跨域的請求操做時發送請求給後端，讓後端幫你代爲請求，而後最後將獲取的結果發送給你)
location.hash+iframe(數據直接暴露在了 url 中且數據容量和類型都有限)
window.name
postMessage
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等比較

若是您喜歡這篇文章，能夠點個贊，本文會很長，建議您收藏下來，方便往後回顧

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