--save /--save-dev 重绘&重排 宏任务&微任务

--save 与--save-dev的区别

一、模式

运行webpack命令时，一定要指定模式。

webpack --mode development
webpack --mode production

二、--save -dev

--save：将保存配置信息到pacjage.json。默认为dependencies节点中。

--dev：将保存配置信息devDependencies节点中。

因此：

--save：将保存配置信息到pacjage.json的dependencies节点中。

--save-dev：将保存配置信息到pacjage.json的devDependencies节点中。

dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块

devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。

npm安装依赖 及安装指定版本的方法

比如使用npm下载jquery依赖

npm install [email protected] --save

在package.json文件中可以看到：

"jquery": "^2.0.0"

全局安装：

npm install xxx -g  //模块将被下载安装到【全局目录】中

性能优化之重排&重绘

浏览器下载完页面所有的资源后，就要开始构建DOM树，与此同时还会构建渲染树(Render Tree)。一旦渲染树构建完成，就要开始绘制（paint）页面元素了。
（其实在构建渲染树之前，和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树）

DOM树：表示页面的结构
渲染树：表示页面的节点如何显示

1. 重绘
   • 原理：负责元素的样式更新（改变某个元素背景）
   • 而且，重排必然带来重绘，但是重绘未必带来重排。
2. 重排
   • 原理：元素的几何属性发生了改变，那么我们就从能够改变元素几何属性的角度入手
   • 几何属性
     1. 添加或删除可见的DOM元素
     2. 元素位置改变
     3. 元素本身的尺寸发生改变（元素的宽高）
     4. 内容改变
     5. 页面渲染器初始化
     6. 浏览器窗口大小发生改变

v-show v-if 区别 相同点（以下两点一一对应）

1. `visibility：hidden`: 隐藏 占空间（不会产生回流。 具有较高的初始化渲染耗能）
2. `display:none`: 隐藏 不占空间（会产生回流。初始化条件为false不创建标签）

深拷贝

1. JSON.parse(Json.stringify()）
2. lodash.cloneDeep()

let _ = require('lodash');
let obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
let obj2 = _.cloneDeep(obj1);

3. Object.assign(target, sourse1, sourse2…) 属于浅拷贝

typeof null 、typeof undefined

- 'object'/'undefined'

宏任务、微任务

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

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

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

2. await/then放在微观任务列队中

async function async1(){
    console.log('async1 start'); // 3. 主线程打印
    await async2(); // 4. 从右向左, 调用async2()函数执行
    console.log('async1 end') // 8. 开始执行
}
async function async2(){
    console.log('async2') // 5. 打印 (打印后回到第4步, 遇到await扔到任务队列等待) (标记微任务)
}
console.log('script start'); // 1. 主线程执行
setTimeout(() => {
    console.log('setTimeout') // 11. setTimeout/ setInterval都是宏任务, 在所有微任务执行完毕, 再按照顺序执行宏任务.
}, 0);
async1();  // 2. 主线程调用方法, 跳到async1函数执行
new Promise((resolve) => { 
    console.log('promise1'); // 6. 主线程继续, new Promise()马上执行里面代码
    resolve(); // 7. 微任务进入队列等待. (主线程结束, 按照刚才微任务顺序, 先执行上面的微任务)
}).then(() => {
    console.log("promise2"); // 9. 执行
}).then(() => {
    console.log("promise2_then") // 10. 执行
});

异步请求的方法

1. 回调函数

    function doSomething(callback){
        setTimeout(function(){
        console.log('执行结束');
        let result = 4;
        callback(result);
        },100);
    }
 
    function callback(result){
        console.log('接收到结果为：'+result);
    }
 
    doSomething(callback);
    

2. promise对象

function doSth(){
    return new Promise(function(resolve){
        setTimeout(function(){
            let result = 6;
            resolve(result);
        }, 400)
    })  
}

doSth().then(result=>{
    console.log('接收到结果为：'+result);
})

3. generator函数

function doSth(){
    setTimeout(function(){
        let result = 6;
        it.next(result);
    },100)
}

function *gener(){
    let result = yield doSth();
    console.log(result);
}

let it = gener();
it.next();

4. async（ES6）

function doSth(){
    return new Promise(resolve=>{
        setTimeout(function(){
            let result = 6;
            resolve(result);
        },100)
    })
}

面试题

Jsonp实现原理（解决跨域方法）
Vux的数据流向
重绘重排定义
IsArray兼容方法
Position属性
盒子模型
vue渲染函数
src href区别
margin塌陷问题
Date在不同浏览器设置出现兼容问题
mixin
html为什么写在js上面
npm怎样写入新的插件
vue-loader是什么
v-for :key的重要性