网易互娱前端一面面经（附答案）
1. git pull 、git fetch区别
git fetch拉取远程更新，不mergegit 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. 计算机网络各层
- 物理层：将各个物理设备连接起来，规定了网络电气特性，负责传送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 ] #面经##网易互娱##前端工程师##校招#
投递快手等公司10个岗位