1.了解vue和react吗？介绍一下。

vue和react都是主流的框架。

vue : 脚手架vue-cli、路由vue-router、状态管理工具vue-vuex。

react : 脚手架react-cli、路由react-router、状态管理工具react-redux。

二者区别：

1、生命周期不同。

2、模板和JSX。写法不同，react：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写；Vue.js 使用了基于 HTML 的模版语法。

3、状态管理机制不同。vuex redux

2.说一下vue动态路由。

而能传递参数的路由模式，由于可以传递参数，所以其对应的路由数量是不确定的，故称之为 动态路由。那么动态路由如何传递参数？

路由传参： path: '/detail/:id',

<router-link :to ="{params :{id:1}}" >            <div>首页</div>          </router-link>

如何把参数读取出来？路由参数是被设置到 this.$route.params 中的，想取到这个值，用 this.$route.params.id 就可以了。

3.你认为react 中setState是同步还是异步的？

setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。

合成事件：就是react 在组件中的onClick等都是属于它自定义的合成事件

原生事件：比如通过addeventListener添加的，dom中的原生事件

4.react中如何立马拿到最新的数据？

首先react得setdata更新数据是异步的 。

这点我们上课讲过的，也演示过，（setdata之后，在后面输出得到的还是旧数据）

如果想拿到新数据有两种方法：

1.加一个settimeout

2.setdata方法第一个参数是对象，第二个参数是一个回调函数callback，在回调函数中可以拿到最新数据（#字棋）游戏有讲过

5.vue双向绑定，以及原理。 (vue的响应式原理)

v-model : Object.defineProperty()

它可以允许我们对象设定getter、setter、从而可以劫持用户对对象属性的取值和赋值。

6.发布订阅者模式、观察者模式

发布订阅模式：指的是希望接收通知的对象（Subscriber）基于一个主题通过自定义事件订阅主题，被激活事件的对象（Publisher）通过发布主题事件的方式通知           

观察者模式定义：Subject维持一系列它的对象Observer,当有关状态发生变更时Subject对象则会通知一系列Observer对象进行更新。

7.了解vuex吗？详细描述下。

它是vue的状态管理工具。

state：存储数据的状态

mutation: 存储数据状态的同步方法

action: 存储数据的异步方法

module: 模块的管理

8.vue store 的特点。

store存储的数据和方法是全局的，在任一组件和页面中都能调用。

9.三次握手知道吗？说一下。

1.客户端发送了一个Tcp报文到服务器，表示客户端想要和服务端建立连接。

2.服务端接收到客户端的请求，返回客户端报文，询问客户端是否准备好

3.客户端再次响应服务端一个报文，表示我已经准备好

10.了解浏览器重绘和回流吗？

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。   

注：回流必将引起重绘，而重绘不一定会引起回流 

11.了解防抖和节流吗？讲讲？具体项目中怎么实现的。

加一个延时器setTimeOut()，在延时器例发起请求，再一段时间内如果再次请求就清除延时器。

例子：（输入框、下拉刷新）

12.原型、构造函数、new实例之间的关系。

1、构造函数的prototype所指的就是它关联的原型对象，而原型对象可以通过构造器constructor来寻找与自身关联的构造函数，所以就有M.prototype.conctructor===M。

2、构造函数可以new一个实例对象

13.你了解的vue指令有哪些？

v-model ：双向绑定

v-bind:单向绑定

v-on: 时间绑定 可以缩写为@

v-show ：显示隐藏

v-if ：条件渲染

v-for ：遍历（列表渲染）

14.判断一个数据的类型的方法？（最好还是一下子全答完）

typeof()

instanceof: 判断一个实例是否是某个对象的

constructor：constructor是prototype对象上的属性，指向构造函数。

15.会数组去重吗？怎么实现？

遍历去重

遍历数组、判断是否相同，删除后一个。

set方法

var arr = [1,2,2,3,4]            // 需要去重的数组   

var set = new Set(arr)          // {1,2,3,4}                                 

var newArr = Array.from(set)      // 再把set转变成array                       

console.log(newArr)            // [1,2,3,4]

16.ES6新特性说一下？

箭头函数

结构赋值

...对象展开运算符

let / const

set方法

17.你说一下let和const。

let和const都是块级作用域，定义一个局部变量

let 常用于定义变量

const常用于定义一个常量

18.你说一下箭头函数，及其特点。

箭头函数是ES6的新特性，它的特点有：

1、this指向：它没有this指向，它指向箭头函数外的对象

2、箭头函数没有原型属性

3、箭头函数不能当做构造函数，不能使用new命令

19.margin 外边距重叠怎么处理？

给其父标签添加一个css样式：overflow:hidden

20.说一下flex布局。

弹性布局的方向

弹性布局的主轴、侧轴以及布局

21.vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。

也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。

beforeCreate ， created ， beforeMount ，mounted ，beforeUpdate，updated，activated，deactivated，beforeDestroy，destroyed

22.深拷贝，浅拷贝，以及他们的区别。

1、浅拷贝会改变原数组或者对象；深拷贝不会改变原数组或者对象。

2、浅拷贝的例子：遍历数组arr1，将arr[i]依次赋值给空数组arr2，改变arr2中的值，arr1会随之改变

3、深拷贝的例子：

JSON.stringfy JSON.parse

Object.assign

递归

23.MVVM框架是什么？

MVVM是Model-View-ViewModel的缩写

Model代表数据模型，负责业务逻辑和数据封装

View代表UI组件，负责界面和显示

ViewModel监听模型数据的改变和控制视图行为，处理用户交互，简单来说就是通过双向数据绑定把View层和Model层连接起来。

在MVVM架构下，View和Model没有直接联系，而是通过ViewModel进行交互，我们只关注业务逻辑，不需要手动操作DOM，不需要关注View和Model的同步工作。

24.prototype和__proto__的关系是什么？

prototype和__proto__都指向原型对象，但是又有些不同

1、任意一个函数（包括构造函数）都有一个prototype属性，指向该函数的原型对象

2、任意一个构造函数实例化的对象，都有一个__proto__属性，可通过Object.getPrototypeOf()标准方法访问该属性

25.meta viewport原理是什么？

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

26.域名收敛是什么？

（1）域名收敛：就是将静态资源放在一个域名下。减少DNS解析的开销。

域名收敛多用与移动端，提高性能，因为dns解析是是从后向前迭代解析，如果域名过多性能会下降，增加DNS的解析开销。

（2）域名发散：是将静态资源放在多个子域名下，就可以多线程下载，提高并行度，使客户端加载静态资源更加迅速。

域名发散是pc端为了利用浏览器的多线程并行下载能力。

27.float和display:inline-block的区别是什么？

float和display:inline-block都可以使元素排为一行，二者的区别是

Float需要清除浮动，display:inline-block还需要设置纵向对齐方式

28.前端优化策略列举

1、压缩CSS代码

2、图片懒加载

3、减少HTTP请求

29.首屏、白屏时间如何计算？

数据未加载出来，

responseStart - navigationStart

30.解释一下闭包

当一个函数的返回值是另一个函数，而返回的那个函数如果调用了其复函数内部的其他变量，如果返回的这个函数在外部被执行，就产生了闭包。

31.解释一下作用域链

函数内部A可以用外部全局的变量，这个函数A内的函数B也可以用函数A内部的变量，这样就形成了一个作用域链。

32.ajax如何实现，readyState的五种状态的含义？

 (1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.   (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.   (3)设置响应HTTP请求状态变化的函数.   (4)发送HTTP请求.   (5)获取异步调用返回的数据.   (6)使用JavaScript和DOM实现局部刷新.

readyState属性五种状态的含义：

0 － （未初始化）还没有调用send()方法

1 － （载入）已调用send()方法，正在发送请求 

2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 

3 － （交互）正在解析响应内容 

4 － （完成）响应内容解析完成，可以在客户端调用了

33.jsonp如何实现？

手动插入一个script标签，为script的src属性制定一个跨域请求的URL，script可以拿到外部资源。

34.怎么处理跨域？

1、配置服务器代理

2、设置请求头

3、JSOP

35.restful的method解释？

36.get和post的区别？

1、get请求的数据放在url后面，post请求放在请求体中

2、get请求是不安全的，post请求是不安全的

37.事件模型解释

38.编写一个元素拖拽的插件

39.CSS，JS代码压缩，以及代码CDN托管，图片整合

（1）CSS,JS 代码压缩：可以应用gulp的gulp-uglify，gulp-minify-css模块完成；可以应用webpack的 UglifyJsPlugin压缩插件完成。

（2）内容分发网络(CDN)：是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。主要特点有：本地Cache加速，镜像服务，远程加速，带宽优化。关键技术有：内容发布，内容路由，内容交换，性能管理。

（3）图片整合：减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。缺点是可维护性差。

40.如何利用webpack把代码上传服务器以及转码测试？

可以使用gulp +webpack来实现。

41.项目上线流程是怎样的？

(1)模拟线上的开发环境

(2)模拟线上的测试环境

(3)可连调的测试环境

(4)自动化的上线系统

(5)适合前后端的开发流程

42.工程化怎么管理的?

gulp打造前端工程化方案，同时引入webpack来管理模块化代码，大致分工如下： 

gulp：处理html压缩/预处理/条件编译，图片压缩，精灵图自动合并等任务

webpack：管理模块化，构建js、css。

43.webpack 和 gulp的对比， webpack打包文件太大怎么办?

1、Gulp侧重于前端开发的整个过程 的控制管理（像是流水线）；Webpack有人也称之为模块打包机 

2、可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存  几个方面着手优化。

44.不想让别人盗用你的图片，访问你的服务器资源该怎么处理？

(1)  设置Referer

(2)  签名URL

45.精灵图和base64如何选择？

css精灵，用于一些小的图标不是特别多，一个的体积也稍大，比如大于10K (这个没有严 格的界定）。

base64,用于小图标体积较小（相对于css精灵），多少都无所谓。

字体图标，用于一些别 人做好的图标库（也有少数自己去做的）用起来比较方便，他的图标只能用于单色，图标用 只能于一种颜色。

46.webpack怎么引入第三方的库？

首先，配置一个entry入口文件，然后new 一个 HtmlWebpaekPlugin，通过script标签把第三方库引入进来

47.如果线上出现bug，git怎么操作？

方法1：在当前主分支修改bug，修改完bug后提交修改；

方式2：拉一个新分支，充分利用了git特性先暂存一下工作空间改动；

48.用过Nginx吗？都用过哪些？

nginx是一个高性能的HTTP和反向代理服务器。 

常使用场景：(1)   反向代理(2)   网站负载均衡

49.UI Web View 和 JavaScript之间是怎么交互的?

好像是IOS,了解过，不过

50.混合开发桥接api是怎么调用的，需要引入类库嘛?调用的对象是什么?

51.说一下你对支付，推送（远程，本地）的理解

52.什么是代理和通知，写一下他们基本的实现方

53.UIViewController的生命周期

54.rem布局字体太大怎么处理?

使用注意：html字体大小被设置为100px,所以1rem=100px;使用时14px=0.14rem，都是小数。iPhone6基础上预览设计

55.如何调用原生的接口？

56.微信支付怎么做？说说流程

57.混合开发的注意点

58.说说你对手机平台的安装包后缀的理解

59.谈谈你对Socket编程的理解，及实现原理，Socket之间是怎么通讯的

即时通信

不需要请求，服务器主动给客户端发送数据

60.WEB应用从服务器主动推送Data到客户端有哪些方式?

1. html5 websocket

2. WebSocket 通过 Flash

3. XHR长时间连接

4. XHR Multipart Streaming

5. 不可见的Iframe

6. <script>标签的长时间连接(可跨域)

61.简述Node.js的适用场景？

RESTFUL restful API、实时聊天、客户端逻辑强大的单页APP，具体的例子比如说：本地化的在线音乐应用，本地化的在线搜索应用，本地化的在线APP等。

62.什么是HTTPS，做什么用的呢？如何开启HTTPS？

HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议要比http协议安全 。

第一步，生成并提交CSR（证书签署请求）文件

第二步，CA机构进行验证

第三步，CA机构颁发证书

63.你们原来公司如何发送的新消息推送？

64.如何用NodeJS搭建中间层？

65.vue与react的对比,如何选型？从性能，生态圈，数据量，数据的传递上，作比较

66.vue slot是做什么的?

插槽。如果想在组件中添加内容，可以设置插槽。

插槽 分为 无名插槽和有名插槽。

67.vue和angular的优缺点以及适用场合？

vue

优点： 1. 简单：官方文档很清晰，比 Angular 简单易学。

2. 快速：异步批处理方式更新 DOM。

  3. 组合：用解耦的、可复用的组件组合你的应用程序。

  4. 紧凑：~18kb min+gzip，且无依赖。

  5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。

  6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

　 缺点：

1. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。

2. 不支持IE8

3. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。

应用场景：小型应用

angularJS：

优点：

1. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；　　　　　 

2. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。味着他有一个坚实的基础和社区支持。

3.  模板功能强大丰富，自带了极其丰富的angular指令。

4. 自定义指令，自定义指令后可以在项目中多次使用。

5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

　缺点：

1. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.　　 

      2. angular 入门很容易 但深入后概念很多, 学习中较难理解　　 

      3. DI 依赖注入 如果代码压缩需要显示声明.

      4. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.

      5. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作

应用场景：在大型超大型web应用开发上。

React

优点： 

1.速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。 

2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。 

3.模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。 

4.单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。 

5.同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。 

6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

缺点:

React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

应用场景：个性化需求、中型应用

68.vue路由实现原理?

前端路由是直接找到与地址匹配的一个组件或对象，并将其渲染出来。

69.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

根据vue-cli脚手架规范，一个js文件，一个CSS文件。

70.vue遇到的坑，如何解决的？

输入框抖动

加延时器防抖

71.vue的双向绑定的原理，和angular的对比？

Object.defineproperty()  

通过设置对象属性的setter方法、getter方法来对对象取值和赋值

72.vue-cli，脚手架

1.nodemodules文件夹：模块包

2.packjson.js 配置文件

3.app.vue  主页面

4.main.js 入口文件

5.router.js配置路由

7.store.js配置数据状态管理

8.src文件夹：view页面、components组件、store（数据的状态、同步、异步方法）

73.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

换成a标签，或者通过点击事件js跳转