第一次大公司面試的面經(jīng)

此次面試說(shuō)來(lái)也有點(diǎn)匆忙，本沒(méi)想過(guò)自己會(huì)那么快就想去面試大公司，并且把自己第一次面大公司的各種不足展現(xiàn)得一覽無(wú)余。當(dāng)時(shí)11月20號(hào)左右身邊一位朋友給了一位人超nice的師兄的內(nèi)推，并且鼓勵(lì)我去投簡(jiǎn)歷。最終戰(zhàn)勝了自己的膽怯，投了一份簡(jiǎn)歷給內(nèi)推的師兄。一兩天后hr就打電話安排面試了。

沒(méi)想到面試是要連續(xù)著面的，當(dāng)時(shí)面花了一個(gè)多小時(shí)過(guò)了一面，再花一個(gè)小時(shí)面二面，最終也止于二面。接下來(lái)就是本文的主題了。我把當(dāng)時(shí)面試官通過(guò)牛課網(wǎng)在線面試平臺(tái)中寫(xiě)給我做的題記錄了下來(lái)，其實(shí)從面試前就打算把面試學(xué)到的東西積累下來(lái)。接下來(lái)就進(jìn)入本文的主題了，我也盡量把每一道題都寫(xiě)上我的解題思路，希望能得到大家更多更好的意見(jiàn)。

一面

一、請(qǐng)問(wèn)運(yùn)行這段代碼會(huì)輸出什么。

    let obj = {
        name: 'bytedance',
        getName() {
            return this.name
        }
    }
    let fb = obj.getName;
    fb();

A：我當(dāng)時(shí)好像是答undefined。但我知道這不會(huì)是輸出”bytedance“，因?yàn)楫?dāng)obj.getName賦給fb的時(shí)候它的this也改變了，具體可以看我之前總結(jié)了一篇JavaScript中的this的文章。然后我后來(lái)我在瀏覽器中運(yùn)行了一下代碼發(fā)現(xiàn)是輸出"" 。。。

二、設(shè)計(jì)一個(gè)簡(jiǎn)單的任務(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í)間感到自己完了，雖然也只寫(xiě)了一點(diǎn)，沒(méi)有全部做出來(lái)，然后就跳過(guò)這道題了。面試完就努力著把這道題寫(xiě)出來(lái)

    function Quene() {

        this.task = (time, callback) => {

            setTimeout(callback, time);
            // console.log(this)
            return this;
        };
        this.start = () => {
            return this;
        };

    }

雖然這樣即使最后面不用寫(xiě).start()也能打印出來(lái)。。。希望能得到指點(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;
    }

還算比較簡(jiǎn)單的算法題吧，還好當(dāng)時(shí)做出來(lái)了，不然可能就止步于此。。也希望大家能談點(diǎn)自己對(duì)這道題的解法

四、TCP協(xié)議建立連接的過(guò)程、進(jìn)程間通信的方式有哪些

TCP建立連接的過(guò)程即為三次握手，三次握手可以參考我之前發(fā)的文章，網(wǎng)上也有很多資料，這里就不細(xì)講。

至于進(jìn)程間的通信方式，當(dāng)時(shí)沒(méi)能打出來(lái)（這就涉及到我的知識(shí)盲區(qū)了【哭喪臉】），后來(lái)網(wǎng)上查了一下，有：

1. 管道pipe：管道是一種半雙工的通信方式，數(shù)據(jù)只能單向流動(dòng)，而且只能在具有親緣關(guān)系的進(jìn)程間使用。進(jìn)程的親緣關(guān)系通常是指父子進(jìn)程關(guān)系。
2. 命名管道FIFO：有名管道也是半雙工的通信方式，但是它允許無(wú)親緣關(guān)系進(jìn)程間的通信。
3. 消息隊(duì)列MessageQueue：消息隊(duì)列是由消息的鏈表，存放在內(nèi)核中并由消息隊(duì)列標(biāo)識(shí)符標(biāo)識(shí)。消息隊(duì)列克服了信號(hào)傳遞信息少、管道只能承載無(wú)格式字節(jié)流以及緩沖區(qū)大小受限等缺點(diǎn)。
4. 共享存儲(chǔ)SharedMemory：共享內(nèi)存就是映射一段能被其他進(jìn)程所訪問(wèn)的內(nèi)存，這段共享內(nèi)存由一個(gè)進(jìn)程創(chuàng)建，但多個(gè)進(jìn)程都可以訪問(wèn)。共享內(nèi)存是最快的 IPC 方式，它是針對(duì)其他進(jìn)程間通信方式運(yùn)行效率低而專門(mén)設(shè)計(jì)的。它往往與其他通信機(jī)制，如信號(hào)兩，配合使用，來(lái)實(shí)現(xiàn)進(jìn)程間的同步和通信。
5. 信號(hào)量Semaphore：信號(hào)量是一個(gè)計(jì)數(shù)器，可以用來(lái)控制多個(gè)進(jìn)程對(duì)共享資源的訪問(wèn)。它常作為一種鎖機(jī)制，防止某進(jìn)程正在訪問(wèn)共享資源時(shí)，其他進(jìn)程也訪問(wèn)該資源。因此，主要作為進(jìn)程間以及同一進(jìn)程內(nèi)不同線程之間的同步手段。
6. 套接字Socket：套解口也是一種進(jìn)程間通信機(jī)制，與其他通信機(jī)制不同的是，它可用于不同及其間的進(jìn)程通信。
7. 信號(hào) ( sinal ) ： 信號(hào)是一種比較復(fù)雜的通信方式，用于通知接收進(jìn)程某個(gè)事件已經(jīng)發(fā)生。

這里有個(gè)題外話，如果面試官問(wèn)瀏覽器窗口間的通信，那么有以下幾種：
1.localStore

localStorage.setItem("name", name); 

2.cookie + setInterval
在頁(yè)面A設(shè)置一個(gè)使用 setInterval定時(shí)器不斷刷新，檢查cookie的值是否發(fā)生變化，如果變化就進(jìn)行刷新的操作。
由于 cookie 是在同域可讀的，所以在頁(yè)面B 改變 cookie的值，頁(yè)面 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ù)組對(duì)象是什么？

剛開(kāi)始還對(duì)這個(gè)類數(shù)組感到懵逼，后來(lái)面試官一提醒函數(shù)的參數(shù)馬上領(lǐng)悟到就是偽數(shù)組。
A：只包含使用從零開(kāi)始，且自然遞增的整數(shù)做鍵名，并且定義了length表示元素個(gè)數(shù)的對(duì)象。

• function內(nèi)部的arguments對(duì)象就是一個(gè)類數(shù)組對(duì)象
• DOM方法document.getElementsByTagName()...也是返回一個(gè)類數(shù)組對(duì)象

八、什么是同源策略，為什么會(huì)有這種策略

源包括三個(gè)部分：協(xié)議、域名、端口（HTTP協(xié)議的默認(rèn)端口是80）。如果其中有任何一個(gè)部分不同，則源不同。即為跨域。
限制一個(gè)源加載的文檔或腳本與來(lái)自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。（來(lái)自MDN的解釋）

九、什么CORS

A：受同源策略的限制，支持跨域；一種新的通信協(xié)議標(biāo)準(zhǔn)。可以理解成同時(shí)支持同源和跨域的Ajax。
MDN解釋：跨域資源共享(CORS) 是一種機(jī)制，它使用額外的 HTTP頭來(lái)告訴瀏覽器 讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問(wèn)來(lái)自不同源服務(wù)器上的指定的資源。當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域、協(xié)議或端口請(qǐng)求一個(gè)資源時(shí)，資源會(huì)發(fā)起一個(gè)跨域HTTP 請(qǐng)求。

十、什么是OPTIONS請(qǐng)求

A：OPTIONS請(qǐng)求是HTTP請(qǐng)求的一種方法，返回服務(wù)器針對(duì)特定資源所支持的HTTP請(qǐng)求方法，也可以利用向web服務(wù)器發(fā)送‘*’的請(qǐng)求來(lái)測(cè)試服務(wù)器的功能性

然后一面就這樣結(jié)束了，面試官也直接跟我說(shuō)我通過(guò)了一面，我也問(wèn)了一些問(wèn)題后就結(jié)束面試了。我趕緊把平臺(tái)上的面試記錄記下來(lái)，過(guò)了幾分鐘，當(dāng)我還沉浸在通過(guò)一面的愉悅和全身心已經(jīng)放松了的情況下，發(fā)現(xiàn)手機(jī)有幾個(gè)未接電話，然后又再打進(jìn)了一個(gè)，接通電話后對(duì)方是頭條hr小姐姐，問(wèn)我說(shuō)現(xiàn)在可以二面了，二面的面試官已經(jīng)在平臺(tái)上等著了。。。好吧，這太突然了，我馬上趕赴戰(zhàn)場(chǎng)。

二面

一、fetch

A：Fetch API 提供了一個(gè)獲取資源的接口（包括跨域請(qǐng)求）。無(wú)論請(qǐng)求成功與否，它都返回一個(gè) Promise 對(duì)象；

二、用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）
通過(guò)提交或其他方式例如發(fā)布評(píng)論，其中含有HTML或JavaScript的代碼，如果服務(wù)器沒(méi)有過(guò)濾掉這些腳本，這些腳本在一些情況下就可能會(huì)運(yùn)行。

1. 避免XSS的方法之一就是過(guò)濾用戶提供的內(nèi)容，如<,>,script;
2. cookie設(shè)置HttpOnly屬性

CSRF：跨站請(qǐng)求偽造（Cross-site request forgery）
是一種劫持受信任用戶向服務(wù)器發(fā)送非預(yù)期請(qǐng)求的攻擊方式，即在用戶登陸某個(gè)平臺(tái)化拿到用戶的登陸憑證后發(fā)送偽造請(qǐng)求

1. 防范CSRF的方法之一就是通過(guò)驗(yàn)證碼
2. Referer Check，根據(jù) HTTP 協(xié)議，在HTTP頭中有一個(gè)字段叫 Referer，它記錄了該 HTTP 請(qǐng)求的來(lái)源地址。通過(guò) Referer Check，可以檢查請(qǐng)求是否來(lái)自合法的”源”。
3. 添加token驗(yàn)證，可以在 HTTP請(qǐng)求中以參數(shù)的形式加入一個(gè)隨機(jī)產(chǎn)生的token，該token不存在與cookie中，并在服務(wù)器端建立一個(gè)攔截器來(lái)驗(yàn)證這個(gè) token，如果請(qǐng)求中沒(méi)有 token或者 token 內(nèi)容不正確，則認(rèn)為可能是 CSRF攻擊而拒絕該請(qǐng)求。

四、圖片懶加載原理 （lazy image）

A：給每張圖片添加一個(gè)data-xxx的屬性用于存放圖片的src，檢測(cè)到圖片進(jìn)入視野中的時(shí)候把data-xxx的屬性賦給src
如何檢測(cè)圖片進(jìn)入視野：
a.document.documentElement.clientHeight獲取屏幕可視窗口高度
b.element.offsetTop獲取元素相對(duì)于文檔頂部的距離
c.document.documentElement.scrollTop獲取滾動(dòng)被卷去的高度
如果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. 表單上傳
   (1). 提供form表單，method必須是post。
   (2). form表單的enctype必須是multipart/form-data。
2. ajax上傳

• ajax和FormData可實(shí)現(xiàn)頁(yè)面無(wú)刷新的文件上傳效果

六、將一些ES6的新特性

可以參考之前寫(xiě)的文章，不過(guò)當(dāng)時(shí)到了后面真是精疲力竭，連let和const都沒(méi)有說(shuō)出來(lái)。。。

七、jsbridge

問(wèn)到這個(gè)概念的時(shí)候我不清楚，記得當(dāng)前前一兩天掘金剛發(fā)一篇相關(guān)的文章給我，然而當(dāng)時(shí)沒(méi)去看。。
JSBridge簡(jiǎn)單來(lái)講，主要是 給 JavaScript 提供調(diào)用 Native 功能的接口，讓混合開(kāi)發(fā)中的“前端部分”可以方便地使用地址位置、攝像頭甚至支付等Native 功能。是Native 和非 Native之間的橋梁，它的核心是構(gòu)建 Native和非Native 間消息通信的通道，而且是雙向通信的通道。

二面其中也包含一些IQ題，還有后面問(wèn)我如果實(shí)習(xí)能實(shí)習(xí)多久我說(shuō)3個(gè)月。之后第二天就收到把我簡(jiǎn)歷”丟進(jìn)“公司人才庫(kù)的郵件了。

當(dāng)然這只是其中一部分題目，一些面試官口頭問(wèn)的我當(dāng)時(shí)面試完真是超級(jí)累也忘了記錄下來(lái)?？傊?，感覺(jué)頭條還是會(huì)比較重視算法和新技術(shù)。

希望這一兩個(gè)月能夠好好把握，春招再戰(zhàn)??！