面试总结
1.投其所好：比如说，面试的公司有大屏项目的话，那么在自我介绍的时候可以说自己做过大屏项目，再详细介绍自己做的大屏项目
2.把握主动权：不要问答模式，要把面试官的问题或者兴趣带到自己熟悉的领域，比如说，在介绍项目过程中，插入自己在项目中比较亮眼的工作，自然而然的把面试官带到你熟悉的领域去
3.活跃气氛：在面试过程中需要适当的活跃气氛(自己体会)
4.面试题链接
1.原型链
深入熟悉构造函数、实例对像、原型对象之前的关系
深入熟悉什么是原型链，原型链最终的指向是什么
深入熟悉如何拓展对象的属性与方法
深入熟悉为什么判断数组是否等于对象的时候使用instanceof，结果为true
2.类型判断
深入熟悉基本类型、引用类型有哪些，以及基本类型和引用类型存放在堆内存还是栈内存
深入熟悉类型判断的方法以及实现原理
3.继承
深入熟悉继承的多种方式和优缺点
4.作用域
深入熟悉var、let、const的特点以及区别
深入熟悉this指向
深入熟悉call、apply、bind的使用以及区别
深入熟悉箭头函数以及原理
5.函数
深入熟悉闭包、函数柯理化，了解偏函数和高阶函数
熟悉了解函数柯理化在vue框架实现中的使用（举例：判断真正的html标签还是自定义组件标签；抽象语法树ast转化成虚拟dom使用函数柯理化已经模板的缓存）
熟悉闭包的优缺点、以及内存溢出(内存泄漏)的原因和解决方案
6.事件循环机制
「事件循环机制学习视频」
深入熟悉事件循环机制的整个过程和原理
深入熟悉浏览器、eventLoop、call stack(执行栈)、web APIS、callback quene之间的关系以及执行顺序
深入熟悉宏任务和微任务，深入熟悉更新dom的时机，以及宏任务、微任务、更新dom的执行顺序前后
js为什么是单线程语言，能否多线程
js是单线程语言，为什么可以执行setTimeout等异步操作
7.异步编程
深入熟悉promise原理和实现，深入熟悉promise相关api「promise学习视频」
深入熟悉generator原理和实现「generator学习视频」
深入熟悉async/await原理和实现「async/await学习视频」
8.类
「类学习视频」
深入熟悉类的原理和实现
如何继承父类以及调用父类的方法（super）
new操作符的作用以及实现
9.ES6-ES11
「ES6-ES11学习视频」
ES6的新特性在面试过程中都会有被问到，所以学习视频多刷两边哦！
10.缓存策略
深入熟悉缓存策略机制
强制缓存和协商缓存的特点和区别
如何判断缓存结果是否过期(Expires/Cache-Control)
浏览器的缓存存放在哪里，如何在浏览器中判断强制缓存是否生效？
from memory cache 和 from disk cache又分别代表的是什么呢？
什么时候会使用from disk cache，什么时候会使用from memory cache呢？
状态码304是什么意思
如何判断服务器端请求资源发生改变(Last-Modified / If-Modified-Since和Etag / If-None-Match)
11.重绘和重排
深入熟悉重绘和重排，以及如何进行优化
12.防抖和节流
深入熟悉防抖和节流，防抖和节流的区别以及实现
13.事件冒泡、事件捕获和事件委托
深入熟悉事件冒泡、事件捕获和事件委托的区别、实现和运用场景
14.vue框架
「vue框架源码解析学习视频」
vue框架源码解析学习视频个人刷了两遍，最主要理解vue的实现原理，要做好笔记！！
底层框架问题：
（1）深入熟悉vue从编写页面代码到渲染页面的整个过程，以及vue做了什么事情?(字符串模板-抽象语法书-虚拟dom-真正dom的一系列过程)
（2）vue从编写页面代码到渲染页面的整个过程，哪一环节最消耗性能，vue的优化方案是?
（3）vue的双向绑定原理(数据劫持+发布订阅者模式)
（4）改变数据到视图更新的整一个过程(observe+deps+watcher+diff)
（5）observe进行数据劫持
（6）deps调控中心，dep.depend()/dep.notify()
（7）watcher(计算watch > 监听watch > 渲染watcher)
（8）diff算法原理
（9）什么是虚拟dom，虚拟dom的数据结构和作用，以及虚拟dom的二次提交
（10）数据劫持object.defineproperty
（11）发布订阅者模式和观察者模式的区别
（12）vue对数组api进行重写
vue原理问题：
（1）vue的生命周期，vue父组件和子组件的生命周期(父created - 子created - 子mounted - 父mounted)
（2）在mounted钩子函数里能否获取真正的dom(不能，在mounted使用setTimeout或者this.nextTick)
（3）nextTick的作用和使用
（4）为什么vue里面data是一个函数，而不是对象
（5）v-model的实现
（6）通讯方式：props、refs、eventBus、emit/on、attr/listener
（7）v-for和v-if为什么不能在同一个标签里公用(v-for和v-if的渲染顺序问题)
（8）v-for里的key属性作用(diff算法相关)
（9）路由hash和history的实现原理和区别，为什么hash改变，页面不会重新渲染(单页面应用)
（10）插槽，如何添加多个插槽
（11）mixins的作用是使用场景
vue路由
（1）路由hash和history的实现原理和区别，为什么hash改变，页面不会重新渲染(单页面应用)
（2）动态路由(addRouter)
（3）路由权限控制的实现
（4）路由缓存keepAlive的作用以及实现
（5）路由钩子(路由守卫)：全局、组件级、单路由享用
vuex状态管理库
（1）深入熟悉状态管理库的整个流程
（2）为什么不直接改变state,而是要通过mutation来改变state(记录问题)
（3）mutation和action的区别，为什么mutation不能进行异步操作
（4）如何查看状态管理库的更新记录(vue-devtools)
（5）当页面进行刷新，状态管理库的数据消失了怎么处理
axios
（1）深入熟悉axios的二次封装
（2）axios的请求拦截以及响应拦截分别可以做什么配置
15.webpack
「webpack学习视频」
（1）webpack的实现原理(webpack_required引入依赖)
（2）webpack的性能优化(速度和体积，自动(tree-sharking和scope-hasting)和手动(happypack、ignorePlugin、externals、动态链接库、splitChunks))
（3）web-loader的执行顺序(从下往上，从右往左)
（4）sass-loader、css-loader、style-loader的区别以及作用
（5）file-loader和ulr-loader的区别以及作用
（6）实际项目中使用过哪些loader和plugin
（7）结合实际项目使用webpack做了哪些工作或者是性能优化
16.其他
（1）深拷贝和浅拷贝的区别，如何实现深拷贝
（2）Cookie、session和localStorage、以及sessionStorage之间的区别
（3）Echart的性能问题，修改数据使用setOptions api，使用dispose销毁Echart实例
（4）git合并部分代码使用cherry pick
（5）vue3发布日期2020.9.18，时间允许的话也去了解vue3新增特性以及实现原理，加分项
（6）前端微服务，加分项
17.css相关知识点
（1）CSS选择器
元素选择器、类选择器、ID选择器、属性选择器、通用选择器、伪类和伪元素
（2）盒子模型
盒子模型 = margin + border + padding + content
标准盒模型 和 IE盒模型区别在于width
标准盒模型：width = content
IE盒模型：width = content + padding + border
box-sizing: border-box / content-box
// 假如设置元素宽度为100px
box-sizing: border-box // IE盒模型：width = content + padding + border = 100px
box-sizing: content-box // 标准盒模型：width = content = 100px
（3）弹性布局
display: flex/inline-flex
flex-direction: row/row-reverse/column/column-reverse // 设置主轴方向
justify-content: flex-star/flex-end/center/space-between/space-around // 横坐标对齐
align-items: flex-star/flex-end/center/baseline/stretch // 纵坐标对齐
flex-wrap: nowrap/wrap/wrap-reverse // 换行
order: 1(number) // 排序
flex-grow: 0 // 剩余空间按比例放大，默认为0
flex-shrink： 1 // 剩余空间按比例缩小，默认为1
flex-basis： auto // 如果主轴为水平，则设置这个属性，相当于设置项目的宽度。 原width将会失效
flex: 1 // flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
（4）响应式布局和自适应布局
响应式布局与自适应布局原理相似，都是通过检测设备，根据不同设备的分辨率作适配。
响应式布局：根据设备的不同展示不同的网站风格（通过媒体查询判断，在不同的设备和分辨率下展示不同的网站风格），通过响应式设计能使网站在不同的设备上有更好的浏览阅读体验。
自适应布局：根据设备的不同而作出一些自适应样式的调整（不需要媒体查询判断，直接让每个元素通过相对宽度，不如说%，vw，em等改变容器的大小，字体的大小）
（5）BFC
Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
那么 BFC 是什么呢？
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
创建或触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC 特性及应用
同一个 BFC 下外边距会发生折叠（如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。）
BFC 可以包含浮动的元素（即清除浮动）
（6）盒子居中
flex 布局实现 （元素已知宽度)
CSS 代码:
<style>
.box{
width: 300px;
height: 300px;
background-color: #ccc;
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
}
.box .a{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
HTML 代码：
<div class="box">
<div class="a"></div>
</div>
position （元素已知宽度）
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的一半距离就可以实现
CSS代码：
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box .a{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
</style>
HTML 代码：
<div class="box">
<div class="a">love</div>
</div>
position transform （元素未知宽度）
如果元素未知宽度，只需将上面例子中的 margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
CSS 代码：
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box .a{
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
position（元素已知宽度）（left，right，top，bottom为0，maigin：auto ）
CSS 代码：
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box .a{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
HTML 代码：
<div class="box">
<div class="a">love</div>
</div>
table-cell 布局实现
<style>
.box{
width: 300px;
height: 300px;
background-color: skyblue;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img{
/* 设置成块元素后，text-align：center 就会失效 */
width: 100px;
height: 100px;
}
</style>
HTML：
<div class="box">
<img src="1.jpg" alt="">
</div>
（7）position定位
熟悉了解定位每个属性值的作用：
static： 默认值。没有定位，元素出现在正常的流中。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
inherit：规定应该从父元素继承 position 属性的值。
