前端面试题

1、微任务 、宏任务、js事件循环机制

宏任务和微任务到底是什么？
js事件循环机制-宏任务微任务

顺序：主线程的同步任务 => 微任务 => 宏任务 （上至下顺序，先进先出）

执行主线程JS代码由
主线程中任务执行过程中遇到微任务、宏任务就加入各自队列
主线程任务完成后，就执行分发到微任务队列中任务 – DOM渲染前触发、先进先出
（包括 Promises.(then catch finally)，process.nextTick， MutationObserver）
微任务完成后，执行分发到宏任务队列中的任务 – DOM渲染后触发、先进先出
（整体代码script，setTimeout，setInterval ，setImmediate，I/O，UI renderingnew ，Promise）
在去主线程任务队列循环

2、flex:1 到底代表什么?

flex-grow 放大比例，默认为0
flex-shrink 缩小比例，默认为1
flex-basis 给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

3、Promise

自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法
三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
只有两种可能：从pending变为fulfilled和从pending变为rejected 改变了就不能在改变了

resolve 成功时候的回调 返回的数据
reject 失败时候的回调 返回的数据
all方法 提供了并行执行 异步操作 的能力
all–ps:所有异步操作执行完后并且执行结果都是成功的时候才执行回调
eg：.all([promiseClick3(), promiseClick2(), promiseClick1()]).then(funciton(){
// 三个都成功则成功 – 且返回按顺序的，不会错乱
}, function(){
// 只要有失败，则失败 --返回的是最先被reject失败状态的值
})
race方法： 和all相反 谁先执行完成就先执行回调，不管其他是成功还是失败 – 返回的是执行完成的值

catch 就是用来捕获异常的

tips: 没有 resolve()、reject() 调用then() 不会执行then中的代码

4、取消http请求

1.原生的XMLHttpRequest,是支持取消http请求(abort())操作的: XMLHttpRequest.abort()
2.axios内部提供的CancelToken来取消
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 调用source.cancel()取消请求（可以传参数）

5、vue - router 路由守卫

1.全局前置守卫router.beforeEach((to,from,next)=>{})
2.全局解析守卫router.beforeResolve((to,from,next)=>{})
3.全局后置钩子router.afterEach((to,from)=>{})
4.路由独享的守卫router.beforeEnter((to,from)=>{}) (与path同级)
5.组件内的守卫
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 this ！
// 因为当守卫执行时，组件实例还没被创建！
},
beforeRouteUpdate(to, from) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /users/:id，在 /users/1 和 /users/2 之间跳转的时候，
// 由于会渲染同样的 UserDetails 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 this
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 beforeRouteUpdate 一样，它可以访问组件实例 this
},
to: 即将要进入的目标
from: 当前导航正要离开的路由

6、单位 rpx px vw和vh em rem

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx
1rpx ≈ 0.5px ≈ 1物理像素
iPhone5 1rpx = 0.42px 　　 1px = 2.34px
iPhone6 1rpx = 0.5px 　　　1px = 2rpx
iPhone6s 1rpx = 0.552px 　　1px = 1.81rpx
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。
小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh

• px：px就是 pixel的缩写，意味像素。px就是一张图片最小的一个点，一张位图就是无数个这样的点构成的，是web开发中最常用的像素单位。
• rpx：由微信小程序官方推出的新单位，适用于移动端的 uni-app或者微信小程序的开发。可以根据屏幕宽度进行自适应，1rpx实际上等于相对于屏幕宽度的1物理像素。在设计时可以将1px约等于2rpx。
• em：相对单位，参照物是父元素的 font-size字体大小，具有继承的特点。如果自身定义了 font-size属性那么就会按照自身来计算，都没有设置的话，就会按照当前所有浏览器或者设备的默认文字大小来计算调整。一般来说浏览器的默认字体大小为16px，一个完整的页面内，可能每个模块的 em默认值都不想同。
• rem：css3中推出的新单位。相对于根元素（html）设置的 font-size属性进行调整，而不会像 em那样依赖于父元素的字体大小而造成页面文字大小不相同的混乱局面。
• vw：同样是css3中推出的新单位，是 viewpoint width的缩写，意为视窗宽度。视窗宽度1vw等于是窗宽度的1%。也就是说，如果当前开发浏览器或者设备的宽度为1280px，那么1vw就等于12.8px。在开发设计的过程中，100vw才能真正占据当前屏幕宽度的100%。
• vh：和vw同理，是css3中推出的新单位，是 viewpoint height的缩写，意为视窗高度。视窗高度1vh等于是窗高度的1%。计算及使用都与vw相同，这里就不在赘述了。

7、VUEX

state：保存共享的状态（全局变量）
getters：（类似计算属性，加工state成员给外界）

使用：this.$store.getters.变量方法名
映射在 计算属性 computed

mutations：(类似于事件注册)

使用：this.$store.commit(‘increment’, 10)
映射在 方法 methods

actions：（异步操作）

方法里面调mutations的方法的方式：
1context.commit(‘increment’)
2commit(‘increment’)
使用：this.$store.dispatch(‘increment’);
映射在 方法 methods

modules：（模块化）

8、重绘 回流

重绘是当节点需要更改外观而不会影响布局的，比如改变 color就叫称为重绘

9、 opacity: 0、visibility: hidden、display: none

display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 无法进行 DOM 事件监听不能点击，回流
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击，重绘
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击，不定是否重绘

10、v-if 和 v-show 的区别

v-if：他是真正的条件渲染，是真才渲染，v-show，不管是否为真第一次都会渲染，并且操作的是css样式进行显示隐藏，而v-if是有一个编译/卸载的过程，所以其开销相对较大，消耗更高

11、link与@import的区别

link是 HTML 方式， @import是 CSS 方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说：link 优于@import

12、数据类型

Number、String 、Boolean、Null和Undefined 、Symbol（唯一，没有两个symbol 的值是相等的）
Object 、Array 、Function 、Data

/** typeof */
typeof undefined;            // 得到 "undefined"
typeof null;                 // 得到 "object"
typeof false;                // 得到 "boolean"
typeof (1);                  // 得到 "number"
typeof "str";                // 得到 "string"
typeof {};                   // 得到 "object"  
typeof (function(){});       // 得到 "function"
typeof new Array();          // 得到 "object"，而不是 "array"
typeof new Date();           // 得到 "object"，而不是 "date"。

arr = new Array();　arr instanceof Array;                    // 得到 true

/** instanceof */
console.log(7 instanceof Number);          // false
console.log('7' instanceof String);       // false
console.log(false instanceof Boolean);    // false
console.log([] instanceof Array);         //true
console.log(function () {} instanceof Function);   // true
console.log({} instanceof Object);        // true
// undefined is not a constructor
// null is not a constructor
/** constructor  */
console.log((7).constructor === Number); // 全为true
console.log(('7').constructor === String); //
console.log(false.constructor === Boolean); //
console.log((function () {}).constructor === Function); //
console.log(({}).constructor === Object); //
console.log(([]).constructor === Array); //

    function Test() {}
    Test.prototype = new Array();
    let f = new Test();
    console.log(f.constructor === Function) // false
    console.log(f.constructor === Test)  // false
    console.log(f.constructor === Array)  // true
/** Object.prototype.toString.call() */
let too = Object.prototype.toString;
    console.log(too.call(7));   // [object Number]
    console.log(too.call('7')); // [object String]
    console.log(too.call(false)); // [object Boolean]
    console.log(too.call([]));   // [object Array]
    console.log(too.call({}));  // [object Object]
    console.log(too.call(function () {})); // [object Function]
    console.log(too.call(undefined));     // [object Undefined]
    console.log(too.call(null));         // [object Null]

1

1

1