网易互娱前端一面面经（附答案）

1. git pull 、git fetch区别

git fetch 拉取远程更新，不merge
git pull 拉取远程更新并merge到本地(相当于git fetch & git merge FETCH_HEAD)

2. git merge操作

git checkout master 切换到主分支
git pull 拉取远程最新代码
git checkout yourBranch 切换自己的分支
git merge master合并主分支新内容到自己的分支

3. express洋葱模型

app.use(function middleware1(req, res, next) {
  console.log('A middleware1 开始')
  next()
  console.log('B middleware1 结束')
})

app.use(function middleware2(req, res, next) {
  console.log('C middleware2 开始')
  next()
  console.log('D middleware2 结束')
})

app.use(function middleware3(req, res, next) {
  console.log('E middleware3 开始')
  next()
  console.log('F middleware3 结束')
})

app.get('/', function handler(req, res) {
  res.send('ok')
  console.log('======= G =======')
})

// A middleware1 开始
// C middleware2 开始
// E middleware3 开始
// ======= G =======
// F middleware3 结束
// D middleware2 结束
// B middleware1 结束

            --------------------------------------
            |            middleware1              |
            |    ----------------------------     |
            |    |       middleware2         |    |
            |    |    -------------------    |    |
            |    |    |  middleware3    |    |    |
            |    |    |                 |    |    |
          next next next  ———————————   |    |    |
请求 ——————————————————> |  handler  | — 收尾工作->|
响应 <—————————————————  |     G     |  |    |    |
            | A  | C  | E ——————————— F |  D |  B |
            |    |    |                 |    |    |
            |    |    -------------------    |    |
            |    ----------------------------     |
            --------------------------------------


顺序 A -> C -> E -> G -> F -> D -> B
    \---------------/   \----------/
            ↓                ↓
        请求响应完毕        收尾工作

4. plugin和loader区别

loader译为加载器，主要用于加载资源文件，webpack默认只支持加载js文件，使用loader可以实现css,less等文件的资源转化
plugin主要用于拓展webpack的功能，例如打包压缩，定义环境变量等功能

5. axios拦截器实现

定义一个拦截器类

// 拦截器
class Interceptor {
constructor() {
  this.handlers = [];// 保存拦截器传入的回调
}
use(resolveHandler, rejectHandler) {
  this.handlers.push({
    resolveHandler,
    rejectHandler
  })
}
}
export default Interceptor

在请求前和返回结果后分别触发请求拦截和响应拦截，使用promise实现传值

/* this代表axios实例指向 */
let promise = Promise.resolve(configs);
// 触发请求拦截器内的所有回调
this.interceptors.request.handlers.forEach(handler => {
promise = promise.then(handler.resolveHandler, handler.rejectHandler);
})
// 发请求
promise = promise.then(this.dispatch, undefined);
// 触发响应拦截器所有回调
this.interceptors.response.handlers.forEach(handler => {
promise = promise.then(handler.resolveHandler, handler.rejectHandler);
})

6. 怎样捕获全站的错误

监听window点error事件

window.onerror = function (event, source, line, col, err) {
  console.log(event, '\n', source, '\n', line, '\n', col, '\n', err)
}
const a = 1;
a = 0;
//  Uncaught TypeError: Assignment to constant variable. 
//  http://127.0.0.1:5500/test.html 
//  16 
//  7 
//  TypeError: Assignment to constant variable.

7. svn和git优缺点

svn

集中式版本控制，易管理
适合人数不多的项目
不做快照的情况下所有历史版本记录都在服务器，服务器硬盘故障可能导致历史数据永久丢失
commit直接提交到中心库
必须连接在服务器上，否则基本不能工作、提交、对比、还原等
服务器压力较大

git

分布式版本控制，每个人都有一份代码和历史记录
适合多人协作
除了pull和push需要联网，其余操作均可本地完成
良好的分支机制，可以让主干代码保持干净
速度快，成熟的架构，开发灵活

8. 使用z-index失效的情况

父元素position是relative
元素是static定位
该元素设置了float浮动

9. 为什么要有同源策略

提高安全性，防止获取窃取不同源的资源实现非法操作（例如在网站中嵌入一个iframe，里面是淘宝的登陆页面，如果没有同源策略，用户登录后就可以通过操作iframe获取cookie等身份校验信息从而实现非法操作）

10. 清除float浮动

清除浮动的几种方式

.parent{
    zoom:1;
}
.parent:after{
    content:"";
    clear:both;
    display: block;
    visibility: hidden;
}

11. compute和watch哪个性能好

computed使用场景：多个数据影响一个数据
watch使用场景：一个数据影响多个数据
性能比较，哪位大神来说说

12. 计算机网络各层

通俗易懂的讲计算机网络5层结构

物理层：将各个物理设备连接起来，规定了网络电气特性，负责传送0和1的信号
链路层：确定了物理层数据分组方式，以帧为单位，每一帧包含了Head（18字节）和Data，Head中包含MAC地址等信息，在子网中以广播的形式确定接收方，若不在同一子网，则为接收端网关的MAC地址
网络层：建立主机到主机的通信，使用IP地址，以路由方式确定接收设备所在子网，以IP数据包为单位，包含Head（20-60字节）和Data，Head包含了源IP、目的IP等信息，IP数据包最大为1500字节，多出将被分组发送
传输层：建立端口到端口的通信，使用TCP或者UDP传输数据，数据包也包含Head和Data，Head中包含了标志位，源端口、目的端口等信息
应用层：规定应用程序的数据格式，应用层收到传输层的数据，根据格式使用不同的应用程序进行解读

13. `Object.keys()`和`for in`区别

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.hobbies = ['eat'];
let p = new Person;
// 不遍历原型上的属性
console.log(Object.keys(p));// [ 'name', 'age' ]
// 可遍历原型链上的可枚举属性
for (let item in p) {
  console.log(item);// name age hobbies
}

14. map和forEach区别

map可以用来遍历并返回一个由return值组成的新数组，forEach只用来遍历，返回值为undefined

let arr = [1, 2, 3];
let newArr = arr.forEach(function (item, index) {
  return item * item;
});
console.log(arr, newArr);// [ 1, 2, 3 ] undefined

arr = [1, 2, 3];
newArr = arr.map(function (item, index) {
  return item * item;
});
console.log(arr, newArr);// [ 1, 2, 3 ] [ 1, 4, 9 ]

#面经##网易互娱##前端工程师##校招#