在騰訊前端面試篇（一）中，我主要講了筆者面試騰訊一面和二面的經歷，文章得到了不錯的反響，筆者一激動大晚上把女朋友晾在一邊，寫下了第二篇，現在耳朵和膝蓋都還有點痛。第二篇會講述筆者面試騰訊的第三面，第四面會在後續的文章更新。大家看我辛苦的份上，關注一下唄！
第三面——電話面加遠端機試
這一面問的問題不多，問了一下網路相關的問題，還問了幾個智力題，其他都為機試！
來來來，廢話不說，乾貨搞起來！
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