北森面经

赶上秋招的尾巴，给大家提供一波面经。
北森还是一家很好的公司，人文氛围很好，主要做人才评测软件，目前也是处于上升势头，在这个寒冷的冬天推荐大家考虑
以下是三面的面经，请各位共赏

1. vue-diff算法

采用的是sanbdom的算法

2. react 性能优化

diff算法 ，局部更新DOM

3.Vue && React 比较

相同

使用 Virtual DOM

提供了响应式（Reactive）和组件化（Composable）的视图组件。

将注意力集中保持在核心库，有配套的路由和负责处理全局状态管理的库。

不同

1. vritual DOM 的实现
   Vue 的实现（fork 自 snabbdom）更加轻量
2. 动画的处理
   开发一个对性能要求比较高的数据可视化或者动画的应用时，你需要了解到下面这点：在开发中，Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧。
   Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
3. 语法
   在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。
4. css的组件作用域
   react组件分布在多个文件上（例如 CSS Modules）
   vue css scope

5. 学习成本
   React 学习路线陡峭
   es6的基础，jsx语法，构建系统 webpack（打包工具）
   Vue 简单 降纬之后就是jquery
   vue-cli 脚手架
6. 架构
   基于 flux架构
   Flux将一个应用分成四个部分。
   View： 视图层
   Action（动作）：视图层发出的消息（比如mouseClick）
   Dispatcher（派发器）：用来接收Actions、执行回调函数
   Store（数据层）：用来存放应用的状态，一旦发生变动就提醒Views要更新页面
   
   1.用户访问 View
   2.View 发出用户的 Action
   3.Dispatcher 收到 Action，要求 Store 进行相应的更新
   4.Store 更新后，发出一个"change"事件
   5.View 收到"change"事件后，更新页面
   · 唯一数据源

唯一数据源指的是应用的状态数据应该只存储在唯一的一个store上。这个唯一store上的状态，是一个树形的对象，每个组件往往只是树形对象上一部分数据。

· 保持状态只读

保持状态只读，就是说不能去直接修改状态，要修改store上的状态，必须要通过派发一个action对象来完成。
· 数据改变只能通过纯函数来完成

Dispatcher 是中心枢纽，管理着 Flux 应用中的所有数据流。它本质上是 Store 的回调注册。每个 Store 注册它自己并提供一个回调函数。当 Dispatcher 响应 Action 时，通过已注册的回调函数，将 Action 提供的数据负载发送给应用中的所有 Store。

基于Mvvm架构

Models（模型） - 数据模型，用来存储数据。
View/Controller（视图） - 视图界面，用来展示UI界面和响应用户交互。
ViewModel - 链接View和Model的桥梁，处理业务逻辑，更新Model的同时刷新View。

4.性能优化

cdn加速
http请求
反向代理 负载均衡

5.代码优化

合理使用第三方库
减少复杂度
增加判断减少出错几率

6.原型

组合使用原型和构造函数模式
原型用于定义方法
构造函数 定义实例属性

原型链

实现继承的主要方式

function superType() {
  this.superProperty = true;
}
superType.prototype.getSuperValue = function  () {
  return this.superProperty;
}
function subType() {
  this.subProperty = false;
}

subType.proptotype = new superType();
使用原型链实现继承，不能使用对象字面量进行创建；否则会切断和继承原型的联系；

伪经典继承

原型式继承

function  Object(o) {
  function F() {}
    F.prototype = o;
  return new F();
  }
}

7.异步/队列

使用 setTimeout(…0)（hack）进行异步调度，基本上它的意思就是“把这个函数插入
到当前事件循环队列的结尾处”
在node中，类似的方法有
process.nextTick();

回调地狱

嵌套使异步流变得很困难，将组织变成线性，还是一样的脆弱，易受影响
需要在整个文件中跳来跳去去查看执行的步骤
如果采取硬编码
A -> B -> C -> D
采取嵌套的形式,但会使代码更加脆弱
如果B执行失败，就永远不会到达3；
再次采取硬编码考虑B执行失败的情况，重新执行B或者跳转到error处理程序
代码重复，在其他异步流无法复用;

8.promise

解决的问题：
调用的时间过早/晚
调用次数
未能传递所需的环境/参数
吞掉可能的异常/错误

调用过早

.then() 一定是异步执行的 即使当前的Promise已经决议

调用过晚

Promise创建的对象调用Resolve /Reject then() 注册的观察回调就会被自动调用

Promise本身永远不会被决议

Promise.race() 设置超时
function timeoutPromises(s) {
    return new Promise(function (resolve, reject){
        setTimeout(function () {
            reject("timeout!");
        },s)
    })
}
Promise.race(
 foo(),
 timeoutPromise(200),
).then(
    function() {},
    function(err) {},
)

可以保证一个 foo() 有一个输出信号，防止其永久挂住程序

调用次数过多或者过少

Promise 的定义方式决定他只能被调用一次
如果企图 resolve 或者 reject多次，那么只接受第一次决议，默默忽略掉后续的调用

吞掉错误或异常

如果拒绝一个 Promise 并给出一个理由（也就是一个出错消息），这个值就会被传给拒绝回调。

9.跨域

http-proxy-middleware——webpack-dev-server的实现方法其实是对这个的封装

10.proto

对象有属性__proto__,指向该对象的构造函数的原型;

11 react 生命周期

如果state的值没有发生变化，调用setState也会触发render
shoudComponentUpdate干什么用的 ？什么场景用 ？怎么用 ？
shouldComponentUpdate() 在 render() 前进行调用，接受参数 nextProps, nextState
当返回的为true时， 调用render() 函数
可以定制化

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

在处理复杂的数据对象时，会有引用相互影响的问题
Object.assign({}, preNumberArray)；
immutable.js

const { fromJS } = require('immutable')
let obj1 = fromJS({name:'李达康'}),obj2;
obj2 = obj1; //obj2取得与obj1相同的值，但两个引用指向不同的对象

12. 请求数据是异步的怎么判断拿没拿到 ？

判断ajax对象的 readyState
四个状态：
0: 未发送
1: 调用open() 未调用send()
2: 调用send(), 还未得到响应
3:已经接收到部分响应数据
4:完成，已经接收到全部响应数据

if(xhrObj.readyState == 4) {
	if((xhrObj.status > 200 && xhrObj.status < 300 )  || xhrObj.status == 304)
}

请求成功后走到 then方法，
request({
method: ‘POST’,
url: ‘’,
data: {
this.instanceID,
},
}).then((data) => {
if(data && data.msg) {
// 执行某些操作
}
})

13. redux 怎么工作的 ？

基于flux实现的；
flux中 view 对应 mvc中的view
flux中store对应 mvc中的 model
在flux， store只有 get 方法，根本不能直接去修改其内部状态；
如果view想要修改 store中的状态，需要派发一个action对象给 dispatcher
dispatch怎么分发 ？

reducer怎么处理 ？

怎么改的store里的值 ？

改完怎么进行渲染？

怎么监测？是自动的还是手动的？

redux和context区别 ？

和一些其他全局状态管理 ，如flux相比区别 ？

redux好在哪 ？
在 react-redux定义Provider的 componentWillReceiveProps()
在每次重新渲染都会调用，检查这一次渲染时代表的prop和上次是否一样，如果不一样，就会给出警告；
redux一定就是最好的吗？

14. ajax怎么跨域 ？ ——cors

cors怎么工作的 ？ origin后面怎么写 ？
origin字段是用来说明 当前请求的源 （协议+域名+端口号）
浏览器发出CORS请求

1. 如果浏览器中的origin源不在许可范围内，服务器会返回一个正常的http请求，但是回应的头信息里不带有 Access-Control-Allow-origin
   浏览器接受到就知道出错了，抛出一个错误给XmlHttpRequest的 onerror回调函数；
2. 如果浏览器的origin在许可范围内，服务器返回的响应，就会多出几个头信息字段；

如果有20url需要跨域，一个一个写吗？怎么处理 ？
使用代理， 正则匹配代理到本域名下；
如果同时请求 ，在promise中写一个循环

15.作用域链,如何形成的？

变量的作用域和作用域链在变量定义的时候就已决定了，与顺序无关

let a = 3;
function add() {
	console.info(a);
}
(function() {
	let a = 4;
	add();
}())

语句没有作用域

for(var i = 0; i< 10; i++) {}
i //10

16. js是一行一行解释执行还是一块一块？

一行一行能写个例子证明一下吗？

17.声明提升

18.最擅长的一部分 ？

19.promise缺点是什么 ？

一旦请求开始，不能取消；
不能拿到原始的XHR对象；

20.最近学习的东西

21.http2.0

增加二进制分帧是怎么回事，怎么增加的？

补充

requireJS 几种模式？

提问

业务研发部门，争取去前端架构部

二面总结

相比React数据的不可变，vue数据的可变性，你觉得有什么优缺点？
技术选型 React / Vue

生命周期

三面

this指向
let a = c{
b: function() {
console.log(this);
}
}
let a = c{
b: ()=> {
console.log(this);
}
}
网页的解析过程；
tcp/ udp协议 层级 使用范围