赶上秋招的尾巴,给大家提供一波面经。
北森还是一家很好的公司,人文氛围很好,主要做人才评测软件,目前也是处于上升势头,在这个寒冷的冬天推荐大家考虑
以下是三面的面经,请各位共赏
1. vue-diff算法
采用的是sanbdom的算法
2. react 性能优化
diff算法 ,局部更新DOM
3.Vue && React 比较
相同
使用 Virtual DOM
提供了响应式(Reactive)和组件化(Composable)的视图组件。
将注意力集中保持在核心库,有配套的路由和负责处理全局状态管理的库。
不同
- vritual DOM 的实现
Vue 的实现(fork 自 snabbdom)更加轻量 - 动画的处理
开发一个对性能要求比较高的数据可视化或者动画的应用时,你需要了解到下面这点:在开发中,Vue 每秒最高处理 10 帧,而 React 每秒最高处理不到 1 帧。
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 - 语法
在 React 中,所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。 - css的组件作用域
react组件分布在多个文件上(例如 CSS Modules)
vue css scope
- 学习成本
React 学习路线陡峭
es6的基础,jsx语法,构建系统 webpack(打包工具)
Vue 简单 降纬之后就是jquery
vue-cli 脚手架 - 架构
基于 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请求
- 如果浏览器中的origin源不在许可范围内,服务器会返回一个正常的http请求,但是回应的头信息里不带有 Access-Control-Allow-origin
浏览器接受到就知道出错了,抛出一个错误给XmlHttpRequest的 onerror回调函数; - 如果浏览器的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协议 层级 使用范围