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

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

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

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

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

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

你先簡(jiǎn)短的介紹一下自己

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

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

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

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

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

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

有了解js的事件嗎？

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

一個(gè)完整的JS事件流是從window開始，最后回到window的一個(gè)過(guò)程

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

移動(dòng)端的觸摸事件有了解不？

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

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

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

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

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

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

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

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

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

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

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

每個(gè)Touch對(duì)象包含一下的屬性

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

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

identifier: 標(biāo)識(shí)觸摸的唯一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é)點(diǎn)目標(biāo)。

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

說(shuō)一下頁(yè)面加載過(guò)程，就是輸入url到加載出頁(yè)面

這里發(fā)生了：

輸入地址

瀏覽器查找域名的 IP 地址

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

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

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

瀏覽器跟蹤重定向地址

服務(wù)器處理請(qǐng)求

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

瀏覽器顯示 HTML

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

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

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

說(shuō)一下路由器的緩存

因?yàn)樯厦婊卮鹆司彺妫酚善鞯木彺?，由于本人學(xué)習(xí)計(jì)網(wǎng)也久忘了，就老實(shí)回答面試官不清楚，面試官也建議再去了解了解。這里我了解了，也給大家分享一下吧。

通俗點(diǎn)說(shuō)，每個(gè)路由器根據(jù)所在網(wǎng)絡(luò)的不同，都有自己的路由表，在工作時(shí)會(huì)選擇相應(yīng)的路徑。為什么要有路由器緩存呢，這個(gè)也是為了發(fā)送數(shù)據(jù)，因?yàn)槁酚善髯罡邔右话愣际蔷W(wǎng)絡(luò)層，網(wǎng)絡(luò)層一般都是傳送數(shù)據(jù)包，數(shù)據(jù)包又是經(jīng)過(guò)應(yīng)用層向下傳送之后送來(lái)的一部分文件數(shù)據(jù)，如果我們沒(méi)有緩存的話，那么，每次都會(huì)查找傳送到達(dá)方的ip地址就會(huì)很費(fèi)力。

做項(xiàng)目中有遇到跨域嗎？跨域的原理是什么？

這里，我就老實(shí)回答有了，因?yàn)槿绻娴淖鲞^(guò)項(xiàng)目的話，確實(shí)會(huì)遇到跨域一般。但是我一般是用vue做項(xiàng)目，然后解決跨域又是用webpack里面配置的poxyTable進(jìn)行解決跨域，相當(dāng)于用代理工具，然后面試官又問(wèn)了問(wèn)我代理是怎么樣有了解原理嗎，以及跨域的原理，以及瀏覽器跨域的原因。

那這里我就簡(jiǎn)單解說(shuō)一下跨域的原理吧.

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

所謂同源是指，域名，協(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，跨域）

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

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

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

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

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

作用域污染，無(wú)非就是閉包了吧，個(gè)人理解。

說(shuō)說(shuō)閉包

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

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

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

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

前端的緩存無(wú)非就Cookie,LocalStorge,SessionStorge這三個(gè)吧。

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

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

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

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

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

你還有什么問(wèn)題想問(wèn)嗎

這個(gè)問(wèn)題，其實(shí)我想到了，因?yàn)槲铱催^(guò)鵝廠wo談會(huì)，在那里其實(shí)我就知道可能會(huì)問(wèn)這個(gè)問(wèn)題，而我也問(wèn)了我想知道的答案，就是面試官對(duì)于我之前的回答給一個(gè)評(píng)價(jià)。

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

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

js基礎(chǔ)

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

性能優(yōu)化

開發(fā)技巧

移動(dòng)端知識(shí)

安全性問(wèn)題

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