前端面试题汇总2021.docx

1、前端试题汇总2021录：前端页样式1. 块标签和标签2. 盒模型和IE盒模型3. 清除浮动4.css动画5. 盒垂直平居中6. css选择器及优先级7. 左侧宽度固定右侧适应8.0.5px的线9. 什么是BFC10. flex：1是什么缩写：js1. 数据类型2. 闭包3. ajax原理和优缺点4. 从输url到页展的详细过程5. 原型和原型链区别6.sessionStorage,localStorage和cookie的区别 9.节流和防抖10. 回流和重绘11. instanceof 和 typeof的区别12.数组的增删改查13.http和https的区别，常见http状态码14.get和

2、post区别15. 前端跨域解决办法16. 内存泄漏的种情况及解决办法17.promiss与async和await的区别18.webstorage怎么赋值（转化成字符串赋值） 19.post跨域怎么处理20.说下this关键字三：vue1. 什么是MVVM2. VUE的响应式原理3.v-if和v-show的区别4.组件之间传值5.vue命周期及各阶段情况6.webpack打包原理7. keep-alive的命周期8. 组件created和mounted加载顺序9.wacth和computer区别10.vue的data为什么必须是函数四：es61. let和const2. 什么是promiss，

3、promiss有哪个法3.箭头函数五：算法1. 冒泡排序2. 快速排序和分查找3. 数组的翻转（reverse()） 4.数组由到进排序5.求数组最值：Math.max.apply(null,arr); 6.数组去重7.判断个字符串中出现次数最多的字符，统计这个次数8.apply()/call()求数组最值9.获取浏览器URL中查询字符串中的参数10.2个对象排序age:10,name:lili11.设计模型12.=这是 分割线=：前端页样式1. 块标签和标签块标签包括：p、div、ul、ol、li、dl、dt、dd、h1h6、form、table、td、thread、tr、标签包括：a、ab

4、br、b(字体加粗)、br、em、input、select、span、strong、sub、textarea、内元素设置width效，height效(可以设置line-height)，margin上下效，padding上下效。2. 盒模型和IE盒模型box-sizing属性可以指定盒模型种类，content-box指定盒模型为W3C（标准盒模型），border-box为IE盒模型（怪异盒模型）。3. 清除浮动3.1 伪类元素（clearfix）HTML结构如下，为了惯例相符，在.topDiv的div上再添加个clearfix类：.float left. css样式/ 省略基本的样式/ 区别在这

5、.clearfix:after content: ; height: 0; display: block; clear: both;3.2 在浮动元素后加个空div设置clear:both.float left 3.3 给元素设置overflow：auto 4.css动画4.1. transform:有4个法，translate（平移），rotate（旋转），scale（缩放），skew（斜切） tranform:translate(10px,10px); /平移transform:rotate(90deg); /旋转transform:scale(1.2); /缩放：参数1缩，1放trans

6、form:skew(90deg,10deg)； /斜切4.2. transition有4个值（默认是前2个值）：property（指定css属性的name）、duration（动画持续时间）、timing-function（切换动画的速度）、动画执前的延迟时间。transition：width|height|opacity|all 2s ease-in 2s;3.perspective:90px; /景深，值越，表我们离物体越近，般使500-8005. 盒垂直平居中5.1 已知盒宽案：设置元素为相对定位，给元素设置绝对定位，top: 0; right: 0; bottom: 0; left:

7、0; margin: auto;position: relative;background-color: skyblue;width: 500px; height: 300px#father ;margin: auto;left: 0;0;right: 0; bottom:top: 0;position: absolute;background-color: green;width: 100px; height: 100px#son ;我是块级元素案：设置元素为相对定位，给元素设置绝对定位，left: 50%; top: 50%; margin-left: -元素宽度的半px; margin-

8、top: -元素度的半px;#father width: 500px; height: 300px;position: relative;background-color: skyblue;margin-left: -50px; margin-top: -50px;left: 50%;top: 50%;position: absolute;background-color: green;height: 100px;width: 100px;#son 5.2 未知宽案：使定位属性设置元素为相对定位，给元素设置绝对定位，left: 50%; top: 50%; transform: transla

9、teX(-50%) translateY(-50%);/ transform: translate(-50%,-50%)#father width: 500px; height: 300px;position: relative;background-color: skyblue;: translateX(-50%) translateY(-50%); / transform: translate(-50%,-50%)left: 50%;top: 50%; transformposition: absolute;background-color: green;#son 案：使flex布局实现#

10、father width: 500px; height: 300px;设置元素为flex定位，justify-content: center; align-items: center;align-items: center;justify-content: center;display: flex;background-color: skyblue;background-color: green;#son 6. css选择器及优先级!important 内样式ID选择器 类选择器 标签 通配符 继承 浏览器默认属性7.左侧宽度固定右侧适应/*左固定列*/.fixedColumn width:

11、40px; height: 100%;background-color: red; float: left;/*position: absolute; 注释和float：left选即可 left: 0;*/*右适应列*/.flexibleColumn height: 100%;background-color: blue; margin-left: 40px;左中右，左右固定宽度，中间适应(与左定宽，右适应就多个右float：right)float + overflow:hidden利overflow:hidden形成BFC，因为BFC不会与float box重叠。.left float: l

12、eft; width: 200px; height: 100%;background-color: red;.right overflow:hidden; background-color: blue;CSS3 float + calc.left float: left; width: 200px; height: 100%;background-color: red;.right float: left;width: calc(100% - 200px); height: 100%;background-color: blue;弹性布局.parent display: flex;.left

13、width: 200px; height: 100%;background-color: red;.right flex: 1;display: flex;height: 100%; background-color: blue;8.0.5px的线.hr.scale-half height: 1px;transform-origin: 50% 100%;transform: scaleY(0.5);法2：.hr.gradient height: 1px;background: linear-gradient(0deg, #fff, #000);9.什么是BFCBFC(Block formatt

14、ing context)直译为块级格式化上下。它是个独的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相。如何创建BFC1、float的值不是none。2、position的值不是static或者relative。3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow的值不是visible1. 两个兄弟盒A在上、B在下，A margin-bottom：20px，B margin-top：30px A和B的最终距离

15、是多少？ 30px 因为同属于个BFC，margin会重叠。可以给B套个盒并开启BFC就变成50px了。1. A和B是关系A在外、B在内，A margin-top：30px ，B margin-top： 20px，A和B之间的距离是多少？ 相同的原因，两个盒的margin会重叠，导致盒会顶在盒边框。所以距离是0px。3.A是绝对定位，B是相对定位，A和B是兄弟关系，A和B分别相对什么位置移动，A 和 B 是否脱离档流A相对有定位的盒或者根元素移动，脱离档流；B相对位置移动，不脱离档流。10.flex:1是什么缩写flex：1即为flex-grow：1，经常作适应布局，将容器的display：f

16、lex，侧边栏固定后，将内容区flex：1，内容区则会动放占满剩余空间。flex-grow：定义项的的放例；默认为0，即 即使存在剩余空间，也不会放；所有项的flex-grow为1：等分剩余空间（动放占位）；flex-grow为n的项，占据的空间（放的例）是flex-grow为1的n倍。11.css3和html5新增属性：js1. 数据类型基本数据类型：boolean，number，string，undefined，null 保存在栈内存中。引数据类型：Object，Array，Function，Date，regexp 保存在堆内存中的对象。与其他语的不同是，你不可以直接访问堆内存空间中的位置

17、和操作堆内存空间。只能操作对象在栈内存中的引地址。2. 闭包什么是闭包简单来说，闭包是指可以访问另个函数作域变量的函数，般是定义在外层函数中的内层函数。为什么需要闭包呢局部变量法共享和长久的保存，全局变量可能造成变量污染，所以我们希望有种机制既可以长久的保存变量不会造成全局污染。特点占更多内存不容易被释放何时使既想反复使，想避免全局污染如何使1.定义外层函数，封装被保护的局部变量。 2.定义内层函数，执对外部函数变量的操作。 3.外层函数返回内层函数的对象，并且外层函数被调，结果保存在个全局的变量中。函数命周期直接上图，点击图放查看。要记住函数对象、作域链对象、执环境(EC)和活动对象(AO)

18、这个东西都啥时候出现，啥时候消失。3. ajax原理和优缺点1：原理：Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后javascript来操作DOM更新页。2：ajax的优点：1、最的点是页刷新，在页内与服务器通信，给户的体验常好。2、使异步式与服务器通信，不需要打断户的操作，具有更加迅速的响应能。3、可以把以前些服务器负担的作转嫁到客户端，利客户端闲置的能来处理，减轻服务器和带宽的负担，节约空间和宽带租成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最程度的减少冗余请求，和响应对服务器造成的负担。4、基于标准化的并被泛持

19、的技术，不需要下载插件或者程序。3：缺点：1：破坏浏览器后退按钮正常为2：对搜索引擎不是多好4. 从输url到页展的详细过程1、输址2、DNS解析3、建tcp连接4、客户端发送HTPP请求5、服务器处理请求6、服务器响应请求7、浏览器展HTML8、浏览器发送请求获取其他在HTML中的资源。5. 原型和原型链区别prototype是函数才有的属性 proto 是每个对象都有的属性所有对象都会从它的原型上继承个 constructor 属性obj. proto = obj.constructor.prototype总结：1. 对象有属性 proto ,指向该对象的构造函数的原型对象。2. 法除了有

20、属性 proto ,还有属性prototype，prototype指向该法的原型对象。多数情况下， proto 可以理解为“构造器的原型”，即 proto =constructor.prototype,但是通过 Object.create()创建的对象有可能不是， Object.create()法创建个新对象，使现有的对象来提供新创建的对象的 proto 。6.sessionStorage,localStorage和cookie的区别 共同点：都是保存在浏览器端、且同源的区别：1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，sessi

21、onStorage和localStorage不会动把数据发送给服务器，仅在 本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下2、存储限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很的数据，如会话标识。sessionStorage和localStorage虽然也有存储的限制，但cookie得多，可以达到5M或更3、数据有效期不同，sessionStorage：仅在当前浏览器窗关闭之前有效；localStorage：始终有效，窗或浏览器关闭也直保存，因此作持久数据；cookie：只在设 置

22、的cookie过期时间之前有效，即使窗关闭或浏览器关闭4、作域不同，sessionStorage不在不同的浏览器窗中共享，即使是同个页；localstorage在所有同源窗中都是共享的；cookie也是在所有同源窗中都是共享的 5、web Storage持事件通知机制，可以将数据更新的通知发送给监听者6、web Storage的api接使更便9. 节流和防抖在进窗的resize、scroll，输框内容校验等操作时，如果事件处理函数调的频率限制，会加重浏览器的负担，导致户体验常糟糕。此时我们可以采debounce（防抖）和throttle（节流）的式来减少调频率，同时不影响实际效果函数防抖：将次

23、操作合并为此操作进。原理是维护个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器重新设置。这样来，只有最后次操作能被触发。函数节流：使得定时间内只触发次函数。原理是通过判断是否到达定时间来触发函数。区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内定会执次真正的事件处理函数，函数防抖只是在最后次事件后才触发次函数。 如在页的限加载场景下，我们需要户在滚动页时，每隔段时间发次 Ajax 请求，不是在户停下滚动页操作时才去请求数据。这样的场景，就适合节流技术来实现。防抖就是：对于段时间内连续触发的事件，防抖的含义就是让某个时间段内，事件处理函

24、数只执次。函数节流（throttle）：当持续触发事件时，保证定时间段内只调次事件处理函数。函数节流主要有两种实现法：时间戳和定时器使场景：页中的返回顶部，当在滚动条位置，点击键盘上下键，会多次执防抖：在第次触发事件时，不即执函数，是给出个期限值，如200ms。如果在200ms内没有再次触发滚动事件，那么就执函数如果再200ms内再次触发滚动事件，那么当前计时取消，重新开始计时。10. 回流和重绘1、 重绘：元素样式的改变（但宽、位置等不变） 如：outline、visibility、color、background-color等只改变样式，不会影响到其他元素2、 回流：元素的或者位置发改变（

25、当页布局和何信息发改变的时候），触发了重新布局导致渲染树重新计算布局和渲染如添加或删除可见的DOM元素；元素的位置发变化；元素的尺发变化、内容发变化（如本变化或图被另个不同尺的图所代替）；页开始渲染的时候（法避免）；因为回流是根据视来计算元素的位置和的，所以浏览器窗尺变化也会引起回流注意：回流定会触发重绘，重绘不定会回流版权声明：本为CSDN博主独坐空后的原创章，遵循CC 4.0 BY-SA版权协议，转载请附上原出处链接及本声明。原链接：11. instanceof 和 typeof的区别typeof于判断数据类型， 返回值为6个字符串， 分别为string、Boolean、number、fu

26、nction、object、undefined。对于 Array,Null等特殊对象使 typeof 律返回 object， 这正是 typeof 的局限性instanceof 于判断个变量是否某个对象的实例，如 var a=new Array();alert(a instanceof Array); 会返回 true，同时 alert(a instanceof Object) 也会返回 true;这是因为 Array是 object 的类12. 数组的增删改查下将数组的法分为5类（官档中可查）A 给数组添加元素（增）：push(), unshift(),splice() B 从数组中删除元素

27、（删）:pop(), shift(),splice()C 修改数组中的元素（改）:splice(),reverse(),sort() D -从已有数组中返回选定的数组（查）：slice()E 不会改变元素数组的内容的函数：concat(),slice()版权声明：本为CSDN博主銭佳的原创章，遵循CC 4.0 BY-SA版权协议，转载请附上原出处链接及本声明。原 链 接 ： 13.http和https的区别，常见http状态码HTTP协议传输的数据都是未加密的，也就是明的，因此使HTTP协议传输隐私信息常不安全，为了保证这些隐私数据能加密传输，于是景公司设计了SSL（Secure Socket

28、s Layer）协议于对HTTP协议传输的数据进加密，从就诞了HTTPS。简单来说，HTTPS协议是由SSL+HTTP协议构建的可进加密传输、份认证的络协议，要http协议安全。HTTPS和HTTP的区别主要如下：1、https协议需要到ca申请证书，般免费证书较少，因需要定费。2、http是超本传输协议，信息是明传输，https则是具有安全性的ssl加密传输协议。3、http和https使的是完全不同的连接式，的端也不样，前者是80，后者是443。4、http的连接很简单，是状态的；HTTPS协议是由SSL+HTTP协议构建的可进加密传输、份认证的络协议，http协议安全。200 - 请求成

29、功301 - 资源（页等）被永久转移到其它URL302 - 资源被临时移动，客户端应继续使304-如果客户端发送了个带条件的GET 请求且该请求已被允许，档的内容（上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。简单的表达就是：服务端已经执了GET，但件未变化。404 - 请求的资源（页等）不存在500 - 内部服务器错误502 Bad Gateway：作为关或者代理作的服务器尝试执请求时，从上游服务器接收到效的响应。504 Gateway Time-out：作为关或者代理作的服务器尝试执请求时，未能及时从上游服务器（URI标识出的服务器，例如HTTP、FTP、L

30、DAP）或者辅助服务器（例如DNS）收到响应。分类分类描述HTTP状态码分类1* 信息，服务器收到请求，需要请求者继续执操作2* 成功，操作被成功接收并处理3* 重定向，需要进步的操作以完成请求4* 客户端错误，请求包含语法错误或法完成请求5* 服务器错误，服务器在处理请求的过程中发了错误14.get和post区别1. get是从服务器上获取数据，post是向服务器传送数据。2. 传送式：get通过地址栏传输，post通过报传输3. 传送长度：get 参数长度有限制（受限于url长度），post限制。4. GET是表单提交的默认法5. Get产个TCP数据包，post产2个TCP数据包，Fir

31、efox就只发送次。6. Get在浏览器回退时是害的，post会再次提交请求。7. GET请求参数会被完整保留在浏览器历史记录，POST中的参数不会被保留。15.前端跨域解决办法参考链接： 16.内存泄漏的种情况及解决办法系统进程不再到的内存，没有及时释放，就叫做内存泄漏（memory leak） 当内存占越来越，轻则影响系统性能，重则导致进程崩溃引起内存泄漏的原因1. 意外的全局变量由于 js 对未声明变量的处理式是在全局对象上创建该变量的引。如果在浏览器中，全局对象就是 window 对象。变量在窗关闭或重新刷新页之前都不会被释放，如果未声明的变量缓存量的数据，就会导致内存泄露。/ 未声明

32、变量function fn() a = global variablefn()/使 this 创建的变量(this 的指向是 window)。function fn() this.a = global variablefn()解决法：避免创建全局变量使严格模式,在 JavaScript 件头部或者函数的顶部加上 use strict。2. 闭包引起的内存泄漏原因：闭包可以读取函数内部的变量，然后让这些变量始终保存在内存中。如果在使结束后没有将局部变量清除，就可能导致内存泄露。function fn () var a = Im a;return function () console.log(a

33、);解决：将事件处理函数定义在外部，解除闭包，或者在定义事件处理函数的外部函数中。如：在循环中的函数表达式，能复最好放到循环外。/ badfor (var k = 0; k 10; k+) var t = function (a) / 创建了10次 函数对象。console.log(a)t(k)/ goodfunction t(a) console.log(a)for (var k = 0; k 10; k+) t(k)t = null3. 没有清理的 DOM 元素引原因：虽然别的地删除了，但是对象中还存在对 dom 的引。/ 在对象中引DOMvar elements = btn: docum

34、ent.getElementById(btn),function doSomeThing() elements.btn.click()function removeBtn() / 将body中的btn移除, 也就是移除 DOM树中的btndocument.body.removeChild(document.getElementById(button)/ 但是此时全局变量elements还是保留了对btn的引, btn还是存在于内存中,不能被GC回收解决法：动删除elements.btn = null。4. 被遗忘的定时器或者回调定时器中有 dom 的引，即使 dom 删除了，但是定时器还在，所

35、以内存中还是有这个 dom。/ 定时器var serverData = loadData()setInterval(function () var renderer = document.getElementById(renderer) if (renderer) renderer.innerHTML = JSON.stringify(serverData), 5000)/ 观察者模式var btn = document.getElementById(btn)function onClick(element) element.innerHTMl = Im innerHTMLbtn.addEve

36、ntListener(click, onClick)解决法：动删除定时器和 dom。removeEventListener 移除事件监听vue 中容易出现内存泄露的种情况在 Vue SPA 开发应，那么就更要当内存泄漏的问题。因为在 SPA 的设计中，户使它时是不需要刷新浏览器的，所以 JavaScript 应需要清理组件来确保垃圾回收以预期的式效。因此开发过程中，你需要时刻警惕内1. 全局变量造成的内存泄露声明的全局变量在切换页的时候没有清空这是页window.test = mounted() export default / 此处在全局window对象中引了本页的dom对象,node: d

37、ocument.getElementById(home),name: home,解决案:在页卸载的时候顺便处理掉该引。destroyed () window.test = null / 页卸载的时候解除引2. 监听在 window/body 等事件没有解绑特别注意 window.addEventListener 之类的时间监听mounted () export default 这是页 window.addEventListener(resize, this.func) / window对象引了home页的法解决法:在页销毁的时候，顺便解除引，释放内存mounted () window.addE

38、ventListener(resize, this.func), beforeDestroy () window.removeEventListener(resize, this.func)3. 绑在 EventBus 的事件没有解绑举个例这是页mounted () export default this.$EventBus.$on(homeTask, res =this.func(res)解决法:在页卸载的时候也可以考虑解除引mounted () this.$EventBus.$on(homeTask, res = this.func(res),destroyed () this.$Even

39、tBus.$off()4. Echarts每个图例在没有数据的时候它会创建个定时器去渲染泡，页切换后，echarts 图例是销毁了，但是这个 echarts 的实例还在内存当中，同时它的泡渲染定时器还在运。这就导致 Echarts 占 CPU ，导致浏览器卡顿，当数解决法：加个 beforeDestroy()法释放该页的 chart 资源，我也试过使 dispose()法，但是 dispose 销毁这个图例，图例是不存在了，但图例的 resize()法会启动，则会报没有 resize 这个法， clear()法则是清空图例beforeDestroy () this.chart.clear()5. v-if 指令产的内存泄露v-if 绑定到 false 的值，但是实际上 dom 元素在隐藏的时候没有被真实的释放掉。如下的例中，我们加载了个带有常多选项的选择框，然后我们到了个显/隐藏按钮，通过个 v-if 指令从虚拟 DOM 中添加或移除它。这个例的问题在于这个 v-if 指令会从 DOM 中移除级元素，但是我们并没有清除HideShowscrip