前端面试题总结

落日映苍穹つ 2022-10-09 04:52 231阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1][]

##  9.BFC的理解 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 2][]

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

[https://blog.csdn.net/joyvonlee/article/details/84373710][https_blog.csdn.net_joyvonlee_article_details_84373710]

## 11.[GET请求和POST请求的区别][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][https_blog.csdn.net_joyvonlee_article_details_108711757]

## 21.做过支付么？ ##

[https://blog.csdn.net/joyvonlee/article/details/107017229][https_blog.csdn.net_joyvonlee_article_details_107017229]

## 22.瀑布流实现 ##

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

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

[https://blog.csdn.net/joyvonlee/article/details/103577664][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指向）

测试题一

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 4][]

测试题二

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 5][]

![20210703171727440.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20221005/eacb7326dfa3427ab37b15e4bdaa5bf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1]: /images/20221005/c1f496e5238240d79944d6d1f4b5f55f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 2]: /images/20221005/a43a1538209348f5bb7dfc2daff98da1.png
[https_blog.csdn.net_joyvonlee_article_details_84373710]: https://blog.csdn.net/joyvonlee/article/details/84373710
[GET_POST]: https://segmentfault.com/a/1190000004014583
[https_blog.csdn.net_joyvonlee_article_details_108711757]: https://blog.csdn.net/joyvonlee/article/details/108711757
[https_blog.csdn.net_joyvonlee_article_details_107017229]: https://blog.csdn.net/joyvonlee/article/details/107017229
[https_blog.csdn.net_joyvonlee_article_details_103577664]: https://blog.csdn.net/joyvonlee/article/details/103577664
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 3]: /images/20221005/102f6ada7f6741afbafdb8d26d106b90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 4]: /images/20221005/eaf7b5793fac46b2801ad836ad40a3ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 5]: /images/20221005/97a69dfd5c2046d695cf5e4d7f4a9257.png
[20210703171727440.png]: /images/20221005/6bc4c4ce2845402fa8dface0312f2f93.png