騰訊前端面試篇（二）

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

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

這一面問的問題很少，問了一下網絡相關的問題，還問了幾個智力題，其餘都爲機試！

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

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

這個問題有沒有以爲很眼熟，相信不少人在面試中都遇到過，這是一道很是很是經典的面試題！面試官喜歡問，是由於這道題真的能夠考察不少方面的知識。

答案：

一、瀏覽器的地址欄輸入URL並按下回車。

二、瀏覽器查找當前URL是否存在緩存，並比較緩存是否過時。

三、DNS解析URL對應的IP。

四、根據IP創建TCP鏈接（三次握手）。

五、HTTP發起請求。

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

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

八、關閉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次。

答案

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

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

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

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

一. 用原生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