摘要：前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預定時間，這也給了我們這些面試者去準備的時間。其實閉包也就是指有權訪問另一個函數作用域的函數而已。常用的創建閉包的方法就是在函數內部創建另一個函數。

騰訊一面，相比阿里一面來說，騰訊一面先給打電話預定時間，這也給了我們這些面試者去準備的時間。但是也正是因為這種確定性，也有在等待電話的時候的心情的忐忑。

我是一名大三學生，大一在學校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到加載出頁面

這里發生了：

輸入地址

瀏覽器查找域名的 IP 地址

這一步包括 DNS 具體的查找過程，包括：瀏覽器緩存->系統緩存->路由器緩存...

瀏覽器向 web 服務器發送一個 HTTP 請求

服務器的永久重定向響應（從 http://example.com 到 http://www.example.com）

瀏覽器跟蹤重定向地址

服務器處理請求

服務器返回一個 HTTP 響應

瀏覽器顯示 HTML

瀏覽器發送請求獲取嵌入在 HTML 中的資源（如圖片、音頻、視頻、CSS、JS等等）

瀏覽器發送異步請求

這里騰訊面試官還問了我對狀態碼的了解，并問了一個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基礎

計算機網絡

性能優化

開發技巧

移動端知識

安全性問題

不管怎么說，不管結果好壞，跟騰訊大牛的聊天都是值得積累的過程，不要想象的很緊張吧，這也是自己能夠收獲知識的時候，我是這樣覺得的，哈哈，如果覺得寫得還行，幫忙點個贊吧。