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

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

我是一名大三學(xué)生，大一在學(xué)校acm集訓(xùn)隊，后來轉(zhuǎn)向?qū)W習(xí)java，又去開發(fā)Android，在期間，學(xué)會怎么去解決一些編程遇到的問題以及靈活運用github。在大二寒假的時候，開始接觸學(xué)習(xí)前端，如今已經(jīng)一年了，一開始是做百度前端技術(shù)學(xué)院的任務(wù)，學(xué)習(xí)了html和css，以及參考別人優(yōu)秀的代碼。

js是通過紅寶石，js高級教程第三版開始入門學(xué)習(xí)的，這本書里面的基礎(chǔ)知識很精髓，那時候我也很有耐心的去看完了，雖然說可能實踐還是跟不上理論，因為后面做的項目基本都是用框架去做項目，而導(dǎo)致對于基礎(chǔ)知識的實踐比較少。

接下來，我們進(jìn)入正題吧

首先，接到電話的時候，由于之前心情的忐忑，情緒還是有點興奮的，以期待的口氣向面試官問好，面試官也問問好之后就開始進(jìn)入面試題了。

你先簡短的介紹一下自己

在這里，我就簡短的介紹了自己的學(xué)校專業(yè)，應(yīng)聘的崗位，以及是怎么走向?qū)W習(xí)前端的道路，也就和我寫的背景差不多。

你是怎么學(xué)習(xí)前端的？

開放性問題，我就回答了，一開始是在百度前端技術(shù)學(xué)院，后來看js高級教程第三版，接下來就是做項目，接觸一些框架，然后，就開始學(xué)習(xí)框架，以及個人對于框架的一些看法。

這里面試官很好，也跟我討論了一下學(xué)習(xí)的好不好，以及學(xué)習(xí)js基礎(chǔ)的話，不單單要看紅寶石（js高級教程第三版），也要看看js的犀牛書（js權(quán)威指南）比較好一點。

有了解js的數(shù)據(jù)類型嗎？說一說

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

有了解js的事件嗎？

在這里，我不清楚是js的事件流還是js的事件方法，經(jīng)過再次詢問之后，是叫我講述一下js的事件流。然后我就著這個圖回答了一遍。

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

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

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

在這里，我回答說我之前的項目經(jīng)驗基本都是PC端的所以不了解，但是面試官建議我去了解一下，畢竟基礎(chǔ)知識一定要扎實，才會在前端的路上走的更遠(yuǎn)。所以，我就紅寶石了解了一下，這里也介紹給大家吧。

觸摸事件指的是指的是用戶將手指放在屏幕上，在屏幕上滑動到將手指從屏幕移開觸發(fā)的事件，具體來說，有以下觸摸事件的產(chǎn)生。

touchstart: 當(dāng)手指觸摸屏幕時候觸發(fā)；

touchmove: 當(dāng)手指在屏幕上滑動的時候連續(xù)觸發(fā)；可以調(diào)用阻止默認(rèn)事件preventDefault()阻止屏幕滾動；

touchend: 手指離開屏幕時觸發(fā)；

touchcancel: 系統(tǒng)停止跟蹤觸摸時觸發(fā)；

以上的這些時間都會冒泡，而且都可以取消冒泡，而且，對于以上事件也提供了和鼠標(biāo)事件中常用的屬性：bubble,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrKey和metaKey。

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

touches: 跟蹤返回Touch對象的數(shù)組；

targetTouchs: 特定事件目標(biāo)的Touch對象的數(shù)組；

changeTouchs: 上次觸摸以來改變了的Touch對象的數(shù)組；

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

clientX: 觸摸目標(biāo)在瀏覽器中的x坐標(biāo)

clientY: 觸摸目標(biāo)在瀏覽器中的y坐標(biāo)

identifier: 標(biāo)識觸摸的唯一ID。

pageX: 觸摸目標(biāo)在當(dāng)前DOM中的x坐標(biāo)

pageY: 觸摸目標(biāo)在當(dāng)前DOM中的y坐標(biāo)

screenX: 觸摸目標(biāo)在屏幕中的x坐標(biāo)

screenY: 觸摸目標(biāo)在屏幕中的y坐標(biāo)

target: 觸摸的DOM節(jié)點目標(biāo)。

具體的例子，大家可以再在網(wǎng)上搜索一下。我就不帶大家敲了。

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

這里發(fā)生了：

輸入地址

瀏覽器查找域名的 IP 地址

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

瀏覽器向 web 服務(wù)器發(fā)送一個 HTTP 請求

服務(wù)器的永久重定向響應(yīng)（從 http://example.com 到 http://www.example.com）

瀏覽器跟蹤重定向地址

服務(wù)器處理請求

服務(wù)器返回一個 HTTP 響應(yīng)

瀏覽器顯示 HTML

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

瀏覽器發(fā)送異步請求

這里騰訊面試官還問了我對狀態(tài)碼的了解，并問了一個304狀態(tài)碼的意思，大家想了解可以自行百度一下咯。

說一下路由器的緩存

因為上面回答了緩存，路由器的緩存，由于本人學(xué)習(xí)計網(wǎng)也久忘了，就老實回答面試官不清楚，面試官也建議再去了解了解。這里我了解了，也給大家分享一下吧。

通俗點說，每個路由器根據(jù)所在網(wǎng)絡(luò)的不同，都有自己的路由表，在工作時會選擇相應(yīng)的路徑。為什么要有路由器緩存呢，這個也是為了發(fā)送數(shù)據(jù)，因為路由器最高層一般都是網(wǎng)絡(luò)層，網(wǎng)絡(luò)層一般都是傳送數(shù)據(jù)包，數(shù)據(jù)包又是經(jīng)過應(yīng)用層向下傳送之后送來的一部分文件數(shù)據(jù)，如果我們沒有緩存的話，那么，每次都會查找傳送到達(dá)方的ip地址就會很費力。

做項目中有遇到跨域嗎？跨域的原理是什么？

這里，我就老實回答有了，因為如果真的做過項目的話，確實會遇到跨域一般。但是我一般是用vue做項目，然后解決跨域又是用webpack里面配置的poxyTable進(jìn)行解決跨域，相當(dāng)于用代理工具，然后面試官又問了問我代理是怎么樣有了解原理嗎，以及跨域的原理，以及瀏覽器跨域的原因。

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

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

所謂同源是指，域名，協(xié)議，端口均相同，不明白可以看看下面的例子：

http://www.123.com/index.html 調(diào)用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 調(diào)用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 調(diào)用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 調(diào)用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 調(diào)用 https://www.123.com/server.php （協(xié)議不同:http/https，跨域）

為什么要實現(xiàn)跨域？防止CSRF攻擊，我看了一篇文章關(guān)于CSRF的還不錯，大家有興趣也可以看看這篇文章

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

我回復(fù)面試官，我是用jsonp解決跨域的，然后面試官叫我說明一下jsonp跨域的原理，等我說完之后，面試官又跟我說了一下其實Cors方法更好，大家如果想理解可以看看阮一峰的跨域資源共享CORS詳解和而對于jsonp跨域的工作原理，網(wǎng)上有很多，我就不舉例子了，我建議可以直接在github上面看看源代碼就可以理解。

有了解作用域嗎？怎么預(yù)防作用域污染

其實網(wǎng)上有很多作用域的文章，參差不齊，個人覺得的話，作用域無非就是js當(dāng)做對于function函數(shù)聲明會提升到其他聲明語句前執(zhí)行，以及對于某個{}里面的作用域如果找不到某個屬性，就會在該{}上下文當(dāng)中查找屬性，如果還找不到的話，進(jìn)而類似。

作用域污染，無非就是閉包了吧，個人理解。

說說閉包

網(wǎng)上關(guān)于閉包的說明實在是太多，但是很多又講的不明不白的，標(biāo)題黨太多，這里我建議還是直接看看js高級教程第三版里面的書本吧。

其實閉包也就是指有權(quán)訪問另一個函數(shù)作用域的函數(shù)而已。常用的創(chuàng)建閉包的方法就是在函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)。

function a(){
    var a;
    // ...
    return function(){
        // 這里可以引用a函數(shù)里面的作用域，也就是可以使用a
        // 而且a函數(shù)作用域無法使用這里的值。
    }
}

了解前端的緩存嗎？緩存分為幾類？

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

個人就簡單的介紹一下這三個吧，更詳細(xì)可以自己去百度百度一下。

Cookie，存儲容量小，僅僅4kb左右，在網(wǎng)絡(luò)請求的時候可以發(fā)送，不建議存儲重要數(shù)據(jù)，因為會被網(wǎng)絡(luò)詐騙就是把本地的cookie發(fā)到別人的服務(wù)器上，進(jìn)而獲取你的賬戶密碼。

LocalStorge,SessionStorge都是本地緩存的主要用的，兩者的用法都很簡單，都有各自的Set和get方法。主要的區(qū)別就是LocalStorge是一種持久化的存儲方式，也就是說如果不手動清除，數(shù)據(jù)就永遠(yuǎn)不會過期。而SessionStorge關(guān)閉瀏覽器就清空數(shù)據(jù)。

怎么才算一個好的前端開發(fā)者

這里的話，其實我的回答大家可能不是很在乎哈哈，就不說了，大家根據(jù)自己的理解去回答就好了。

你還有什么問題想問嗎

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

我碰到的面試官很好，他給我的評價說了很久，不管怎么說有機(jī)會和這些大牛聊聊天真的是知識層面又上升了吧。面試官給我的總結(jié)就是，基礎(chǔ)知識可以再多去學(xué)習(xí)，不用太著急學(xué)習(xí)框架，市面上的框架千變?nèi)f化，只有基礎(chǔ)知識比較好才能夠?qū)W習(xí)的更好，而且需要多學(xué)習(xí)一下性能優(yōu)化，網(wǎng)絡(luò)，安全這方面，因為在大公司里面，其實重要的東西并不是你能夠做的多好看，而是你的安全性那些做的好不好，一不小心信息泄露了，那就會導(dǎo)致很多無法想象的事情，（這里我特建議大家看看圖解http協(xié)議吧鏈接：https://pan.baidu.com/s/1Cvtt... 密碼：u35q）

然后，建議我就是基礎(chǔ)知識學(xué)更多一些，把知識都規(guī)范體系化，這樣以后碰到問題了就會一下子就知道是哪方面的問題，直接去解決。這里面試官給我從以下幾個方面進(jìn)行說明，我也真的是收獲頗多。

js基礎(chǔ)

計算機(jī)網(wǎng)絡(luò)

性能優(yōu)化

開發(fā)技巧

移動端知識

安全性問題

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