前端知识点八71、vuex state 全局状态 getters 缓存属性 mutations 同步函数，修改状态，co

71、vuex

state 全局状态
getters 缓存属性
mutations 同步函数，修改状态，commit
actions 异步函数，更新 mutations，dispatch
modules 模块分割

72、async、await、generator

// promise版本 版本自执行函数
function run (Generator) {
  var hw = Generator();
 const  next = (query)=>{
   var aa = hw.next(query)
   if(!aa.done){
    aa.value.then(next) 
   }else{
     return true
   }
 }
 next()
}

function* fib(max) {
  var t,
  a = 0,
   b = 1,
  n = 0;
  while (n < max) {
    yield a;
    [a, b] = [b, a + b];
    n ++;
  }
  return;
}
var f = fib(5);
console.log(f.next()); // {value: 0, done: false}
console.log(f.next()); // {value: 1, done: false}
console.log(f.next()); // {value: 1, done: false}
console.log(f.next()); // {value: 2, done: false}
console.log(f.next()); // {value: 3, done: false}
console.log(f.next()); // {value: undefined, done: true}

await 必须放在async function中
await 是 async wait的简写，await会将代码放入promise中，执行完毕之后，返回resolve(data), 并将之后的代码放入then函数中
转换 await 为 yield 、转换 async 为 Generator
async await 实际上是由 generator + yield 控制流程 + promise 实现回调
利用generator遍历器生成器函数的分段执行，只有在遍历器对象执行next方法之后交出了控制权，在完成后 callback || promise.then()里面调用下一次next的时候又继续恢复控制权这个功能来实现的

73、webpack常用的一些模块以及功能

style-loader：将CSS添加到DOM的内联样式标签style里
css-loader：允许将CSS文件通过require的方式引入，并返回CSS代码
less-loader：处理less
sass-loader：处理sass
postcss-loader：用postcss来处理CSS
file-loader：分发文件到output目录并返回相对路径
url-loader 和 file-loader 类似，但是当文件小于设定的limit时可以返回一个Data Url
html-minify-loader：压缩HTML文件
babel-loader：把ES6文件转换成ES5文件
webpack-dev-server: 开发时使用，静态服务器，并且有热更新等功能。
compression-webpack-plugin：生产环境时可选择让代码压缩gzip.
html-webpack-plugin : 生成index.html 并自动注入打包后的js css 等
definePlugin：可以生成配置常量。编译时就有的常量。
extract-text-webpack-plugin：提取使用文件的css 组成一个或多个css 文件。
uglifyjs-webpack-plugin：删除警告，压缩代码等。

74、常用的设计模式有哪些

单例模式
工厂模式
观察者模式
发布订阅模式
代理人模式

75、不使用比较运算符，计算出较大值

max = （a+b+Math.abs(a-b)）/2 min = （a+b-Math.abs(a-b)）/2

76、如果上一层就是根root了，em和rem等价么？

等价

77、websocket

const socket = new WebSocket('ws://localhost:8080');
//方法
socket .send("Hello server!");      //发送数据
socket .close();              //关闭链接
//事件函数     open   message error close
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});
socket.addEventListener('error', function (event) {
    console.log('Message from server ', event.data);
});
socket.addEventListener('close', function (event) {
    console.log('Message from server ', event.data);
});
//属性
事件绑定等价于属性函数执行 操作
socket.onclose = function (event) {
    console.log('Message from server ', event.data);
}

78、重排重绘

重绘不一定需要重排，重排必然会导致重绘
重绘是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
导致重排，增加、删除节点，改变元素位置、尺寸
批量修改dom可以先让父级元素脱离文档流，然后进行添加批量dom元素，然后在进行显示，脱离文档流增删元素，不会引起回流
文档片段是一个轻量级的document对象，它设计的目的就是用于更新，移动节点之类的任务，而且文档片段还有一个好处就是，当向一个节点添加文档片段时，添加的是文档片段的子节点群，自身不会被添加进去。

不同于第一种方法，这个方法并不会使元素短暂消失造成逻辑问题。

79、HTML5的离线储存怎么使用

Web App是通过浏览器来访问的，其中web app中的一些资源并不经常改变，不需要每次都向服务器发送请求。通过把需要离线缓存储的文件列在一个manifest配置文件中。这样在离线情况下也可以使用app。

<html manifest="sample.appcache"> 
在服务器添加mime-type text/cache-manifest

80、原生ajax过程

var xhr = new XMLHttpRequest();
xhr.open(‘get’,’http://www.example.com’); 
xhr.send();
xhr.onload = function () {
  //xhr.responseText 获取服务器端的响应数据 
  console.log(xhr.responseText);  
}