這一面問的問題不多，問了一下網路相關的問題，還問了幾個智力題，其他都為機試！
來來來，廢話不說，乾貨搞起來！
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分，時鐘和分鐘的夾角？
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)
} else
}let arra = a.split('').reverse(),
arrb = b.split('').reverse(),
arr = ,
carryadd = 0;
for(let i = 0; i < len; i++)
if(carryadd === 1)
return arr.reverse().join('');
}複製**
@author: even
ofo前端面試篇
今天參加了ofo的校招面試，自我感覺就是有一些東西是寫過但是沒存住，或者是說網上有現成的原始碼自己用的時候可能就是copy過來修改一下就直接用了。就答得感覺稀爛。不說了直接上題吧。一 頁面元素垂直居中 對於行內元素 若該行內元素只有一行，且該行內元素父元素的高度一定，可以設定該行內元素的line h...
前端面試總結篇（初級）
除了這兩個，關於es6的常用還有箭頭函式 模板字串 變數的解構賦值等 所謂的跨域問題是由於瀏覽器的同源策略限制的，當協議網域名稱埠號不同即為跨域，對於協議和埠來說，前端不能解決。解決跨域的幾種方式 1 資訊，伺服器收到請求，需要請求者繼續執行操作 101，公升級為websocket協議 2 成功，操...
前端面試寶典（二）
1 對web標準以及w3c的理解與認識 標籤閉合 標籤小寫 不亂巢狀 提高搜尋機械人搜尋機率。更少的 和元件，容易維護和改版，不需要變動頁面內容 列印版本而不需要複製內容，提高 的易用性。2 行內元素有哪些?塊級元素有哪些?css盒模型是什麼？塊級元素 div p h系列 form ul 行內元素 ...