頭條平常實習生面經2018.11.28

第一次大公司面試的面經

這次面試說來也有點匆忙，本沒想過本身會那麼快就想去面試大公司，而且把本身第一次面大公司的各類不足展示得盡收眼底。當時11月20號左右身邊一位朋友給了一位人超nice的師兄的內推，而且鼓勵我去投簡歷。最終打敗了本身的膽怯，投了一份簡歷給內推的師兄。一兩天後hr就打電話安排面試了。

沒想到面試是要連續着面的，當時面花了一個多小時過了一面，再花一個小時面二面，最終也止於二面。接下來就是本文的主題了。我把當時面試官經過牛課網在線面試平臺中寫給我作的題記錄了下來，其實從面試前就打算把面試學到的東西積累下來。接下來就進入本文的主題了，我也儘可能把每一道題都寫上個人解題思路，但願能獲得你們更多更好的意見。

一面

1、請問運行這段代碼會輸出什麼。

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

A：我當時好像是答undefined。但我知道這不會是輸出」bytedance「，由於當obj.getName賦給fb的時候它的this也改變了，具體能夠看我以前總結了一篇JavaScript中的this的文章。而後我後來我在瀏覽器中運行了一下代碼發現是輸出"" 。。。

2、設計一個簡單的任務隊列，要求分別在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：講真，看到這道題的時候我第一時間感到本身完了，雖然也只寫了一點，沒有所有作出來，而後就跳過這道題了。面試完就努力着把這道題寫出來

function Quene() {

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

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

    }

雖然這樣即便最後面不用寫.start()也能打印出來。。。但願能獲得指點Q_Q

3、給定一個升序整數數組[0,1,2,4,5,7,13,15,16]，找出其中連續出現的數字區間以下：

["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;
    }

還算比較簡單的算法題吧，還好當時作出來了，否則可能就止步於此。。也但願你們能談點本身對這道題的解法

4、TCP協議創建鏈接的過程、進程間通訊的方式有哪些

TCP創建鏈接的過程即爲三次握手，三次握手能夠參考我以前發的文章，網上也有不少資料，這裏就不細講。

至於進程間的通訊方式，當時沒能打出來（這就涉及到個人知識盲區了【哭喪臉】），後來網上查了一下，有：

1. 管道pipe：管道是一種半雙工的通訊方式，數據只能單向流動，並且只能在具備親緣關係的進程間使用。進程的親緣關係一般是指父子進程關係。
2. 命名管道FIFO：有名管道也是半雙工的通訊方式，可是它容許無親緣關係進程間的通訊。
3. 消息隊列MessageQueue：消息隊列是由消息的鏈表，存放在內核中並由消息隊列標識符標識。消息隊列克服了信號傳遞信息少、管道只能承載無格式字節流以及緩衝區大小受限等缺點。
4. 共享存儲SharedMemory：共享內存就是映射一段能被其餘進程所訪問的內存，這段共享內存由一個進程建立，但多個進程均可以訪問。共享內存是最快的 IPC 方式，它是針對其餘進程間通訊方式運行效率低而專門設計的。它每每與其餘通訊機制，如信號兩，配合使用，來實現進程間的同步和通訊。
5. 信號量Semaphore：信號量是一個計數器，能夠用來控制多個進程對共享資源的訪問。它常做爲一種鎖機制，防止某進程正在訪問共享資源時，其餘進程也訪問該資源。所以，主要做爲進程間以及同一進程內不一樣線程之間的同步手段。
6. 套接字Socket：套解口也是一種進程間通訊機制，與其餘通訊機制不一樣的是，它可用於不一樣及其間的進程通訊。
7. 信號 ( sinal ) ： 信號是一種比較複雜的通訊方式，用於通知接收進程某個事件已經發生。

這裏有個題外話，若是面試官問瀏覽器窗口間的通訊，那麼有如下幾種：
1.localStore

localStorage.setItem("name", name);

2.cookie + setInterval
在頁面A設置一個使用 setInterval 定時器不斷刷新，檢查 cookie 的值是否發生變化，若是變化就進行刷新的操做。
因爲 cookie 是在同域可讀的，因此在頁面 B 改變 cookie 的值，頁面 A 是能夠拿到的。

5、用純CSS建立一個三角形的原理是什麼？如何實現？

A：用CSS建立一個三角形的原理是分別設置上下左右的border屬性，中間內容爲0面積。實現：

#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;
}

6、0.1 + 0.2 > 0.3 返回什麼？

A：true。分別轉成2進制。

7、類數組對象是什麼？

剛開始還對這個類數組感到懵逼，後來面試官一提醒函數的參數立刻領悟到就是僞數組。
A：只包含使用從零開始，且天然遞增的整數作鍵名，而且定義了length表示元素個數的對象。

• function內部的arguments對象就是一個類數組對象
• DOM方法document.getElementsByTagName()...也是返回一個類數組對象

8、什麼是同源策略，爲何會有這種策略

源包括三個部分：協議、域名、端口（HTTP協議的默認端口是80）。若是其中有任何一個部分不一樣，則源不一樣。即爲跨域。
限制一個源加載的文檔或腳本與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。（來自MDN的解釋）

9、什麼CORS

A：受同源策略的限制，支持跨域；一種新的通訊協議標準。能夠理解成同時支持同源和跨域的Ajax。
MDN解釋：跨域資源共享(CORS) 是一種機制，它使用額外的 HTTP 頭來告訴瀏覽器 讓運行在一個 origin (domain) 上的Web應用被准許訪問來自不一樣源服務器上的指定的資源。當一個資源從與該資源自己所在的服務器不一樣的域、協議或端口請求一個資源時，資源會發起一個跨域 HTTP 請求。

10、什麼是OPTIONS請求

A：OPTIONS請求是HTTP請求的一種方法，返回服務器針對特定資源所支持的HTTP請求方法，也能夠利用向web服務器發送‘*’的請求來測試服務器的功能性

而後一面就這樣結束了，面試官也直接跟我說我經過了一面，我也問了一些問題後就結束面試了。我趕忙把平臺上的面試記錄記下來，過了幾分鐘，當我還沉浸在經過一面的愉悅和全身心已經放鬆了的狀況下，發現手機有幾個未接電話，而後又再打進了一個，接通電話後對方是頭條hr小姐姐，問我說如今能夠二面了，二面的面試官已經在平臺上等着了。。。好吧，這太忽然了，我立刻趕赴戰場。

<hr/>

二面

1、fetch

A：Fetch API 提供了一個獲取資源的接口（包括跨域請求）。不管請求成功與否，它都返回一個 Promise 對象；

2、用Promise實現延遲3秒後輸出 delay(3000).then(f,e)

A:

function delay(timer) {
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve();
            }, timer)
        })
    }

3、XSS/CSRF

XSS：跨站腳本（Cross-site scripting）
經過提交或其餘方式例如發佈評論，其中含有HTML或JavaScript的代碼，若是服務器沒有過濾掉這些腳本，這些腳本在一些狀況下就可能會運行。

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

CSRF：跨站請求僞造（Cross-site request forgery）
是一種劫持受信任用戶向服務器發送非預期請求的攻擊方式，即在用戶登錄某個平臺化拿到用戶的登錄憑證後發送僞造請求

1. 防範CSRF的方法之一就是經過驗證碼
2. Referer Check，根據 HTTP 協議，在HTTP 頭中有一個字段叫 Referer，它記錄了該 HTTP 請求的來源地址。經過 Referer Check，能夠檢查請求是否來自合法的」源」。
3. 添加token驗證，能夠在 HTTP 請求中以參數的形式加入一個隨機產生的token，該token不存在與cookie中，並在服務器端創建一個攔截器來驗證這個 token，若是請求中沒有 token 或者 token 內容不正確，則認爲多是 CSRF 攻擊而拒絕該請求。

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

A：給每張圖片添加一個data-xxx的屬性用於存放圖片的src，檢測到圖片進入視野中的時候把data-xxx的屬性賦給src
如何檢測圖片進入視野：
a.document.documentElement.clientHeight獲取屏幕可視窗口高度
b.element.offsetTop獲取元素相對於文檔頂部的距離
c.document.documentElement.scrollTop獲取滾動被捲去的高度
若是b-c<a成立則元素進入可視區域
這裏我還提到一個函數節流提升性能：

var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判斷是否已空閒，若是在執行中，則直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        // 這裏加載圖片
        console.log("函數節流");
        canRun = true;
    }, 500);
};

5、上傳圖片

1. 表單上傳

(1). 提供form表單，method必須是post。
(2). form表單的enctype必須是multipart/form-data。

1. ajax上傳

• ajax和FormData可實現頁面無刷新的文件上傳效果

6、將一些ES6的新特性

能夠參考以前寫的文章，不過當時到了後面真是精疲力竭，連let和const都沒有說出來。。。

7、jsbridge

問到這個概念的時候我不清楚，記得當前前一兩天掘金剛發一篇相關的文章給我，然而當時沒去看。。
JSBridge 簡單來說，主要是 給 JavaScript 提供調用 Native 功能的接口，讓混合開發中的「前端部分」能夠方便地使用地址位置、攝像頭甚至支付等Native 功能。是 Native 和非 Native 之間的橋樑，它的核心是構建 Native 和非 Native 間消息通訊的通道，並且是雙向通訊的通道。

二面其中也包含一些IQ題，還有後面問我若是實習能實習多久我說3個月。以後次日就收到把我簡歷」丟進「公司人才庫的郵件了。

固然這只是其中一部分題目，一些面試官口頭問的我當時面試完真是超級累也忘了記錄下來。總之，感受頭條仍是會比較重視算法和新技術。

但願這一兩個月可以好好把握，春招再戰！！