騰訊前端面試篇（二）

在騰訊前端面試篇（一）中，我主要講了筆者面試騰訊一面和二面的經歷，文章得到了不錯的反響，筆者一激動大晚上把女朋友晾在一邊，寫下了第二篇，現在耳朵和膝蓋都還有點痛。第二篇會講述筆者面試騰訊的第三面，第四面會在後續的文章更新。大家看我辛苦的份上，關注一下唄！

第三面——電話面加遠端機試

這一面問的問題不多，問了一下網路相關的問題，還問了幾個智力題，其他都為機試！

來來來，廢話不說，乾貨搞起來！

1. 從輸入URL到頁面載入發生了什麼？

這個問題有沒有覺得很眼熟，相信很多人在面試中都遇到過，這是一道非常非常經典的面試題！面試官喜歡問，是因為這道題真的可以考察很多方面的知識。

答案：

1、瀏覽器的位址列輸入URL並按下回車。

2、瀏覽器查詢當前URL是否存在快取，並比較快取是否過期。

3、DNS解析URL對應的IP。

4、根據IP建立TCP連線（三次握手）。

5、HTTP發起請求。

6、伺服器處理請求，瀏覽器接收HTTP響應。

7、渲染頁面，構建DOM樹。

8、關閉TCP連線（四次揮手）。

這個問題涉及很多細節問題，這裡無法完全說清楚，筆者會在後續單獨寫一篇文章來闡述這個經典問題，讀者可以先關注一下。這裡主要說一下鵝廠大佬是如何一步步來追問我的，?。

1.1 剛剛你說到過快取，說一下快取相關的知識吧？

答案：

瀏覽器快取,HTTP快取有多種規則，根據是否需要重新向伺服器發起請求來分類，我將其分為強制快取，對比快取（協商快取）。

強制快取判斷HTTP首部欄位：cache-control，Expires。

Expires是一個絕對時間，即伺服器時間。瀏覽器檢查當前時間，如果還沒到失效時間就直接使用快取檔案。但是該方法存在一個問題：伺服器時間與客戶端時間可能不一致。因此該欄位已經很少使用。

cache-control中的max-age儲存一個相對時間。例如Cache-Control: max-age = 484200，表示瀏覽器收到檔案後，快取在484200s內均有效。如果同時存在cache-control和Expires，瀏覽器總是優先使用cache-control。

對比快取通過HTTP的last-modified，Etag欄位進行判斷。

last-modified是第一次請求資源時，伺服器返回的欄位，表示最後一次更新的時間。下一次瀏覽器請求資源時就傳送if-modified-since欄位。伺服器用本地Last-modified時間與if-modified-since時間比較，如果不一致則認為快取已過期並返回新資源給瀏覽器；如果時間一致則傳送304狀態碼，讓瀏覽器繼續使用快取。

Etag：資源的實體標識（雜湊字串），當資源內容更新時，Etag會改變。伺服器會判斷Etag是否發生變化，如果變化則返回新資源，否則返回304。

如果還有疑問，也可以檢視黑金團隊的一篇關於快取的文章，講的非常透徹，前端快取最佳實踐 。

1.2 請描述一下DNS解析的具體過程？

DNS解析是一個遞迴查詢的過程，三言兩語無法闡述清楚，大家看圖吧。

1.3 TCP是如何發起連線和關閉連線的？

答案： 這個So easy!三次握手，四次揮手唄！

1.4 你知道哪些狀態碼？

1xx：指示資訊–表示請求已接收，繼續處理。

2xx：成功–表示請求已被成功接收、理解、接受。

3xx：重定向–要完成請求必須進行更進一步的操作。

4xx：客戶端錯誤–請求有語法錯誤或請求無法實現。

5xx：伺服器端錯誤–伺服器未能實現合法的請求。 平時遇到比較常見的狀態碼有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500(分別表示什麼請自行查詢)。

1.5 剛剛你說的整個過程中，有哪些優化手段可以優化提高網頁響應速度？

分享一篇非常全面的優化的文章

2. 5點15分，時鐘和分鐘的夾角？

67.5度哈，這個是有個公式的，自己推理一波，如果不清楚可以在評論區問我。

3. 8個外表一樣的小球 其中7個球重量相同 1個球為[異常球] 可能重量比較重也可能比較輕 利用天平稱重至少多少次可以確保找出這個[異常球]，並需要知道到底是輕了還是重了。

這是一道非常有意思的題，答案為3次。

答案

一、將8個球先取四個組成A、B兩組，每組2個。

二、、將A、B組進行第一次稱，若不同重則有一組有問題。

三、將重組兩個球第二次稱，若不同重則有一個有問題。 將重組重球（若選輕球則以下結論相反）與輕組一球進行第三次稱。 若球重，則這粒為重球為異常球；若相同，則剩餘那個為輕異常球。

面試結束了，?，我們們進入筆試環節

一. 用原生js實現，要求：不能搜尋網上資源，做到元件化，時間100 min。

1. 實現一個div滑動的動畫，由快至慢5s結束（不準用css3)。

2. 頁面內有一個input輸入框，實現在陣列arr查詢命中詞並要求autocomplete效果。

題目非常簡單，但是非常考驗面試者的程式碼實現能力、設計能力，功能實現基本誰都能做到。

實話實說，筆者這道題實現的有點挫，但架不住我長得可愛?呢！所以面試官審閱了程式碼後，又給了我一次機會，你再做一題吧，這兩題答案我不太滿意！

二. 實現超出整數儲存範圍的兩個大整數相加function add(a,b)。注意a和b以及函式的返回值都是字串。

這道題筆者倒是輕鬆的完成了，直接上程式碼。

function add (a, b) {
    let lenA = a.length,
        lenB = b.length,
        len = lenA > lenB ? lenA : lenB;

    // 先補齊位數一致
    if(lenA > lenB) {
        for(let i = 0; i < lenA - lenB; i++) {
            b = '0' + b;
        }
    } else {
        for(let i = 0; i < lenB - lenA; i++) {
            a = '0' + a;
        }
    }

    let arrA = a.split('').reverse(),
        arrB = b.split('').reverse(),
        arr = [],
        carryAdd = 0;

    for(let i = 0; i < len; i++) {
        let temp = Number(arrA[i]) + Number(arrB[i]) + carryAdd;
        arr[i] = temp > 9 ? temp - 10 : temp;
        carryAdd = temp >= 10 ? 1 : 0;
    }

    if(carryAdd === 1) {
        arr[len] = 1;
    }

    return arr.reverse().join('');
    
}
複製程式碼

結語

三面就這樣愉快的結束了，筆者可以開開心心給女朋友煮水餃嘍！祝大家冬至快樂！

下一篇

@author: Even