第一次大公司面試的面經(jīng)
此次面試說來也有點(diǎn)匆忙柬唯，本沒想過自己會那么快就想去面試大公司靠柑，并且把自己第一次面大公司的各種不足展現(xiàn)得一覽無余寨辩。當(dāng)時(shí)11月20號左右身邊一位朋友給了一位人超nice的師兄的內(nèi)推，并且鼓勵(lì)我去投簡歷歼冰。最終戰(zhàn)勝了自己的膽怯靡狞，投了一份簡歷給內(nèi)推的師兄。一兩天后hr就打電話安排面試了停巷。
沒想到面試是要連續(xù)著面的耍攘，當(dāng)時(shí)面花了一個(gè)多小時(shí)過了一面榕栏，再花一個(gè)小時(shí)面二面，最終也止于二面蕾各。接下來就是本文的主題了扒磁。我把當(dāng)時(shí)面試官通過牛課網(wǎng)在線面試平臺中寫給我做的題記錄了下來，其實(shí)從面試前就打算把面試學(xué)到的東西積累下來式曲。接下來就進(jìn)入本文的主題了妨托，我也盡量把每一道題都寫上我的解題思路，希望能得到大家更多更好的意見吝羞。
一面
一兰伤、請問運(yùn)行這段代碼會輸出什么。
let obj = {
name: 'bytedance',
getName() {
return this.name
}
}
let fb = obj.getName;
fb();
A：我當(dāng)時(shí)好像是答undefined钧排。但我知道這不會是輸出”bytedance“敦腔，因?yàn)楫?dāng)obj.getName賦給fb的時(shí)候它的this也改變了，具體可以看我之前總結(jié)了一篇JavaScript中的this的文章恨溜。然后我后來我在瀏覽器中運(yùn)行了一下代碼發(fā)現(xiàn)是輸出"" 符衔。。糟袁。
二判族、設(shè)計(jì)一個(gè)簡單的任務(wù)隊(duì)列，要求分別在1,3,4秒后打印出”1“项戴，”2“形帮，”3“
new Quene()
.task(1000, () => {
console.log(1)
})
.task(2000, () => {
console.log(2)
})
.task(1000, () => {
console.log(3)
})
.start()
function Quene() { ... }
A：講真，看到這道題的時(shí)候我第一時(shí)間感到自己完了周叮，雖然也只寫了一點(diǎn)辩撑，沒有全部做出來，然后就跳過這道題了则吟。面試完就努力著把這道題寫出來
function Quene() {
this.task = (time, callback) => {
setTimeout(callback, time);
// console.log(this)
return this;
};
this.start = () => {
return this;
};
}
雖然這樣即使最后面不用寫.start()也能打印出來槐臀。。氓仲。希望能得到指點(diǎn)Q_Q
三水慨、給定一個(gè)升序整數(shù)數(shù)組[0,1,2,4,5,7,13,15,16]，找出其中連續(xù)出現(xiàn)的數(shù)字區(qū)間如下：
["0->2",”4->5“,"7","13","15->16"]
A:
function Arr(arr) {
var len = arr.length,
j,
newArr = [],
str = '';
for (var i = 0; i < len; i++) {
j = i;
if (arr[i] + 1 === arr[j + 1]) {
while (arr[j] + 1 === arr[j + 1]) {
str = '->' + arr[j + 1];
j++;
}
str = arr[i] + str;
newArr.push(str)
i = j
} else {
newArr.push(arr[i].toString())
}
}
return newArr;
}
還算比較簡單的算法題吧敬扛，還好當(dāng)時(shí)做出來了晰洒，不然可能就止步于此。啥箭。也希望大家能談點(diǎn)自己對這道題的解法
四谍珊、TCP協(xié)議建立連接的過程、進(jìn)程間通信的方式有哪些
TCP建立連接的過程即為三次握手急侥，三次握手可以參考我之前發(fā)的文章砌滞，網(wǎng)上也有很多資料侮邀，這里就不細(xì)講。
至于進(jìn)程間的通信方式贝润，當(dāng)時(shí)沒能打出來（這就涉及到我的知識盲區(qū)了【哭喪臉】）绊茧，后來網(wǎng)上查了一下，有：
- 管道
pipe：管道是一種半雙工的通信方式打掘，數(shù)據(jù)只能單向流動华畏，而且只能在具有親緣關(guān)系的進(jìn)程間使用。進(jìn)程的親緣關(guān)系通常是指父子進(jìn)程關(guān)系尊蚁。 - 命名管道
FIFO：有名管道也是半雙工的通信方式亡笑，但是它允許無親緣關(guān)系進(jìn)程間的通信。 - 消息隊(duì)列
MessageQueue：消息隊(duì)列是由消息的鏈表横朋，存放在內(nèi)核中并由消息隊(duì)列標(biāo)識符標(biāo)識仑乌。消息隊(duì)列克服了信號傳遞信息少、管道只能承載無格式字節(jié)流以及緩沖區(qū)大小受限等缺點(diǎn)叶撒。 - 共享存儲
SharedMemory：共享內(nèi)存就是映射一段能被其他進(jìn)程所訪問的內(nèi)存绝骚，這段共享內(nèi)存由一個(gè)進(jìn)程創(chuàng)建，但多個(gè)進(jìn)程都可以訪問祠够。共享內(nèi)存是最快的 IPC 方式，它是針對其他進(jìn)程間通信方式運(yùn)行效率低而專門設(shè)計(jì)的粪牲。它往往與其他通信機(jī)制古瓤，如信號兩，配合使用腺阳，來實(shí)現(xiàn)進(jìn)程間的同步和通信落君。 - 信號量
Semaphore：信號量是一個(gè)計(jì)數(shù)器，可以用來控制多個(gè)進(jìn)程對共享資源的訪問亭引。它常作為一種鎖機(jī)制绎速，防止某進(jìn)程正在訪問共享資源時(shí)，其他進(jìn)程也訪問該資源焙蚓。因此纹冤，主要作為進(jìn)程間以及同一進(jìn)程內(nèi)不同線程之間的同步手段。 - 套接字
Socket：套解口也是一種進(jìn)程間通信機(jī)制购公，與其他通信機(jī)制不同的是萌京，它可用于不同及其間的進(jìn)程通信。 - 信號 (
sinal) ： 信號是一種比較復(fù)雜的通信方式宏浩，用于通知接收進(jìn)程某個(gè)事件已經(jīng)發(fā)生知残。
這里有個(gè)題外話，如果面試官問瀏覽器窗口間的通信比庄，那么有以下幾種：
1.localStore
localStorage.setItem("name", name);
2.cookie + setInterval
在頁面A設(shè)置一個(gè)使用 setInterval定時(shí)器不斷刷新求妹，檢查cookie的值是否發(fā)生變化乏盐，如果變化就進(jìn)行刷新的操作。
由于 cookie 是在同域可讀的制恍，所以在頁面B 改變 cookie的值父能，頁面 A是可以拿到的。
五吧趣、用純CSS創(chuàng)建一個(gè)三角形的原理是什么法竞？如何實(shí)現(xiàn)？
A：用CSS創(chuàng)建一個(gè)三角形的原理是分別設(shè)置上下左右的border屬性强挫，中間內(nèi)容為0面積岔霸。實(shí)現(xiàn)：
#box {
width: 0;
height: 0;
border-left: 50px transparent solid;
border-right: 50px transparent solid;
border-top: 50px transparent solid;
border-bottom: 50px black solid;
}
六、0.1 + 0.2 > 0.3 返回什么俯渤？
A：true呆细。分別轉(zhuǎn)成2進(jìn)制。
七八匠、類數(shù)組對象是什么絮爷？
剛開始還對這個(gè)類數(shù)組感到懵逼，后來面試官一提醒函數(shù)的參數(shù)馬上領(lǐng)悟到就是偽數(shù)組梨树。
A：只包含使用從零開始坑夯，且自然遞增的整數(shù)做鍵名，并且定義了length表示元素個(gè)數(shù)的對象抡四。
- function內(nèi)部的arguments對象就是一個(gè)類數(shù)組對象
- DOM方法document.getElementsByTagName()...也是返回一個(gè)類數(shù)組對象
八柜蜈、什么是同源策略，為什么會有這種策略
源包括三個(gè)部分：協(xié)議指巡、域名淑履、端口（HTTP協(xié)議的默認(rèn)端口是80）。如果其中有任何一個(gè)部分不同藻雪，則源不同秘噪。即為跨域。
限制一個(gè)源加載的文檔或腳本與來自另一個(gè)源的資源進(jìn)行交互勉耀。這是一個(gè)用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制指煎。（來自MDN的解釋）
九、什么CORS
A：受同源策略的限制瑰排，支持跨域贯要；一種新的通信協(xié)議標(biāo)準(zhǔn)⊥肿。可以理解成同時(shí)支持同源和跨域的Ajax崇渗。
MDN解釋：跨域資源共享(CORS) 是一種機(jī)制，它使用額外的 HTTP頭來告訴瀏覽器 讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問來自不同源服務(wù)器上的指定的資源。當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域宅广、協(xié)議或端口請求一個(gè)資源時(shí)葫掉，資源會發(fā)起一個(gè)跨域HTTP 請求。
十跟狱、什么是OPTIONS請求
A：OPTIONS請求是HTTP請求的一種方法俭厚，返回服務(wù)器針對特定資源所支持的HTTP請求方法，也可以利用向web服務(wù)器發(fā)送‘*’的請求來測試服務(wù)器的功能性
然后一面就這樣結(jié)束了驶臊，面試官也直接跟我說我通過了一面挪挤，我也問了一些問題后就結(jié)束面試了。我趕緊把平臺上的面試記錄記下來关翎，過了幾分鐘扛门，當(dāng)我還沉浸在通過一面的愉悅和全身心已經(jīng)放松了的情況下，發(fā)現(xiàn)手機(jī)有幾個(gè)未接電話纵寝，然后又再打進(jìn)了一個(gè)论寨，接通電話后對方是頭條hr小姐姐，問我說現(xiàn)在可以二面了爽茴，二面的面試官已經(jīng)在平臺上等著了葬凳。。室奏。好吧火焰，這太突然了，我馬上趕赴戰(zhàn)場胧沫。
二面
一荐健、fetch
A：Fetch API 提供了一個(gè)獲取資源的接口（包括跨域請求）。無論請求成功與否琳袄，它都返回一個(gè) Promise 對象；
二纺酸、用Promise實(shí)現(xiàn)延遲3秒后輸出 delay(3000).then(f,e)
A:
function delay(timer) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve();
}, timer)
})
}
三窖逗、XSS/CSRF
XSS：跨站腳本（Cross-site scripting）
通過提交或其他方式例如發(fā)布評論，其中含有HTML或JavaScript的代碼餐蔬，如果服務(wù)器沒有過濾掉這些腳本碎紊，這些腳本在一些情況下就可能會運(yùn)行。
- 避免
XSS的方法之一就是過濾用戶提供的內(nèi)容樊诺，如<,>,script; -
cookie設(shè)置HttpOnly屬性
CSRF：跨站請求偽造（Cross-site request forgery）
是一種劫持受信任用戶向服務(wù)器發(fā)送非預(yù)期請求的攻擊方式仗考，即在用戶登陸某個(gè)平臺化拿到用戶的登陸憑證后發(fā)送偽造請求
- 防范
CSRF的方法之一就是通過驗(yàn)證碼 -
Referer Check，根據(jù)HTTP協(xié)議词爬，在HTTP頭中有一個(gè)字段叫Referer秃嗜，它記錄了該HTTP請求的來源地址。通過Referer Check，可以檢查請求是否來自合法的”源”锅锨。 - 添加
token驗(yàn)證叽赊，可以在HTTP請求中以參數(shù)的形式加入一個(gè)隨機(jī)產(chǎn)生的token，該token不存在與cookie中必搞，并在服務(wù)器端建立一個(gè)攔截器來驗(yàn)證這個(gè)token必指，如果請求中沒有token或者token內(nèi)容不正確，則認(rèn)為可能是CSRF攻擊而拒絕該請求恕洲。
四塔橡、圖片懶加載原理 （lazy image）
A：給每張圖片添加一個(gè)data-xxx的屬性用于存放圖片的src，檢測到圖片進(jìn)入視野中的時(shí)候把data-xxx的屬性賦給src
如何檢測圖片進(jìn)入視野：
a.document.documentElement.clientHeight獲取屏幕可視窗口高度
b.element.offsetTop獲取元素相對于文檔頂部的距離
c.document.documentElement.scrollTop獲取滾動被卷去的高度
如果b-c<a成立則元素進(jìn)入可視區(qū)域
這里我還提到一個(gè)函數(shù)節(jié)流提高性能：
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判斷是否已空閑霜第，如果在執(zhí)行中葛家，則直接return
return;
}
canRun = false;
setTimeout(function(){
// 這里加載圖片
console.log("函數(shù)節(jié)流");
canRun = true;
}, 500);
};
五、上傳圖片
- 表單上傳
(1). 提供form表單庶诡，method必須是post惦银。
(2).form表單的enctype必須是multipart/form-data。 -
ajax上傳
-
ajax和FormData可實(shí)現(xiàn)頁面無刷新的文件上傳效果
六末誓、將一些ES6的新特性
可以參考之前寫的文章扯俱，不過當(dāng)時(shí)到了后面真是精疲力竭，連let和const都沒有說出來喇澡。迅栅。。
七晴玖、jsbridge
問到這個(gè)概念的時(shí)候我不清楚读存，記得當(dāng)前前一兩天掘金剛發(fā)一篇相關(guān)的文章給我，然而當(dāng)時(shí)沒去看呕屎。让簿。
JSBridge簡單來講，主要是 給 JavaScript 提供調(diào)用 Native 功能的接口秀睛，讓混合開發(fā)中的“前端部分”可以方便地使用地址位置尔当、攝像頭甚至支付等Native 功能。是Native 和非 Native之間的橋梁蹂安，它的核心是構(gòu)建 Native和非Native 間消息通信的通道椭迎，而且是雙向通信的通道。
二面其中也包含一些IQ題田盈，還有后面問我如果實(shí)習(xí)能實(shí)習(xí)多久我說3個(gè)月畜号。之后第二天就收到把我簡歷”丟進(jìn)“公司人才庫的郵件了。
當(dāng)然這只是其中一部分題目允瞧，一些面試官口頭問的我當(dāng)時(shí)面試完真是超級累也忘了記錄下來简软÷危總之，感覺頭條還是會比較重視算法和新技術(shù)替饿。
