2018年騰訊前端一面總結（面向2019屆學生）

前言

騰訊一面，相比阿里一面來講，騰訊一面先給打電話預約時間，這也給了咱們這些面試者去準備的時間。可是也正是由於這種肯定性，也有在等待電話的時候的心情的忐忑。

背景

我是一名大三學生，大一在學校acm集訓隊，後來轉向學習java，又去開發Android，在期間，學會怎麼去解決一些編程遇到的問題以及靈活運用github。在大二寒假的時候，開始接觸學習前端，現在已經一年了，一開始是作百度前端技術學院的任務，學習了html和css，以及參考別人優秀的代碼。

js是經過紅寶石，js高級教程第三版開始入門學習的，這本書裏面的基礎知識很精髓，那時候我也頗有耐心的去看完了，雖說可能實踐仍是跟不上理論，由於後面作的項目基本都是用框架去作項目，而致使對於基礎知識的實踐比較少。

接下來，咱們進入正題吧

騰訊一面

首先，接到電話的時候，因爲以前心情的忐忑，情緒仍是有點興奮的，以期待的口氣向面試官問好，面試官也問問好以後就開始進入面試題了。

你先簡短的介紹一下本身

在這裏，我就簡短的介紹了本身的學校專業，應聘的崗位，以及是怎麼走向學習前端的道路，也就和我寫的背景差很少。

你是怎麼學習前端的？

開放性問題，我就回答了，一開始是在百度前端技術學院，後來看js高級教程第三版，接下來就是作項目，接觸一些框架，而後，就開始學習框架，以及我的對於框架的一些見解。

這裏面試官很好，也跟我討論了一下學習的好很差，以及學習js基礎的話，不僅僅要看紅寶石（js高級教程第三版），也要看看js的犀牛書（js權威指南）比較好一點。

有了解js的數據類型嗎？說一說

ES5的基本數據類型，Undefined，Null，Number，String，Boolean。引用類型，Object
。ES6新增了數據類型Symbol，表示獨一無二的值。

有了解js的事件嗎？

在這裏，我不清楚是js的事件流仍是js的事件方法，通過再次詢問以後，是叫我講述一下js的事件流。而後我就着這個圖回答了一遍。

一個完整的JS事件流是從window開始，最後回到window的一個過程

事件流被分爲三個階段(1~ 5)捕獲過程、(5~ 6)事件觸發過程、(6~ 10)冒泡過程

移動端的觸摸事件有了解不？

在這裏，我回答說我以前的項目經驗基本都是PC端的因此不瞭解，可是面試官建議我去了解一下，畢竟基礎知識必定要紮實，纔會在前端的路上走的更遠。因此，我就紅寶石瞭解了一下，這裏也介紹給你們吧。

觸摸事件指的是指的是用戶將手指放在屏幕上，在屏幕上滑動到將手指從屏幕移開觸發的事件，具體來講，有如下觸摸事件的產生。

• touchstart: 當手指觸摸屏幕時候觸發；
• touchmove: 當手指在屏幕上滑動的時候連續觸發；能夠調用阻止默認事件preventDefault()阻止屏幕滾動；
• touchend: 手指離開屏幕時觸發；
• touchcancel: 系統中止跟蹤觸摸時觸發；

以上的這些時間都會冒泡，並且均可以取消冒泡，並且，對於以上事件也提供了和鼠標事件中經常使用的屬性：bubble,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrKey和metaKey。

除了上面這些屬性外，觸摸事件還提供了下面這些屬性：

• touches: 跟蹤返回Touch對象的數組；
• targetTouchs: 特定事件目標的Touch對象的數組；
• changeTouchs: 上次觸摸以來改變了的Touch對象的數組；

每一個Touch對象包含一下的屬性

• clientX: 觸摸目標在瀏覽器中的x座標
• clientY: 觸摸目標在瀏覽器中的y座標
• identifier: 標識觸摸的惟一ID。
• pageX: 觸摸目標在當前DOM中的x座標
• pageY: 觸摸目標在當前DOM中的y座標
• screenX: 觸摸目標在屏幕中的x座標
• screenY: 觸摸目標在屏幕中的y座標
• target: 觸摸的DOM節點目標。

具體的例子，你們能夠再在網上搜索一下。我就不帶你們敲了。

說一下頁面加載過程，就是輸入url到加載出頁面

這裏發生了：

1. 輸入地址
2. 瀏覽器查找域名的 IP 地址
3. 這一步包括 DNS 具體的查找過程，包括：瀏覽器緩存->系統緩存->路由器緩存...
4. 瀏覽器向 web 服務器發送一個 HTTP 請求
5. 服務器的永久重定向響應（從 http://example.com 到 http://www.example.com）
6. 瀏覽器跟蹤重定向地址
7. 服務器處理請求
8. 服務器返回一個 HTTP 響應
9. 瀏覽器顯示 HTML
10. 瀏覽器發送請求獲取嵌入在 HTML 中的資源（如圖片、音頻、視頻、CSS、JS等等）
11. 瀏覽器發送異步請求

這裏騰訊面試官還問了我對狀態碼的瞭解，並問了一個304狀態碼的意思，你們想了解能夠自行百度一下咯。

說一下路由器的緩存

由於上面回答了緩存，路由器的緩存，因爲本人學習計網也久忘了，就老實回答面試官不清楚，面試官也建議再去了解了解。這裏我瞭解了，也給你們分享一下吧。

通俗點說，每一個路由器根據所在網絡的不一樣，都有本身的路由表，在工做時會選擇相應的路徑。爲何要有路由器緩存呢，這個也是爲了發送數據，由於路由器最高層通常都是網絡層，網絡層通常都是傳送數據包，數據包又是通過應用層向下傳送以後送來的一部分文件數據，若是咱們沒有緩存的話，那麼，每次都會查找傳送到達方的ip地址就會很費力。

作項目中有遇到跨域嗎？跨域的原理是什麼？

這裏，我就老實回答有了，由於若是真的作過項目的話，確實會遇到跨域通常。可是我通常是用vue作項目，而後解決跨域又是用webpack裏面配置的poxyTable進行解決跨域，至關於用代理工具，而後面試官又問了問我代理是怎麼樣有了解原理嗎，以及跨域的原理，以及瀏覽器跨域的緣由。

那這裏我就簡單解說一下跨域的原理吧.

首先，什麼是跨域？跨域就是它是由瀏覽器的同源策略形成的，是瀏覽器施加的安全限制。

所謂同源是指，域名，協議，端口均相同，不明白能夠看看下面的例子：

http://www.123.com/index.html 調用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 調用 http://www.456.com/server.php （主域名不一樣:123/456，跨域）

http://abc.123.com/index.html 調用 http://def.123.com/server.php （子域名不一樣:abc/def，跨域）

http://www.123.com:8080/index.html 調用 http://www.123.com:8081/server.php （端口不一樣:8080/8081，跨域）

http://www.123.com/index.html 調用 https://www.123.com/server.php （協議不一樣:http/https，跨域）

爲何要實現跨域？防止CSRF攻擊，我看了一篇文章關於CSRF的還不錯，你們有興趣也能夠看看這篇文章

你是怎麼解決跨域的？說說Cors解決的方法，和你用的jsonp的解決的原理

我回復面試官，我是用jsonp解決跨域的，而後面試官叫我說明一下jsonp跨域的原理，等我說完以後，面試官又跟我說了一下其實Cors方法更好，你們若是想理解能夠看看阮一峯的跨域資源共享CORS詳解和而對於jsonp跨域的工做原理，網上有不少，我就不舉例子了，我建議能夠直接在github上面看看源代碼就能夠理解。

有了解做用域嗎？怎麼預防做用域污染

其實網上有不少做用域的文章，良莠不齊，我的以爲的話，做用域無非就是js當作對於function函數聲明會提高到其餘聲明語句前執行，以及對於某個{}裏面的做用域若是找不到某個屬性，就會在該{}上下文當中查找屬性，若是還找不到的話，進而相似。

做用域污染，無非就是閉包了吧，我的理解。

說說閉包

網上關於閉包的說明實在是太多，可是不少又講的不明不白的，標題黨太多，這裏我建議仍是直接看看js高級教程第三版裏面的書本吧。

其實閉包也就是指有權訪問另外一個函數做用域的函數而已。經常使用的建立閉包的方法就是在函數內部建立另外一個函數。

function a(){
    var a;
    // ...
    return function(){
        // 這裏能夠引用a函數裏面的做用域，也就是可使用a
        // 並且a函數做用域沒法使用這裏的值。
    }
}

瞭解前端的緩存嗎？緩存分爲幾類？

前端的緩存無非就Cookie,LocalStorge,SessionStorge這三個吧。

我的就簡單的介紹一下這三個吧，更詳細能夠本身去百度百度一下。

Cookie，存儲容量小，僅僅4kb左右，在網絡請求的時候能夠發送，不建議存儲重要數據，由於會被網絡詐騙就是把本地的cookie發到別人的服務器上，進而獲取你的帳戶密碼。

LocalStorge,SessionStorge都是本地緩存的主要用的，二者的用法都很簡單，都有各自的Set和get方法。主要的區別就是LocalStorge是一種持久化的存儲方式，也就是說若是不手動清除，數據就永遠不會過時。而SessionStorge關閉瀏覽器就清空數據。

怎麼纔算一個好的前端開發者

這裏的話，其實個人回答你們可能不是很在意哈哈，就不說了，你們根據本身的理解去回答就行了。

你還有什麼問題想問嗎

這個問題，其實我想到了，由於我看過鵝廠wo談會，在那裏其實我就知道可能會問這個問題，而我也問了我想知道的答案，就是面試官對於我以前的回答給一個評價。

我碰到的面試官很好，他給個人評價說了好久，無論怎麼說有機會和這些大牛聊聊天真的是知識層面又上升了吧。面試官給個人總結就是，基礎知識能夠再多去學習，不用太着急學習框架，市面上的框架變幻無窮，只有基礎知識比較好纔可以學習的更好，並且須要多學習一下性能優化，網絡，安全這方面，由於在大公司裏面，其實重要的東西並非你可以作的多好看，而是你的安全性那些作的好很差，一不當心信息泄露了，那就會致使不少沒法想象的事情，（這裏我特建議你們看看圖解http協議吧連接：https://pan.baidu.com/s/1Cvtt... 密碼：u35q）

而後，建議我就是基礎知識學更多一些，把知識都規範體系化，這樣之後碰到問題了就會一會兒就知道是哪方面的問題，直接去解決。這裏面試官給我從如下幾個方面進行說明，我也真的是收穫頗多。

• js基礎
• 計算機網絡
• 性能優化
• 開發技巧
• 移動端知識
• 安全性問題

總結

無論怎麼說，無論結果好壞，跟騰訊大牛的聊天都是值得積累的過程，不要想象的很緊張吧，這也是本身可以收穫知識的時候，我是這樣以爲的，哈哈，若是以爲寫得還行，幫忙點個贊吧。