这篇是网上找的：原文地址：blog.csdn.net/weixin_3388…

笔试

来到陌陌的时候首先会先发一套前端的笔试题，很简单。

1. 描述一下标准模式和怪异模式的区别；

DOCTYPE声明：告知浏览器如何解析和渲染文档
DTD：文档类型定义

标准模式：浏览器按W3C标准解析执行代码。
怪异模式：兼容老页面。使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

标准模式与怪异模式的区别
1）盒模型： IE下标准模式为标准w3c盒模型【content+padding+border+margin】，怪异模式为IE盒模型【content+margin：padding与border包含在content宽高中】
2）行内元素的垂直对齐：基于 Gecko 的浏览器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】标准模式对齐至基线，怪异模式对齐至底部
3）怪异模式中，IE6/7/8都不认识!important声明
4）设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
5）使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

2. 实现一个左边div宽度固定，右边div宽度自适应的布局；

<div class= "container">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
/*方法一： BFC(块级格式化上下文)*/
    .container{
        width:1000px;height:400px;border: 1px solid red;
    }
    .left{
        width:200px;height:100%;background: gray;
        float: left;
    }
    .right{
        overflow:hidden;  /* 触发bfc */
        background: green;
    }

/*方法二： flex布局 */
    .container{
        width:1000px;height:400px;border:1px solid red;
        display:flex;         /*flex布局*/
    }
    .left{
        width:200px; height:100%;background:gray;
        flex:none;
    }
    .right{
        height:100%;background:green;
        flex:1;        /*flex布局*/
    }

/* 方法三： table布局 */
    .container{
        width:1000px;height:400px;border:1px solid red;
        display:table;         /*table布局*/
    }
    .left{
        width:200px; height:100%;background:gray;
        display:table-cell;
    }
    .right{
        height:100%;background:green;
        display: table-cell;
    }

/*方法四： css计算宽度calc*/
    .container{
        width:1000px;height:400px;border:1px solid red;
    }
    .left{
        width:200px;height:100%;background:gray;
        float:left;
    }
    .right{
        height:100%;background:green;
        float:right;
        width:calc(100% - 200px);
    }
</style>

3. 在Array的原型链上实现array.prototype.inArray的方法；

4. 介绍一下各属性是什么含义；

<meta name=“viewport” content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例, 1不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

5. display: none 和 visibility: hidden的区别；

1，display：none会让元素从渲染树中消失，渲染的时候不占据任何空间；visibility：hidden不会让元素从渲染树中消失，渲染的时候仍然占据空间，只是内容不可见。
2，display：none是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过修改子孙节点的属性无法显示；visibility：hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility：visible，可以让子孙节点显示。
3，读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。

一面

1. 介绍一下自己的项目经历，可以看着自己的简历介绍(用到的技术 + 遇到的技术难点)；

用到的技术

使用Vue全家桶 + 自定义组件 + 自定义插件还原设计稿；采用Rem + 视口缩放实现移动端适配；使用预渲染技术解决SPA应用SEO问题，提升提升SPA应用体验；使用Git进行版本控制；使用Eslint + Airbnb标准统一项目编码规范。

移动端100~300ms的点击事件延迟问题
由于移动端会有双击缩放的这个操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是这次操作是不是双击。
现有的解决方案：FastClick
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

移动端触摸滑动总是不顺畅
只需要给需要滑动的盒子加上 -webkit-overflow-scrolling: touch; 样式即可

滚动穿透问题
滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。
解决方案：position: fixed

body.modal-open {

    position: fixed;

    width: 100%;

}

css的盒模型；
宽度未知的div如何实现居中，列举所有能实现的方法；
let const var的区别；
如何实现数组、对象的深拷贝，列举所有方法；
typeof undefined? typeof null?
undefined==undefined、undefined===undefined、null==null、null===null、NaN==NaN、NaN===NaN；
如何实现类；
介绍一下单例模式；
ES5如何实现单例；
ES6的class如何实现单例；
多个promise如何实现串联；
promise的all和race的区别；
介绍一下async和await；
介绍一下fetch；
用过axios吗，知道他如何做请求劫持分发吗；
Vue如何实现双向数据绑定；
Vue组件之间如何通信(父->子、子->父、兄弟之间)；
Vue如何处理数据流(Vuex，EventBus的 $emit和$ on)；
Vuex都有哪部分组成(state、mutation、action、getter)；
Vuex中mutation和action哪一个是处理异步操作的(action)；
vue-router如何处理’/xxx/a|b|c|d’这样子的路由(/xxx/:id)；
vue-router‘/xxx/:id’这样子的路由如何获取到id值；
vue-router如何做路由的跳转(标签&实例方法两种)；
对工程化有什么了解；
数据可视化，用过threejs和echarts吗;
Nodejs大概会到什么程度；
Nodejs的res.send和res.json的区别；
你有什么问题吗

还有一些问题记不太清了，问的很细，就是css->js基础->es6->框架->工程化相关->nodejs，由于我在公司css写的少所以面试官css和布局也问的比较少；

二面

二面leader说一面面的已经很不错了，二面也没啥要问的了，就聊一聊自己的情况介绍一下这个组的主要工作；

问题有点多，还没整理完，先发出来，待后续整理

陌陌前端实习面经

笔试