一、美团酒旅
一面:电话面试,25分钟左右
1.TCP、IP网络模型各层功能
- 网络接口层:是物理接口的规划。比特流的传输。数据封装成帧
- 互联网层:ip寻址或逻辑寻址
- 传输层:提供端到端的可靠的传输
- 应用层:提供用户的接口
2.Redux流程
- 首先,用户发出 Action。
store.dispatch(action);
- 然后,Store 自动调用 Reducer,并且传入两个参数:当前 State 和收到的 Action。 Reducer 会返回新的 State 。
let nextState = todoApp(previousState, action);
- State 一旦有变化,Store 就会调用监听函数。
// 设置监听函数
store.subscribe(listener);
- listener可以通过store.getState()得到当前状态。如果使用的是 React,这时可以触发重新渲染 View。
function listerner() {
let newState = store.getState();
component.setState(newState);
}
3.移动端适配(1px线画法)
.navTab{
border-bottom: 1px solid #eceef0;
box-shadow: 0 1px 1px #fff;
}
一种实现方式:先设置一个1px粗的border-bottom,这个时候在大部分移动设备上会呈现出很粗的线,然后再使用白色CSS阴影,并且偏移1px来压住过粗的border-bottom线,结果就看到了一条细线产生。
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.事件代理(阻止事件代理)
- 事件委托是将事件监听器添加到父元素,而不是每个子元素单独设置事件监听器。当触发子元素时,事件会冒泡到父元素,监听器就会触发。这种技术的好处是:
- 内存占用减少,因为只需要一个父元素的事件处理程序,而不必为每个后代都添加事件处理程序。
- 无需从已删除的元素中解绑处理程序,也无需将处理程序绑定到新元素上。
阻止事件代理(未完待续...)
6.DOM1,DOM2,DOM3区别
- DOM1
是W3C在1998年制定的标准,DOM1级主要定义了HTML和XML文档的底层结构。在DOM1中,DOM由两个模块组成:DOM Core(DOM核心)和DOM HTML。其中,DOM Core规定了基于XML的文档结构标准,通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法,如:JavaScript中的Document对象.
- DOM2
DOM2级在原来DOM的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块,而且通过对象接口增加了对CSS的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。在DOM2中引入了下列模块,在模块包含了众多新类型和新接口:
DOM视图(DOM Views):定义了跟踪不同文档视图的接口
DOM事件(DOM Events):定义了事件和事件处理的接口
DOM样式(DOM Style):定义了基于CSS为元素应用样式的接口
DOM遍历和范围(DOM Traversal and Range):定义了遍历和操作文档树的接口
- DOM3
DOM3进一步扩展了DOM,在DOM3中引入了以下模块:
DOM加载和保存模块(DOM Load and Save):引入了以统一方式加载和保存文档的方法
DOM验证模块(DOM Validation):定义了验证文档的方法
DOM核心的扩展(DOM Style):支持XML 1.0规范,涉及XML Infoset、XPath和XML Base
7.跨域相关
8.HTTP(头部字段,长连接,CORS)
9.移动端开发调试
10.Git工作流程
11.数据双向绑定
二面:面试(45分钟)
1.CSS布局方式有哪些,每种方式有什么缺点;
2.介绍CSS盒模型以及CSS哪个属性来设置采用哪种盒模型;
3.React 组建生命周期,什么时候应该用 componentWillUpdate();
4.React 单页应用中页面URL发生改变,页面没有重新刷新是什么原理;
5.ES6新特性;
6.JS 数组有哪些方法;
7.Git 常用哪些命令,git rebase是干嘛的;
8.有没有看过 React 源码;
9.手写 abc-def-ghi 处理为驼峰格式 abcDefGhi
二、美团平台酒旅
一面:
1.用promise函数实现类似队列的功能
2.二叉树 前、中、后序遍历 ,如何用数组存储二叉树?
3.函数自执行,我说了一些,面试官写了一个 +fun()() 问我会不会执行,我说不会,他说会。
5.前端怎么优化
6.linux命令都知道哪些啊
二面:
1.画react 流程图; 解释父子组建渲染整个流程
2.es6都知道什么?单独问了 Reflect 和 async
3.算法:n!实现方法
4.字符串中大写字母替换 如:“abcDEfC”=>“abc_d_ef_c”
回答一个算法题。。。他说应该用replace 我很尴尬。。。说好的算法题呢
5.正则会么
6.webpack里面用到什么了啊
三面:
面试官比较忙,问了问一些成绩啊。。学习路线啊。。了不了解我们啊。。。就去开会了
三、美团平台前端开发
一面
echarts 是 echart组件还是react-echart组件,怎么把数据传进去的;用 React-router 做什么用
url输入到页面展现
怎么由默认端口 80 找到对应的不同的应用程序
http 默认端口和https 默认端口
url 域名相关的问题
怎么启动GPU加速事件机制
事件代理的好处
为什么有的事件不能进行事件代理
promise 的问题
let 的问题,块作用域
考察css 伪类 nth-child(an+b)
页面滚动请求数据,应该怎么写,怎么优化
要我手写了节流阀和防抖动
网页访问不到有哪些情况(404,504 讲了一些……)
二面
canvas 画图的一些问题,都是最基础,就是问怎么实现的,没有追问
怎么实现图片压缩
arr=[1,2,[34,34,[34,45,[3]]]],一个数组里面可能一层层嵌套了数组,怎么扁平化为[1,2,34,34,45,3];
问我服务器端 websocket怎么实现的