首页 > 笔经面经 > 网易互娱前端一面面经(附答案)

网易互娱前端一面面经(附答案)

头像
aeipyuan
编辑于 2020-08-02 15:24:27 APP内打开
赞 4 | 收藏 26 | 回复4 | 浏览1311

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 ] 

更多模拟面试

4条回帖

回帖
加载中...
话题 回帖

相关热帖

笔经面经近期热帖

近期精华帖

热门推荐