网上面试题。还真是有些东西，也能让你面试中级前端工程师更有底气。但是记得把背面试题作为你唯一的求职方向。另外欢迎大家加入我们的前端交流群2~，里面有很多小姐姐。下一部分会是非常硬核的源码、原理，以及自己写框架和库。觉得写的不错的话可以关注点个star~问题越开放越能体现答主的水平。一场好的面试，不仅能发现面试官的不足，更能发现他的闪光点。可以提高面试官自身的技巧1.第一题结合了css和Html。请简单描述一下如何让一个元素在窗口中消失并垂直和水平居中，以及对Flex布局的理解标准答案：百度上当然有很多，这里就不细说了。一个好的回答思路是：先列出消失元素的解决方案，display:none和visibility:hidden;的区别，v-if和v-show的区别扩展到vue框架，可以结合reflow和重绘说明回流必然引起重绘，重绘不一定引起回流回流（Reflow）：当RenderTree中部分或全部元素的大小、结构或某些属性发生变化时，浏览器重新渲染部分或全部元素。所有文档的过程称为回流以下内容会引起回流：页面第一次渲染，浏览器窗口大小改变，元素大小或位置改变，元素内容改变（数量textorimagesize等），元素字体大小变化，可见DOM增加或删除元素激活CSS伪类（例如：hover）来查询某些属性或调用某些方法一些常用的属性和导致回流的方法：clientWidth,clientHeight,clientTop,clientLeftoffsetWidth,offsetHeight,offsetTop,offsetLeftscrollWidth,scrollHeight,scrollTop,scrollLeftscrollIntoView(),scrollIntoViewIfNeeded()getComputedStyle()getBoundingClientRect()scrollTo()redraw页面中元素样式改变时不影响其在文档流中的位置（例如：color、background-color、visibility等），浏览器会将新的样式分配给元素并重新绘制，这个过程称为重绘。性能影响对比：原文出处，感谢作者列出了元素垂直居中的方案，以及各种方案的缺陷16种居中方案，感谢作者讲述了flex的常见场景，什么是flex1确实。上面阮一峰老师的Flex布局如果你回答的很好，还需要在重绘和回流上下功夫。这是前端性能优化的基础，而性能优化是前端最重要的核心基本功点，也是面试官最感兴趣的基础之一。2.这个你知道吗，自己实现调用、申请、绑定了吗？？50行javaScript代码实现call、apply、bind。这是一个很基础的技能点。检查您对闭包和函数调用的理解。感觉自己写的比较简单易懂。3、如何减少重绘和回流次数：4、你对前端异步编程了解多少？如果这个问题的答案是完美的，那么就可以判断这个人离开了初级前端工程师。前端的核心是异步编程。重要参考。还是老规矩，由易到难。传统定时器，异步编程：setTimeout()、setInterval()等。缺点：当同步代码较多时，异步定时器的任务能否在指定时间执行并不确定。比如：在第100行执行代码setTimeout(()=>{console.log(1)},1000)，1s后执行里面的函数，但是可能有10000行代码+很多计算任务，比如循环遍历，则1s后无法输出console.log(1)。可能需要2s甚至更长的时间。setInterval同上。当同步代码较多时，不保证每次都以相同的间隔执行代码。如果是动画，那么可能会掉帧。ES6异步编程：promisegeneratorasyncnewpromise((resolve,reject)=>{resolve()}).then()....缺点：仍然没有摆脱回调函数，虽然改进了回调地狱生成器函数调用next()执行下一个yield的代码内容，如果传入参数，则作为上一个`yield`的返回值缺点：不够自动asyncawait只有async函数可以使用await将异步代码变成同步代码写，但是由于async函数本身返回的是promise，很容易产生async嵌套地狱但是，定时器动画总是存在两个问题。第一个是动画的循环间隔不好确定。如果设置的很长，动画会不够流畅。如果设置较短，浏览器的重绘频率就会达到瓶颈。推荐最佳周期间隔为17ms（大部分电脑的显示器刷新率为60Hz，1000ms/60）；第二个问题是定时器的第二个时间参数只是指定了多久动画任务会被添加到浏览器的UI线程队列中，如果UI线程繁忙，动画不会立即执行。为了解决这些问题，在H5中加入了requestAnimationFrame和requestIdleCallback。requestAnimationFrame会把每一帧的所有DOM操作集中起来，在一次重绘或回流中完成，重绘或回流的时间间隔紧跟浏览器的刷新。在隐藏或不可见元素中的频率，requestAnimationFrame不会重绘或重排，这当然意味着更少的CPU、GPU和内存使用requestAnimationFrame是浏览器专门为动画提供的API，在运行时浏览器会自动优化方法调用，如果页面不活动时，动画会自动暂停，有效节省CPU开销。性能对比：requestAnimationFrame的回调会每帧执行一次，属于高优先级任务，而requestIdleCallback回调不一定是低优先级任务。我们看到的网页都是浏览器一帧一帧绘制出来的。一般认为，当FPS为60时，比较流畅，当FPS为个位数时，则是用户可感知的滞后。那么浏览器在一帧中做了什么，如下图：图中一帧包括用户交互、js执行、requestAnimationFrame调用、布局计算、页面重绘。如果某一帧要执行的任务不多，而上述任务在16ms（1000/60）以内完成，那么这一帧就会有一定的空闲时间，这个时间刚好可以用于执行requestIdleCallback的回调，如下图：5.简述浏览器的Eventloop和Node.js的EventloopEventLoop的面试题总会有bug。代码量和计算量太小。很可能是microtask的代码还没有执行，timer到了就会执行timer。6、闭包和V8垃圾回收机制：JS垃圾回收机制的基本原理是找出不再使用的变量，然后释放它们占用的内存。垃圾收集器将以固定的时间间隔定期执行此操作。V8的垃圾回收策略主要基于分代垃圾回收机制。在V8中，内存分为新生代和老年代。驻留在内存中的对象。V8堆的整体大小等于新生代使用的内存空间加上老年代的内存空间，并且只能在启动时指定，也就是说不能在运行时自动扩容。如果超过限制，将导致过程错误。Scavenge算法是基于分代的，新生代中的对象主要通过Scavenge算法进行垃圾回收。在Scavenge的具体实现中，主要使用了一种复制的方法——切尼算法。Cheney算法将堆内存分为两部分，一部分正在使用的空间称为From空间，另一部分处于空闲状态的空间称为To空间。当一个对象被分配时，它首先被分配到From空间。当垃圾回收开始时，From空间中存活的对象会被检查并复制到To空间，非存活对象占用的空间会被释放。复制后，From空间和To空间的角色互换。当一个对象在多次复制后存活下来，它就会被认为是一个长生命周期的对象，然后将它移到老年代，用新的算法进行管理。还有一种情况，如果一个对象被复制到To空间，并且To空间占用超过25%，这个对象就会直接提升到老年代空间。Mark-sweep和mark-organize算法对于老年代的对象，主要使用mark-sweep和mark-organize算法。Mark-clear与上述标记相同。与Scavenge算法相比，mark-clear不会将内存空间一分为二。mark-clear会在mark阶段标记存活的对象，而在内存回收阶段，会清除没有被标记的对象。标记整理是为了解决标记清除后留下的内存碎片问题。增量标记算法之前的三种算法都需要暂停正在执行的JavaScript应用逻辑，并在垃圾收集完成后恢复。这种行为称为“停止世界”。在V8新生代的分代收集中，只收集新生代，新生代通常配置更小，存活对象更少，所以fullpause的影响并不大，老年代则相反。为了减少所有老年代全堆垃圾回收带来的停顿时间，V8将标记过程逐一分解为子标记过程，让垃圾回收标记和JS应用逻辑交替进行，直到标记阶段完成.增量标记改进后，垃圾回收的最大停顿时间可以减少到原来的1/6左右。内存泄漏内存泄漏（MemoryLeak）是指程序中已经动态分配的堆内存没有被释放或由于某种原因无法释放，造成系统内存的浪费，造成运行速度变慢等严重后果程序速度甚至系统崩溃。内存泄漏的常见场景：缓存：内存中的数据还没有被清除，范围还没有被释放（关闭），无效的DOM引用了不必要的全局变量，定时器没有被清除（React中的合成事件，和原生事件的绑定区别）事件监控针对清除内存泄漏进行了优化7.您熟悉哪些通信协议，它们的优缺点？通信协议详解我这篇文章对http1.0http1.1http2.0httpswebsocket等协议进行了很详细的介绍。8.从地址栏输入url，发生了什么？性能优化的方法如下：性能优化不全手册如何优化你的超大型React应用我的两篇文章基本都是前端基础的性能优化，后面会再出专栏。9、浏览器缓存实现，请介绍：1、什么是preload、prefetch、dns-prefetch等？优化指定资源的加载。使浏览器能够确定资源的类型，因此它可以判断将来是否可以重用。浏览器可以通过指定as属性来判断请求是否符合内容安全策略。浏览器可以根据资源类型（例如图像/webp）发送适当的接受标头。PrefetchPrefetch是一个低优先级的资源提示，它允许浏览器在后台（空闲时）获取将来可能使用的资源，并将它们存储在浏览器的缓存中。加载页面后，它会开始下载其他资源，当用户单击带有预取的链接时，它会立即从缓存中加载内容。DNSPrefetchingDNS预取允许浏览器在用户浏览页面的同时在后台运行DNS解析。这样，当用户点击一个链接时，DNS解析就完成了，所以可以减少延迟。可以在链接标签的属性中添加rel="dns-prefetch'，对指定的URL进行DNS预取，推荐处理Google字体、GoogleAnalytics和CDN。2.servece-worker，PWA渐进式Web应用程序PWA文档3.localstorage,sessionstorage,cookie,session等浏览器session存储和持久化存储4.浏览器缓存的实现机制10.什么是同源策略，跨域解决方案，cookies可以跨域吗？跨域解决方案Q:为什么会出现跨域问题?A:由于浏览器的同源策略限制，浏览器会拒绝跨域请求。注意：严格来说浏览器不会拒绝所有的跨域请求，其实就是跨域读操作被拒绝，浏览器的同源限制策略是这样实现的：通常浏览器允许跨源写（Cross-originwrites），比如链接和重定向；通常浏览器允许跨源嵌入，比如img和脚本标签；通常浏览器不允许跨源读取。问：什么是跨源？A：非同源请求，都是跨域的。名词解释：同源——如果两个页面有相同的协议（protocol）、端口（port）和主机（host），那么这两个页面属于同源（origin）。Q：为什么会有跨域要求？A：场景——项目服务后，不同职责的服务分散在不同的项目中。往往这些项目的域名都不一样，但是一个需求可能需要对应多个服务。需要调用不同服务的接口，所以会出现跨域。方法：JSONP、CORS、postmessage、websocket、反向代理服务器等第一部分结束，欢迎大家关注，等待下一篇很硬核的文章出来~期待你的加入~现在加群已经满了，所以新开了一个二群
