--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 jquery@2.0.0 --save
在package.json文件中可以看到:
"jquery": "^2.0.0"
全局安装:
npm install xxx -g //模块将被下载安装到【全局目录】中
性能优化之重排&重绘
浏览器下载完页面所有的资源后,就要开始构建DOM树,与此同时还会构建渲染树(Render Tree)。一旦渲染树构建完成,就要开始绘制(paint)页面元素了。
(其实在构建渲染树之前,和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树)
DOM树:表示页面的结构
渲染树:表示页面的节点如何显示
- 重绘
- 原理:负责元素的样式更新(改变某个元素背景)
- 而且,重排必然带来重绘,但是重绘未必带来重排。
- 重排
- 原理:元素的几何属性发生了改变,那么我们就从能够改变元素几何属性的角度入手
- 几何属性
- 添加或删除可见的DOM元素
- 元素位置改变
- 元素本身的尺寸发生改变(元素的宽高)
- 内容改变
- 页面渲染器初始化
- 浏览器窗口大小发生改变
v-show v-if 区别 相同点(以下两点一一对应)
1. `visibility:hidden`: 隐藏 占空间(不会产生回流。 具有较高的初始化渲染耗能)
2. `display:none`: 隐藏 不占空间(会产生回流。初始化条件为false不创建标签)
深拷贝
- JSON.parse(Json.stringify())
- lodash.cloneDeep()
let _ = require('lodash');
let obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
let obj2 = _.cloneDeep(obj1);
- Object.assign(target, sourse1, sourse2…) 属于浅拷贝
typeof null 、typeof undefined
- 'object'/'undefined'
宏任务、微任务
-
执行顺序:先执行同步代码,遇到异步宏任务则将异步宏任务放入宏任务队列中,遇到异步微任务则将异步微任务放入微任务队列中,当所有同步代码执行完毕后,再将异步微任务从队列中调入主线程执行,微任务执行完毕后再将异步宏任务从队列中调入主线程执行,一直循环直至所有任务执行完毕。
setTimeout(function(){ console.log('1'); }); new Promise(function(resolve){ console.log('2'); resolve(); }).then(function(){ console.log('3'); }); console.log('4');
- 遇到setTimout,异步宏任务,放入宏任务队列中;
- 遇到new Promise,new Promise在实例化的过程中所执行的代码都是同步进行的,所以输出2;
- 而Promise.then中注册的回调才是异步执行的,将其放入微任务队列中
- 遇到同步任务console.log(‘4’);输出4;主线程中同步任务执行完
- 从微任务队列中取出任务到主线程中,输出3,微任务队列为空
- 从宏任务队列中取出任务到主线程中,输出1,宏任务队列为空,结束~
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. 执行
});
异步请求的方法
- 回调函数
function doSomething(callback){
setTimeout(function(){
console.log('执行结束');
let result = 4;
callback(result);
},100);
}
function callback(result){
console.log('接收到结果为:'+result);
}
doSomething(callback);
- promise对象
function doSth(){
return new Promise(function(resolve){
setTimeout(function(){
let result = 6;
resolve(result);
}, 400)
})
}
doSth().then(result=>{
console.log('接收到结果为:'+result);
})
- 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();
- 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的重要性