前端面试题总结

1. 解释下vue中的MVVM，这里一张图带过，很详细

2.谈谈js的运行机制

为什么js是单线程？

js离不开用户操作，和用途有关

假如js是多线程的，同一时间一个线程添加DOM，一个删除DOM，这样就乱了

单线程就是同一时间做同一件事

3.arguments的对象是什么？

箭头函数是没有arguments对象的，

类数组怎么转化成数组呢？

1.Array.from()

2.[...arguments]

3.Array.prototype.slice.call(arguments)  //es5的方法

4.简单介绍下V8引擎的垃圾回收机制

5.那些会造成内存的泄露

1.闭包 

函数执行的时候，导致函数被定义，并抛出。闭包定义方式有很多种，这样是为了方便理解。

2.被遗忘的定时器

3.意外的全局变量

4.脱离dom引用

6.什么是回调函数？回调函数有什么缺点？

7.Generator函数是什么？有什么用？

8.js的事件轮询

宏任务(macro)task：

1.新程序或子程序被直接执行，如script元素中的内容；

2.事件的回调函数，如鼠标点击事件或键盘事件的回调函数；

3.setTimeout()和setInterval()的回调函数；

4.I/O操作

5.setImmediate

6.requestAnimationFrame

7.UI rendering

微任务：

1.Promise.then().catch().finally()

2.MutationObserver

3.Object.observe

5.Node.js里的process.nextTick()

运行顺序Event Loop事件循环：

调用栈被清空后，事件循环就会优先寻找微任务队列里的任务，也就是说每次宏任务结束后事件循环就会先执行微任务，直到微任务队列里的任务被清空才会执行下一轮宏任务，并不会把宏任务全部执行了再执行微任务，这样就可以避免因为宏任务的繁重导致任务的阻塞，微任务逐个执行，按照先入先出的规则。

事件轮询过程：首先执行宏任务，因为script是打头的，调用栈被清空后，事件循环优先执行微任务，并且清空微任务队列才会看下是否需要渲染，渲染后事件循环再执行下一轮宏任务，如果此时宏任务其中一轮结束后，也就是调用栈清空时，事件循环又发现微任务，还会执行微任务，并且清空微任务队列才会看下是否需要渲染，渲染过后事件循环再执行下一轮宏任务，在没有其余微任务的时候，宏任务就可以一直清空宏任务队列了，就是整个基本流程了。

 9.BFC的理解

10.在浏览器地址栏中输入URL后发生了什么

https://blog.csdn.net/joyvonlee/article/details/84373710

11.GET请求和POST请求的区别

12.vue项目怎么优化的

13.webpack打包后引用cdn的js_webpack模块抽取详解

14.webpack的一些配置有哪些？

15.用过iview么

16.小程序的授权流程，openid，onuinid , wx-login

17.关于js中的null、undefined和true、false的关系

1.如果你用null来判断null==false以及null==true，你会发现返回的结果都是false，这个结果
是不是让你觉得很奇怪。
2.然后你可以再试试undefined==false以及undefined==true，同样的，你会发现，返回的结果
同样都是false
3.再接下来，试试null==undefined，惊呆了，居然返回一个true

接下来就是null和undefined的详解

1.在某种意义上，null就是空的意思，undefined就是未定义，大概就是js的一种规定吧，所以
它们两者既不是false也不是true
2.但是如果用他们两者作为判断条件的话，在判断条件中他们可以当做false来作为if语句的判断

最后我们说说null和undefined

1.当不考虑这两者的字符类型的时候，null==undefined是为true的
2.但是如果考虑字符类型的时候，null的字符类型是Object，而undefined的字符类型是undefined
3.如果你用typeof undefined==typeof null，那么返回结果则为false
4.总结就是当不考虑字符类型时发现undefined等于null 当考虑字符类型时undefined不等于null
 

18.设置localStorage过期时长

19.用过des或者md5加密么

20.前端上传图片之前先进行图片压缩

https://blog.csdn.net/joyvonlee/article/details/108711757

21.做过支付么？

https://blog.csdn.net/joyvonlee/article/details/107017229

22.瀑布流实现

23.防抖和节流分别介绍下

24.利用移动事件实现拖拽效果

https://blog.csdn.net/joyvonlee/article/details/103577664

25.字符串str=“ajkl uji”，变成“iju lkja”，封装成一个函数

26.this指向问题

//this指向是在函数执行时生成的 

var foo=function(){
    console.log(this)
}

var obj={
    a:2,
    foo:foo
}

test(fn){
    fn()
}
//第一种
obj.foo()  //this指向obj , 属于对象调用，谁调用，this就指向谁

//第二种（隐式丢失）
var bar=obj.foo
bar()    //this指向window , 函数独立调用，只要是独立调用，this就指向window

//第三种 （隐式丢失） 
test(obj.foo)  //this指向window,参数属于浅拷贝，

//更改this指向,假设foo函数有形参
foo.call(obj,1,2)
foo.apply(obj,[1,2])
foo.bind(obj)(1,2)

总结：
1.默认绑定；window ; 独立绑定指向window
2.隐式绑定：对象调用 obj.foo() 谁调用就指向谁 ；隐式丢失
3.显式绑定：call , apply , bind ,
4.new绑定规则 var o=new foo()   //this指向o

优先级：4>3>2>1

箭头函数：

function foo(){
   console.log(this)
   var test=()=>{
     console.log(this)
   }
   return test
}
var obj={
    a:1,
    foo:foo
  }
obj.foo()(); //两个this打印的都是obj，箭头函数内部的this,取决于父环境中的this

1.箭头函数：所有绑定规则全部不适用
2.箭头函数的this 取决于父环境中的this指向（箭头函数内不存在this指向）

测试题一

测试题二