• position：负margin

  position: absolute;
  
  // 负margin
  top: 50%;
  left: 50%;
  margin-top: -高度的一半;
  margin-left: -宽度的一半;
  
  // calc，与上同理
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  
  // transform
  transform: translate(-50%, -50%);
  

• flex布局：

  justify-content: center;
  align-items: center;
  

• css中的多种垂直水平居中

.imgDiv {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgDiv img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

• 回流 (Reflow)：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
• 重绘 (Repaint)：当页面中元素样式的改变并不影响它在文档流中的位置时，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
• 一句话：回流必将引起重绘，重绘不一定会引起回流。
• 性能影响：回流比重绘的代价要更高；有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。

• 浏览器的回流与重绘 (Reflow & Repaint)
• 你真的了解回流和重绘吗

在回答的时候最好加上如何避免，如果回答的时候没有回答如何避免，那么面试官可能会问如何避免

• let 和 const
• 箭头函数、展开运算符 ...
• 类 class
• Symbol
• Promise、async/await
• Set 和 Map
• 数组的扩展

• ES6中常用的10个新特性讲解
• 近一万字的ES6语法知识点补充
• 阮一峰大佬的ECMAScript 6 入门

• var：存在变量提升,可以重复声明，全局变量属于顶层对象
• let、cosnt：不存在变量提升,不可以重复声明，块级作用域
• let 可以修改值; const 不能修改值(引用类型仅保证地址不被修改)
• 在代码块内，使用let、const命令声明变量之前，该变量都是不可用的

• let & const —— ES6基础总结（二）
• var和let/const的区别

• 面试中，面试官可能会接着问你暂时性死区

• Promise：有等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected），一旦 promise 被 resolved 或 rejected，不能再迁移至其他任何状态。有 Promise.all 和 Promise.race 两个方法
• Promise.all：接收一个 promise 数组。当数组中所有的 promise 的状态都达到resolved 的时候，Promise.all 的状态就会变成 resolved，如果任意一个状态变成了 rejected，那么状态就会变成rejected，可以解决并行的问题。
• Promise.race：接收一个 promise 数组。，哪个先执行完，race 就直接执行完，并从 then 中取值。
• async：是 Generator 函数的语法糖，用于申明一个function 是异步的，返回的是一个 promise 对象
• await：是一个表达式，这个表达式的计算结果是 promise 对象或者其它值，如果等待的是 promise 对象，它会阻塞后面的代码，等着 promise 对象resolve，然后得到 resolve 的值，作为表达式的运算结果。

• Promise之你看得懂的Promise
• 【Promise 】必知必会经典题（这个必看！！！）
• async 函数的含义和用法
• 详解ES6中的async/await

• 面试中，面试官可能会接着问你Promise的值穿透
• 这里建议大伙尝试手写实现Promise

• 用了箭头函数，this 就不是指向 window，而是父级（指向是可变的）
• 不能够使用 arguments 对象
• 不能用作构造函数，这就是说不能够使用 new 命令，否则会抛出一个错误
• 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数

• ES6 系列之箭头函数
• 详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

• forEach 方法不会返回执行结果, 而是 undefined
• map 方法会得到一个新的数组并返回
• 如果值是引用类型的话就会改变

• JavaScript中Map和ForEach的区别
• forEach 会改变原数组值吗？

• class 是一个语法糖，其底层还是通过 构造函数 去创建的。所以它的绝大部分功能，ES5都可以做到。新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
• class可以通过 extends 关键字实现继承
• super：有两种用法，一种是 super 方法，super 方法只能出现在 constructor 方法中；另外一种是 super 对象，一般出现在子类覆盖父类的方法中。

• 详解ES6中的class

• js代码分为同步任务和异步任务
• 同步任务会进入主线程，异步任务会进入Event Table（事件表），当事件表中的异步任务完成后会在Event Queue（事件队列）中注册回调函数
• 主线程任务全部完成后，才会完成Event Queue中的任务
• js解析器会不断地重复检查主线程执行栈是否为空，然后重复第3步，这就是Event Loop（事件循环）
• 异步任务之宏任务：宏任务有 script 、setTimeout、setInterval 、I/O 操作
• 异步任务之微任务：宏任务一般为 ajax、Promise.then、process.nextTick 等
• Event Loop：
  
  1. 1、整体 script 作为第一个宏任务进入主线程
  2. 2、遇到的宏任添加进宏任务列表
  3. 3、遇到的微任务添加进微任务列表
  4. 4、执行完之后，取出微任务队列中的所有任务依次执行
  5. 5、如果微任务执行过程中产生了新的微任务，则继续执行微任务，直到微任务的队列为空
  6. 6、循环，循环以上 1 - 5

• 图解JS执行机制
• 这一次，Event Loop 一波带走
• JS中的EventLoop、宏任务、微任务
• 「前端进阶」JS中的栈内存堆内存
• 读李老课程引发的思考之JS执行机制-|超级 · 奥义|

1. 创造一个全新的对象
2. 链接到原型: obj.__proto__ = Con.prototype
3. 绑定 this
4. 返回新对象(如果构造函数有自己 retrun 时，则返回该值)

• 当我们new一个构造函数时，发生了什么？
• 详解JavaScript中的new操作符

• 在函数中，可以引用运行环境中的变量。因此就需要一个机制来让我们可以在函数体内部获取当前的运行环境，这便是 this；它是一个对象，产生与函数有关，与执行环境绑定
• this 绑定规则：默认绑定、隐式绑定、硬绑定、new绑定
  
  1. 默认绑定：在不能应用其它绑定规则时使用的默认规则，通常是独立函数调用
  2. 隐式绑定：函数的调用是在某个对象上触发的，即调用位置上存在上下文对象。典型的形式为 XXX.fun()
  3. 硬绑定：通过call,apply,bind的方式，显式的指定this所指向的对象
  4. new绑定：看 new 一个函数发生了什么

• 嗨，你真的懂this吗？
• JavaScript中this关键字
• 重学 this 关键字(进阶必备知识）
• [译] this（他喵的）到底是什么 — 理解 JavaScript 中的 this、call、apply 和 bind

• 闭包是 JS 函数作用域的副产品，闭包可以让一个函数访问并操作其声明时的作用域中的变量和函数，并且，即使声明时的作用域消失了，也可以调用
• 《JavaScript高级程序设计》：闭包是指有权访问另一个函数作用域中的变量的函数
• 《JavaScript权威指南》：从技术的角度讲，所有的JavaScript函数都是闭包：它们都是对象，它们都关联到作用域链。
• 《你不知道的JavaScript》：当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。
• 使用闭包会让函数中的变量保存在内存中，如果滥用闭包会造成性能影响，如果在IE中会导致内存泄露

• 一文带你了解如何排查内存泄漏导致的页面卡顿现象
• 动画：什么是闭包？
• 闭包详解一

• 它们都是用于改变 this的指向
• 共同点：三个方法的第一个参数，都是this。如果使用的时候不关心 this 是谁的话，可以直接设置为 null
• call 与 apply 的区别：
  
  1. 1、apply 是第2个参数，这个参数是一个数组：传给函数参数都写在数组中。
  2. 2、call 从第2~n的参数都是传给fun的。
• call/apply 与 bind的区别：
  
  1. 1、call/apply 改变了函数的 this 上下文后,马上执行该函数，返回的是调用函数的返回值
  2. 2、bind 改变了 this 上下文后，返回改变了上下文后的函数，不执行该函数

• js基础-面试官想知道你有多理解call,apply,bind？[不看后悔系列]
• 「干货」细说 call、apply 以及 bind 的区别和用法
• 简单快速理解js中的this、call和apply

• 防抖 (debounce)：
  1. 理解说明：在函数多次频繁触发时，函数执行一次后，只有大于设定的执行周期后才会执行第二次
  2. 使用场景：页面滚动（scroll）、DOM 元素的拖拽（mousemove）、抢购点击（click）、播放事件算进度信息
• 节流 (throttle)：
  1. 理解说明：在函数频繁触发是，在规定之间以内，只让最后一次生效
  2. 使用场景：搜索框实时联想（keyup/input）、按钮点击太快，多次请求（登录、发短信）、窗口调整（resize）

• 函数防抖和节流
• JS的防抖与节流
• 轻松理解JS函数节流和函数防抖

• 数组去重：
  1. 1、ES6的 new Set() 配合 from 或者 展开运算符 ...
  2. 2、利用 filter 配合 indexOf
  3. 3、双循环去重
• 扁平化：
  1. 1、递归
  2. 2、利用 toString 把数组变成以逗号分隔的字符串，然后遍历数组把每一项再变回原来的类型
  3. 3、flat(depth) 方法，默认值为1，不管多少层则可以用 Infinity 关键字作为参数

• 解锁多种JavaScript数组去重姿势
• 7种方法实现数组去重
• JS 扁平化 (flatten) 数组
• 面试官连环追问：数组拍平（扁平化） flat 方法实现

• 浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。
• 深拷贝：从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响。
• 浅拷贝实现：
  1. 1、Object.assign()
  2. 2、展开运算符 ...
  3. 3、数组的 concat()
  4. 4、数组的 slice()
• 深拷贝实现：

  1、利用 JSON.parse(JSON.stringify())方法，但是不能识别 undefined 、 symbol 、function；RegExp 引用类型会变成空对象，拷贝 Date 引用类型会变成字符串

  2、递归实现

• 浅拷贝和深拷贝（较为完整的探索）
• JavaScript 的浅拷贝和深拷贝
• 聊聊对象深拷贝和浅拷贝

• 使用 keep-alive 会出现两个生命周期：
  1. activited：组件被激活前
  2. deactivated：组件被销毁时调用
• 组件生命周期调用顺序： 调用顺序都是先父后子，渲染完成的顺序是先子后父。
• 组件的销毁调用顺序： 先父后子，销毁完成的顺序是先子后父

• Vue生命周期
• 详解Vue生命周期【上】
• 【干货】详解vue生命周期

• vue2.x :响核心就是 Object.defineProperty()
  1. 1、 initData 初始化用户传入的参数
  2. 2、 Observe (观察者)观察 props 与 state，遍历 props 与 state，对每个属性创建独立的监听器( watcher )
  3. 3、使用 defineProperty 重写每个属性的 setter/getter(defineReactive），getter 做依赖收集，setter 派发更新。整体来说是一个 数据劫持 + 发布-订阅者模式。
• vue3.x : 改用 Proxy 和 Reflect 替代 Object.defineProperty() 可以原生监听数组，可以监听对象属性的添加和删除，不需要深度遍历监听

• Vue响应式----数据响应式原理
• Vue响应式原理-理解Observer、Dep、Watcher
• 一张图理清 Vue 3.0 的响应式系统
• Vue3 的响应式和以前有什么区别，Proxy 无敌？
• 解析Vue2.0和3.0的响应式原理和异同(带源码)
• 深入vue响应式原理（包含vue3.0）

• hash模式:响核心就是 Object.defineProperty()
  1. 1、 # 号后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面
  2. 2、 通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作
• history 模式: history 模式的实现，主要是 HTML5 标准发布的两个 pushState 和 replaceState API，这两个 API 可以在改变 url时，不会发送请求。通过监听 url 变化来实现更新页面部分内容的操作
• 两者的区别:
  1. 1、hash 可以支持低版本浏览器和 IE
  2. 2、hash 模式有“#”，history 模式没有

• vue-router原理及其核心功能实现
• Vue-Router 基础入门教程
• VueRouter 源码深度解析
• 你好，谈谈你对前端路由的理解

• v-for: 操作的是样式(display)，切换当前DOM的显示和隐藏，适用于需要非常频繁切换条件的场景
• v-if: 当条件不成立时，不会渲染DOM元素，适用于不需要频繁切换条件的场景

• 为了快速的找到新节点对应的旧节点， key 是给每一个 vnode 唯一的 id, 可以依靠 key，更准确、更快的拿到 oldVnode 中对应的 vnode 节点，如果不使用 key 时也可以运行，但是会报 warning

• 使用vue for时为什么要key
• 为什么使用v-for时必须添加唯一的key?
• Vue2.0 v-for 中 :key 到底有什么用？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，VUEX有5个核心属性

5个核心属性分别为：
• state：状态中心
• getters：获取状态
• mutations：更改状态
• actions： 异步更改状态
• modules：将state分成多个modules，便于管理

• Vuex面试题汇总
• [Vuex]Vuex学习手记
• 深入vuex原理(上)
• 深入vuex原理(下)

• 1、路由懒加载
• 2、图片懒加载
• 3、区分 v-show 和 v-if 使用场景
• 4、区分 v-for 和 v-if 不要一起使用
• 5、区分 v-for 避免使用 index 作为 key
• 6、提取公共样式
• 7、第三方插件按需加载
• 8、computed 和 watch 区分使用场景

• Vue 应用性能优化指南
• Vue 项目性能优化 — 实践指南（网上最全 / 详细）