前言
第一次视频面试，十分紧张。不过还好面试官没有一开始就问很难的问题，答得上来的题目尽量回答的全面，答不上来的题目我说我不太了解面试官也不会继续追问。而且我发现一面面试官会根据你回答的内容，把你回答的某个知识点抓住，然后继续追问，直到你回答不了为止。（这可能就是挖深度吧）
一进来面试官要我做一个简单的自我介绍，介绍完身份之后又问我平时是怎么学习技术的，我说是看视频居多，最近也在看那本红宝书《javascript 高级程序设计》。
记录一下面试过程和面试题目，查漏补缺。
面试时长：1小时，以下是能记起来的全部问题
1.看了你的简历，你在项目中使用了vue，说下为什么学习 vue
2.你刚刚说了angular的controller，了解过MVC吗，说下对MVC的理解
3.vue的生命周期
4.*vue的虚拟dom
5.*说下vue里面的 computed 和 watch 的区别
6.你项目里面用了 gulp ，描述一下还有哪些提高http 请求速度的方法
7.*那你有了解过http缓存机制吗
8.了解闭包吗，简单实现一个闭包
9.盒子模型
10.*你有了解过 视口 meta 元标签
11.*http协议你了解多少，描述一下 http的报文头 和 http 的报文体
12.说一下你知道的http的状态码
13.*你说3开头的一般是重定向，那你有了解过 301 和 302 吗？
14.get和post的区别
15.你有了解过 webpack 吗，或者说你有配置过 webpack吗？
16.你觉得 babel 是什么？
17.说一下你对 最新的ES 相关技术的了解
18.*说一下箭头函数和普通函数的区别
19.*new 一个 箭头函数可以吗，为什么
20.new 一个对象的过程
21.*讲述一下__proto__ 和 prototype 的区别
22.你了解过 setTimeout 的原理吗？
23.*promise 和 setTimeout 的区别（微队列和宏队列）
24.写一段 promise 和 setTimeout 的代码，问你输出结果
25.js 的基本数据类型
26.*算法：字符串的最大非重复子串长度
27.写一段代码，要求说出他的输出内容(原型和原型链)
题目
1.看了你的简历，你在项目中使用了vue，说下为什么学习 vue
第一题问这个让我有点懵，还好想出点合理的理由：首先作者是中国人，对其比较感兴趣，其次是vue的学习曲线相比其他框架比较缓和。这里我将angular 和 vue 做对比，我说 angular 我之前学过，当时基础不好，学不会，我只依稀记得 angular 还要写 controller 之类的。面试官一听到 controller 就问我下一个问题了。
2.你刚刚说了angular的controller，了解过MVC吗，说下对MVC的理解
MVC：Model View Controller。Model 指 模型，用于存储数据；View 指 视图，用于展示数据；Controller 指 控制器，用于调用其他子服务，使Model 和 View 解耦合。Model 和 view 不直接通信，而是通过controller 联系起来，Controller 相当于 外观模式的应用。
3.vue的生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
其中 created 和 mounted 比较重要，一个是data数据和事件的初始化，一个是html 模板 挂载渲染到页面完毕
4.*vue的虚拟dom
这里我说：虚拟DOM是 实际DOM的一个js对象副本，当实际DOM发生变化的时候，会进行差异计算，具体里面是怎么实现的我不是很了解，面试官也没有继续追问了。
参考文章：https://blog.csdn.net/m6i37jk/article/details/78140159
5.*说下vue里面的 computed 和 watch 的区别
computed 计算属性，watch 监听变化
区别是
computed 是计算值
应用：简化 template 里面 {{}} 的计算和处理 props 或 $emit 的传值
具有缓存性，页面重新渲染值不计算，只有当被计算的值发生变化才计算
watch 是观察值是否发生变化
应用：监听 props，$emit 或本组件的值执行异步操作
无缓存性，页面重新渲染就算值不变化也会执行
watch 里面还要注意下 immediate 和 deep 属性
watch与computed的区别是：
watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等；
而computed适用于计算已有的值并返回结果
参考文章：https://segmentfault.com/a/1190000012948175?utm_source=tag-newest#articleHeader10
https://blog.csdn.net/lhban108/article/details/82465547
6.你项目里面用了 gulp ，描述一下还有哪些提高http 请求速度的方法
CDN(content delivery network)内容分发网络；我忘记了还有 http 缓存机制 缓存静态文件，于是就有了下面一题
7.*那你有了解过http缓存机制吗
浏览器会根据 缓存资源是否存在，存在的话是否过期 来决定是否请求服务器返回 资源。概要地说就是 浏览器可以通过 http请求的报文头 里面的内容，确定资源的 是否缓存，缓存时长，缓存截止日期等。
如：Cache-Control: public || private || no-cache , 秒数 || no-store
Expires: 截止日期
Last-Modified: 资源最后修改时间
If-Modified-Since: 询问服务器当前缓存的资源是否已经过期，如果没有过期，返回 304
参考文章：https://www.cnblogs.com/yangxiao/p/5099788.html
8.了解闭包吗，简单实现一个闭包
我理解的闭包是：子函数执行时能调用父函数域的变量，并且这些变量不会被内存回收。可能由于解释不清楚，面试官让我实现一个 闭包。
MDN：闭包：闭包是函数和声明该函数的词法环境的组合。
实现的闭包：
function add1() {
var a = 1;
return function(b) {
return a + b;
}
}
var add = add1();
console.log(add(2));9.盒子模型
盒子模型是css的概念不过我好像说成了html里面的元素，盒子模型即 网页设计中元素的 内容，内边距，边框，外边距 组成了盒子的宽和高。
10.*你有了解过 视口 meta 元标签
我说我了解到 meta 可以设置 视口，设置编码。但是对这不是特别了解。面试官没有继续追问，但是感觉面试官重点 想要了解我对 移动web 的了解。
参考文章：https://www.html.cn/archives/5975
11.*http协议你了解多少，描述一下 http 的报文头 和 http 的报文体
我说我不是特别了解，我了解 http 报文头的状态码，于是就有了下一个问题。
http 协议内容颇多：
http 报文头（分 请求报文 和 响应报文）：
Accept: 代表发送端（客户端）希望接受的数据类型。如：image/gif,image/x-xbit,... (CRLF)
有第7题中描述到的 资源缓存 相关属性
Content-Length，Host 等等
http 报文体：
一般为传输的 数据 键值对
参考文章：https://www.cnblogs.com/lzq198754/p/5780310.html
12.说一下你知道的http的状态码
200 请求资源成功
400 客户端请求格式错误
403 需要客户端身份验证
404 请求资源不存在
413 请求资源过大
500 服务器端错误
3xx 一般为重定向
参考文章：http://tool.oschina.net/commons?type=5
由于我说了 3开头的一般为重定向，于是又有了下面这一题
13.*你说3开头的一般是重定向，那你有了解过 301 和 302 吗？
301：被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。
302：请求的资源现在临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。
14.get和post的区别
get 参数直接放在 url 里面，并且传输的 参数的大小受不同浏览器限制，也不安全，毕竟直接暴露在 url 中，其值只能为字符串。
post 参数在报文体中，传输的容量比 get 大，参数不暴露出来相对安全。
其实还有，安全性和幂等性。。。
参考文章：https://www.cnblogs.com/logsharing/p/8448446.html
15.你有了解过 webpack 吗，或者说你有配置过 webpack吗？
我说有，webpack 是一个 打包工具。我很久以前配置过，通常配置 babel 和 loader 之类的。
面试官追问。
16.你觉得 babel 是什么？
babel 类似于一个编译器，是一个解释器，可以将 ES6 的语法 转换成 ES5的语法输出。
17.说一下你对 最新的ES 相关技术的了解
我说了下 ES6 ，解构赋值、 let const 、块级作用域 、箭头函数 、promise。刚想继续说 ES7 ,面试官抛出下一问
18.*说一下箭头函数和普通函数的区别
我了解 箭头函数 和 普通函数 的 this 指向不同，没有答到点上或者答完全，于是抛出下一题
答案：
（1）箭头函数是匿名函数，不能作为构造函数，不能使用new
（2）箭头函数不绑定arguments，取而代之用rest参数...解决
（3）箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
（4）箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
（5）箭头函数没有原型属性
（6）箭头函数不能当做Generator函数,不能使用yield关键字
参考文章：https://www.cnblogs.com/biubiuxixiya/p/8610594.html
19.*new 一个 箭头函数可以吗，为什么
箭头函数是匿名函数，不能作为构造函数，不能使用new
20.new 一个对象的过程
相当于运行构造函数：
this 指向这个对象，
对 this 进行属性赋值，
将 this 的 隐式原型 指向 构造函数的 显式原型，
返回这个对象
21.讲述一下__proto__ 和 prototype 的区别
__proto__是 对象实例 都有的，而 prototype 是函数对象特有的，
prototype 原型对象 有 constructor 属性，又指回 构造函数，
对象实例的 __proto__ 均默认指向 它们的 构造函数的 prototype
22.你了解过 setTimeout 的原理吗？
event loop机制
学习视频：https://v.qq.com/x/page/h0372bld8re.html
23.*promise 和 setTimeout 的区别（微队列和宏队列）
扫到了目前的知识盲区：微任务队列 和 宏任务队列
promise.then 和 process.nextTick 都是 微任务
setTimout 和 setInterval 是 宏任务
微任务 比 宏任务 优先级高
参考文章：https://blog.csdn.net/qq_30376375/article/details/82990588
24.写一段 promise 和 setTimeout 的代码，问你输出结果
console.log(1);
new Promise((resolve) => {
console.log(2);
resolve();
}).then(() => {
console.log(3);
}).then(() => {
console.log(4);
});
setTimeOut(() => {
console.log(5);
});
console.log(6);
// 1 2 6 3 4 525.js 的基本数据类型
number string boolean undefined null
26.*算法：字符串的最大非重复子串长度
var lengthOfLongestSubstring = function(s) {
const len = s.length;
if(!len) {
return 0;
}
let str = '';
let result = 0;
for(let i = 0;i < len;i++) {
const index = str.indexOf(s[i]);
if(index === -1) {
str += s[i];
} else {
str = str.substr(index + 1) + s[i];
}
result = Math.max(result,str.length);
}
return result;
};27.写一段代码，要求说出他的输出内容(不同情况下的this 的指向)
var a = function() {
this.b = 3;
};
var c = new a();
a.prototype.b = 9;
var b = 7;
a();
console.log(b);
console.log(c.b);
在 node 环境下 输出 7 3，但是在浏览器环境下 输出 3 3
感想
第一次视频面试真的十分紧张，整理好自己的状态，把自己锁在房间里面。面试官一般会迟到几分钟，绝对不要比面试官还要晚。感觉面试可以挖出很多你不了解的知识盲区。
