面试前备战

（参考：一篇好文章）

一、js 事件机制

宏任务：常见的定时器（ setTimeout, setInterval, setImmediate）、js的整体代码、I/O, UI rendering。

微任务：promises, Object.observe, MutationObserver

宏任务、微任务的执行顺序:

先执行同步代码，
遇到异步宏任务则将异步宏任务放入宏任务队列中，
遇到异步微任务则将异步微任务放入微任务队列中，
当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，
微任务执行完毕后再将异步宏任务从队列中调入主线程执行，
一直循环直至所有任务执行完毕。

实例：
下面展示一些 内联代码片。

	setTimeout(function(){
	    console.log('1');
	});
	new Promise(function(resolve){          
	    console.log('2');
	    resolve();
	}).then(function(){         
	    console.log('3');
	});         
	console.log('4'); 

遇到setTimout，异步宏任务，放入宏任务队列中； 遇到new
Promise，Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2；
而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中
遇到同步任务console.log(‘4’);输出4；主线程中同步任务执行完 从微任务队列中取出任务到主线程中，输出3，微任务队列为空
从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空，结束~

输出：2 4 3 1

二、节流和防抖

节流
比如公交车站等车，每经过30分钟就会发车，不管后面还有没有人都会发车。这就是节流的过程。

防抖
以最后一个乘客为准，再等30分钟，如果30分钟内都没有人上车，就会发车。如果在期间有人上车，那么重新等30分钟。这就是防抖的过程。

三、闭包

函数A内部有函数B，函数B可以访问函数A的变量，那么函数B就是闭包。本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包有3大特性：

1. 函数嵌套函数
2. 函数内部可以引用函数外部的参数和变量
3. 参数和变量不会被垃圾回收机制回收

闭包优点：

1. 可读取函数内部的变量
2. 局部变量可以保存在内存中，实现数据共享
3. 执行过程所有变量都匿名在函数内部

闭包缺点：

1. 使函数内部变量存在内存中，内存消耗大
2. 滥用闭包可能会导致内存泄漏
3. 闭包可以在父函数外部改变父函数内部的值，慎操作

使用场景：

1. 模拟私有方法
2. setTimeout的循环
3. 匿名自执行函数
4. 结果要缓存场景
5. 实现类和继承

四、进程与线程的区别

进程是系统进行资源分配和调度的一个独立单位
线程是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位
一个进程至少有一个线程组成
线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序计数器,一组寄存器和栈)，但是它可与同属一个进程的其他的线程共享进程所拥有的全部资源

阮一峰老师在博客中写到：计算机就是一个巨大的工厂，工厂内有很多车间，但是电力只能每次供给一个车间。也就是说单个CPU一次只能执行一个任务。而进程就是一个车间，里面有很多工人负责不同的任务，就是线程。

车间的空间是工人共享的，这就表明了线程共享所在进程的地址空间和资源。但是进程中某些资源是不能同时共享的，比如卫生间一次只能进一个人，当该资源正在使用时其他线程就不能使用。

五、关于VUE中keep-alive，以及keep-alive的使用

1.概念
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染

2. 生命周期函数

1. activated
   在 keep-alive 组件激活时调用
         该钩子函数在服务器端渲染期间不被调用

2. deactivated
   在 keep-alive 组件停用时调用
         该钩子在服务器端渲染期间不被调用

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0
版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive
中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用1.使用include的时候，必须给所有路由管理起来的vue组件都设置name属性，不然，没有name属性的也会被缓存下来，这样就不好实现有条件的筛选
2.使用exclude的时候，也必须给所有路由管理起来的vue组件都设置name属性，不然，没有name属性的组件也会被排除在外
3.当同时使用include和exclude的时候，exclude的优先级会更高，include就不生效

<keep-alive exclude='com' include='com’

4.缓存了组件之后，再次进入组件不会触发beforeCreate、created 、beforeMount、 mounted，如果你想每次进入组件都做一些事情的话，你可以放在activated进入缓存组件的钩子中。
同理：离开缓存组件的时候，beforeDestroy和destroyed并不会触发，可以使用deactivated离开缓存组件的钩子来代替。

六、vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。
（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Mutation：是唯一更改 store中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

七、 vue项目优化

Vue项目优化可以怎么做

代码层面的优化
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能
服务端渲染 SSR or 预渲染

Webpack 层面的优化
Webpack 对图片进行压缩
减少 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化

基础的 Web 技术的优化
开启 gzip 压缩
浏览器缓存
CDN 的使用
使用 Chrome Performance 查找性能瓶颈