一、美團酒旅
一面：電話面試，25分鐘左右
1.TCP、IP網(wǎng)絡(luò)模型各層功能
- 網(wǎng)絡(luò)接口層：是物理接口的規(guī)劃。比特流的傳輸。數(shù)據(jù)封裝成幀
- 互聯(lián)網(wǎng)層：ip尋址或邏輯尋址
- 傳輸層：提供端到端的可靠的傳輸
- 應(yīng)用層：提供用戶的接口
2.Redux流程
- 首先，用戶發(fā)出 Action。
store.dispatch(action);
- 然后，Store 自動調(diào)用 Reducer，并且傳入兩個參數(shù)：當(dāng)前 State 和收到的 Action。 Reducer 會返回新的 State 。
let nextState = todoApp(previousState, action);
- State 一旦有變化，Store 就會調(diào)用監(jiān)聽函數(shù)。
// 設(shè)置監(jiān)聽函數(shù)
store.subscribe(listener);
- listener可以通過store.getState()得到當(dāng)前狀態(tài)。如果使用的是 React，這時可以觸發(fā)重新渲染 View。
function listerner() {
let newState = store.getState();
component.setState(newState);
}
3.移動端適配（1px線畫法）
.navTab{
border-bottom: 1px solid #eceef0;
box-shadow: 0 1px 1px #fff;
}
一種實現(xiàn)方式：先設(shè)置一個1px粗的border-bottom，這個時候在大部分移動設(shè)備上會呈現(xiàn)出很粗的線，然后再使用白色CSS陰影，并且偏移1px來壓住過粗的border-bottom線，結(jié)果就看到了一條細線產(chǎn)生。
4.元素垂直水平居中
已知寬高：
.parent{
height:200px;
width:100%;
position:relative;
border:1px solid black;
}
.child{
height:100px;
width:80%;
position:absolute;
left:10%;
top:50%;
margin-top:-50px;
border:1px solid black;
}
未知寬高：
.div2 {
position: absolute;
border: 1px solid #888;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%)
}
5.事件代理（阻止事件代理）
- 事件委托是將事件監(jiān)聽器添加到父元素，而不是每個子元素單獨設(shè)置事件監(jiān)聽器。當(dāng)觸發(fā)子元素時，事件會冒泡到父元素，監(jiān)聽器就會觸發(fā)。這種技術(shù)的好處是：
- 內(nèi)存占用減少，因為只需要一個父元素的事件處理程序，而不必為每個后代都添加事件處理程序。
- 無需從已刪除的元素中解綁處理程序，也無需將處理程序綁定到新元素上。
阻止事件代理（未完待續(xù)...）
6.DOM1，DOM2，DOM3區(qū)別
- DOM1
是W3C在1998年制定的標(biāo)準(zhǔn)，DOM1級主要定義了HTML和XML文檔的底層結(jié)構(gòu)。在DOM1中，DOM由兩個模塊組成：DOM Core（DOM核心）和DOM HTML。其中，DOM Core規(guī)定了基于XML的文檔結(jié)構(gòu)標(biāo)準(zhǔn)，通過這個標(biāo)準(zhǔn)簡化了對文檔中任意部分的訪問和操作。DOM HTML則在DOM核心的基礎(chǔ)上加以擴展，添加了針對HTML的對象和方法，如：JavaScript中的Document對象.
- DOM2
DOM2級在原來DOM的基礎(chǔ)上又擴充了鼠標(biāo)、用戶界面事件、范圍、遍歷等細分模塊，而且通過對象接口增加了對CSS的支持。DOM1級中的DOM核心模塊也經(jīng)過擴展開始支持XML命名空間。在DOM2中引入了下列模塊，在模塊包含了眾多新類型和新接口：
DOM視圖（DOM Views）：定義了跟蹤不同文檔視圖的接口
DOM事件（DOM Events）：定義了事件和事件處理的接口
DOM樣式（DOM Style）：定義了基于CSS為元素應(yīng)用樣式的接口
DOM遍歷和范圍（DOM Traversal and Range）：定義了遍歷和操作文檔樹的接口
- DOM3
DOM3進一步擴展了DOM，在DOM3中引入了以下模塊：
DOM加載和保存模塊（DOM Load and Save）：引入了以統(tǒng)一方式加載和保存文檔的方法
DOM驗證模塊（DOM Validation）：定義了驗證文檔的方法
DOM核心的擴展（DOM Style）：支持XML 1.0規(guī)范，涉及XML Infoset、XPath和XML Base
7.跨域相關(guān)
8.HTTP(頭部字段，長連接，CORS)
9.移動端開發(fā)調(diào)試
10.Git工作流程
11.數(shù)據(jù)雙向綁定
二面：面試（45分鐘）
1.CSS布局方式有哪些，每種方式有什么缺點;
2.介紹CSS盒模型以及CSS哪個屬性來設(shè)置采用哪種盒模型；
3.React 組建生命周期，什么時候應(yīng)該用 componentWillUpdate();
4.React 單頁應(yīng)用中頁面URL發(fā)生改變，頁面沒有重新刷新是什么原理；
5.ES6新特性；
6.JS 數(shù)組有哪些方法；
7.Git 常用哪些命令，git rebase是干嘛的；
8.有沒有看過 React 源碼；
9.手寫 abc-def-ghi 處理為駝峰格式 abcDefGhi
二、美團平臺酒旅
一面：
1.用promise函數(shù)實現(xiàn)類似隊列的功能
2.二叉樹 前、中、后序遍歷 ，如何用數(shù)組存儲二叉樹？
3.函數(shù)自執(zhí)行，我說了一些，面試官寫了一個 +fun()() 問我會不會執(zhí)行，我說不會，他說會。
5.前端怎么優(yōu)化
6.linux命令都知道哪些啊
二面：
1.畫react 流程圖； 解釋父子組建渲染整個流程
2.es6都知道什么？單獨問了 Reflect 和 async
3.算法：n！實現(xiàn)方法
4.字符串中大寫字母替換 如：“abcDEfC”=>“abc_d_ef_c”
回答一個算法題。。。他說應(yīng)該用replace 我很尷尬。。。說好的算法題呢
5.正則會么
6.webpack里面用到什么了啊
三面：
面試官比較忙，問了問一些成績啊。。學(xué)習(xí)路線啊。。了不了解我們啊。。。就去開會了
三、美團平臺前端開發(fā)
一面
echarts 是 echart組件還是react-echart組件，怎么把數(shù)據(jù)傳進去的；用 React-router 做什么用
url輸入到頁面展現(xiàn)
怎么由默認端口 80 找到對應(yīng)的不同的應(yīng)用程序
http 默認端口和https 默認端口
url 域名相關(guān)的問題
怎么啟動GPU加速事件機制
事件代理的好處
為什么有的事件不能進行事件代理
promise 的問題
let 的問題，塊作用域
考察css 偽類 nth-child（an+b）
頁面滾動請求數(shù)據(jù)，應(yīng)該怎么寫，怎么優(yōu)化
要我手寫了節(jié)流閥和防抖動
網(wǎng)頁訪問不到有哪些情況（404，504 講了一些……）
二面
canvas 畫圖的一些問題，都是最基礎(chǔ)，就是問怎么實現(xiàn)的，沒有追問
怎么實現(xiàn)圖片壓縮
arr=[1,2,[34,34,[34,45,[3]]]]，一個數(shù)組里面可能一層層嵌套了數(shù)組，怎么扁平化為[1,2,34,34,45,3]；
問我服務(wù)器端 websocket怎么實現(xiàn)的
