前端十几道含答案的大厂面试题总结

年底了，又到了跳槽季啦，该刷题走起了。这里总结了一些被问到可能会懵逼的面试真题，有需要的可以看下～

1. 说说JavaScript中有哪些异步编程方式?

1. 回调函数

 f1(f2);

回调函数是异步编程的基本方法。其优点是易编写、易理解和易部署；缺点是不利于代码的阅读和维护，各个部分之间高度耦合 （Coupling），流程比较混乱，而且每个任务只能指定一个回调函数。

2. 事件监听

 f1.on('done',f2);

事件监听即采用事件驱动模式，任务的执行不取决于代码的顺序，而取决于某个事件是否发生。其优点是易理解，可以绑定多个事件，每个事件可以指定多个回调函数，可以去耦合， 有利于实现模块化；缺点是整个程序都要变成事件驱动型，运行流程会变得不清晰。

3. 发布/订阅

 f1: jQuery.publish("done"); f2: jQuery.subscribe("done", f2);

假定存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行，这就叫做 "发布/订阅模式" （publish-subscribe pattern），又称 "观察者模式" （observer pattern）。该 方法的性质与"事件监听"类似，但其优势在于可以 通过查看"消息中心"，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

4. promise对象

 f1().then(f2);

Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供 统一接口 ；思想是， 每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。其优点是回调函数是链式写法，程序的流程非常清晰，而且有一整套的配套方法， 可以实现许多强大的功能，如指定多个回调函数、指定发生错误时的回调函数， 如果一个任务已经完成，再添加回调函数，该回调函数会立即执行，所以不用担心是否错过了某个事件或信号；缺点就是编写和理解相对比较难。

2. 有哪些监控网页卡顿的方法？

卡顿
网页的 FPS

网页内容在不断变化之中，网页的 FPS 是只浏览器在渲染这些变化时的帧率。帧率越高，用户感觉网页越流畅，反之则会感觉卡顿。

监控卡顿方法

每秒中计算一次网页的 FPS 值，获得一列数据，然后分析。通俗地解释就是，通过 requestAnimationFrame API 来定时执行一些 JS 代码，如果浏览器卡顿，无法很好地保证渲染的频率，1s 中 frame 无法达到 60 帧，即可间接地反映浏览器的渲染帧率。

 var lastTime = performance.now(); var frame = 0; var lastFameTime = performance.now(); var loop = function(time) { var now =  performance.now(); var fs = (now - lastFameTime); lastFameTime = now; var fps = Math.round(1000/fs); frame++; if (now > 1000 + lastTime) { var fps = Math.round( ( frame * 1000 ) / ( now - lastTime ) ); frame = 0; lastTime = now; }; window.requestAnimationFrame(loop); } 

我们可以定义一些边界值，比如连续出现3个低于20的 FPS 即可认为网页存在卡顿。

3. 说说script 标签中的defer 和 async 异同点？

defer
这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在script元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad时间触发前执行，因此最好只包含一个延迟脚本。

对于不支持的浏览器，如safari，并不会延迟执行，还是会阻塞浏览器渲染。

async
这个属性与defer类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照它们的先后顺序执行。

第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。

总结
async 和 defer 虽然都是异步的，不过还有一些差异，使用 async 标志的脚本文件一旦加载完成，会立即执行；而使用了 defer 标记的脚本文件，需要在 DOMContentLoaded 事件之前执行。

可以再扩展一下：link preload也可以用于js提前加载，和上述两者的区别？ 还有应用场景上的建议

4. margin:auto 为什么可以实现垂直居中？

margin概念：

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top，margin-right，margin-bottom和margin-left。指定的外边距允许为负数。

margin的top和bottom属性对非替换内联元素无效，例如span和 code。

实现垂直居中

想要实现垂直方向的居中可以用绝对定位：

 div  { width: 20px; height: 20px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } 

为什么能实现垂直居中

块状水平元素，如div元素（下同），在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；如果有margin-left/margin-right,padding-left/padding-right,border-left-width/border-right-width等，实际内容区域会响应变窄。

但是，当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样，含有以下特性：

• 如果一侧定值，一侧auto，auto为剩余空间大小；
• 如果两侧均是auto, 则平分剩余空间

5. Cdn有哪些优化静态资源加载速度的方法？

可以参考阿里云团队的《CDN之我见》。总结如下：

资源调度：CDN会根据用户接入网络的ip寻找距离用户最优路径的服务器。调度的方式主要有DNS调度、http 302调度、使用 HTTP 进行的 DNS 调度（多用于移动端）； 缓存策略和数据检索：CDN服务器使用高效的算法和数据结构，快速的检索资源和更新读取缓存； 网络优化：从OSI七层模型进行优化，达到网络优化的目的。 L1物理层：硬件设备升级提高速度 L2数据链路层：寻找更快的网络节点、确保 Lastmile 尽量短 L3路由层：路径优化，寻找两点间最优路径 L4传输层：协议TCP优化，保持长连接、TCP快速打开 L7应用层：静态资源压缩、请求合并

6. fetch 和 ajax 的区别？

Ajax 技术的核心是XMLHttpRequest 对象（简称XHR）。 XHR 为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。 看一个调用例子：

 var xhr = createXHR(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get", "example.txt", true); xhr.send(null); 

fetch号称是ajax的替代品，它的API是基于Promise设计的，旧版本的浏览器不支持Promise，需要使用polyfill es6-promise,举个例子：

 // 原生XHR var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText)   // 从服务器获取数据 } } xhr.send() // fetch fetch(url) .then(response => { if (response.ok) { return response.json(); } }) .then(data => console.log(data)) .catch(err => console.log(err)) 

看起来好像是方便点，then链就像之前熟悉的callback。 在MDN上，讲到它跟jquery ajax的区别，这也是fetch很奇怪的地方：

当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ）， 仅当网络故障时或请求被阻止时，才会标记为 reject。 默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）.

7. 求代码输出值(函数/原型 指向问题)？

2

函数也是一个 object, 可以拥有属性和方法, Foo.getName 被赋值为一个输出 2 的函数, 所以输出 2

 Foo.getName = function () { console.log(2) } Foo.getName() // 输出 2

4
getName() 父级作用域为 window, 相当于调用 window.getName(), Foo() 还未被执行, 不需要考虑 Foo 函数体内对 getName 的影响, 剩下最后两个

 var getName = function () { console.log(4) } // 函数表达式 function getName() { // 函数声明 console.log(5) } 

函数声明会提升, 也就是即使在后边声明的函数, 在前别也能调用, 如:

 getName() // 输出 5 function getName() { // 函数声明 console.log(5) } 

但题中函数表达式会覆盖函数声明, 来看下边这段:

 getName() // 输出 5, 函数声明提升的结果 var getName = function () { console.log(4) } // 函数表达式 getName() // 输出 4, 函数声明提升后, 又被函数表达式覆盖了 function getName() { // 函数声明 console.log(5) } getName() // 还是输出 4, 覆盖的结果, 函数声明提升了, 不按照文本的顺序重新声明的, 你可以想象它被移到了最前边 

1

 Foo().getName() 

我们一步步拆解, 上边的语句相当于

 var context = Foo(); context.getName(); 

来看 Foo 的声明:

 function Foo() { // 下边这句没有 var, let 或 const, 相当于 window.getName = xxx getName = function () { console.log(1) } return this // 这里的 this 要看调用方式, 直接调用 Foo() 则 this 指向 window, new 调用, this 指向 new 出来的实例 } 

仔细看上边的注释, Foo 函数体内对 window.getName 进行了改写, 这是下一个输出的关键

1
如上边分析的, Foo() 函数的执行, 对 window.getName 进行了改写, window.getName 此时已经变为 function () { console.log(1) }

2

 new Foo.getName() 

该语句先执行 Foo.getName, 与第一个结论一致, 输出 2, 只是 new 会返回一个 object, 这个 object 指向 new 出来的实例, 但这里这个实例没被使用, 就不进一步分析了

3

 new Foo().getName() 

拆解如下

 var foo = new Foo() foo.getName() 

如果你是一路看分析下来的, 就会明白 foo 这个实例, 就是 Foo 函数体里的 this. 从原型的知识中, 我们可以知道, 如果调用一个实例的方法, 在实例方法中找不到, 就会从实例原型中找.

也就是会找到下边这个方法, 并执行:

 Foo.prototype.getName = function() { console.log(3) } 

3

 new new Foo().getName()

拆解如下

 var foo = new Foo(); var bar = new foo.getName(); 

从上边 new Foo().getName() 的分析, 可以知道 foo.getName() 是在 foo 的原型里边的, 这里 new 了一下原型里边的函数, 相当于先执行了, 再返回了一个新的实例. 这里的执行, 也就是执行了下边这个方法:

 Foo.prototype.getName = function() { console.log(3) } 

只是 new 额外返回一个实例, 实例没被使用, 没什么特殊的.

如果还有不明白的地方, 建议阅读 《JavaScript 语言精髓》第四章 (本人看的是修订版) 关于函数调用相关的内容. 相关电子书可以微信关注公众号 前端Q, 回复 ebook 阅读. 此外, 建议购买正版.

8. 如何判断左右小括号是否全部匹配。如 ( ( ))()((((()))))？

 /** * @param {string} s * @return {boolean} */ var isValid = function(s) { var stack = [] var map = { '(' : ')', '[': ']', '{': '}' } for (var char of s) { if(char in map) { stack.push(char) } else { if( !stack.length || char != map[stack.pop()]) { return false } } } // 如果最后stack 里没有元素了， 就一定是匹配的 return !stack.length }; 

9. 用css画一个扇形？

 width: 0; height: 0; border: solid 100px red; border-color: red transparent transparent transparent; border-radius: 100px; 

10. 用css实现已知或者未知宽度的垂直水平居中？

 / / 1 .wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; } } // 2 .wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } // 3 .wraper { .box { display: flex; justify-content:center; align-items: center; height: 100px; } } // 4 .wraper { display: table; .box { display: table-cell; vertical-align: middle; } } //5 .container { display: grid; grid-auto-columns: 1fr; grid-auto-rows: 200px; background: #eee; } .parent { background: grey; justify-self: center; align-self: center; } .child { font-size: 30px; } //6、块级元素：calc() .parent { width: 300px; height: 300px; border: 1px solid red; position: relative; } .child { width: 100px; height: 100px; background: blue; padding: -webkit-calc((100% - 100px) / 2); padding: -moz-calc((100% - 100px) / 2); padding: -ms-calc((100% - 100px) / 2); padding: calc((100% - 100px) / 2); background-clip: content-box; } //7、margin:auto实现绝对定位元素的居中 .element { width: 600px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了这个就自动居中了 */ } //8、 .parent{ display: flex; } .parent{ display: flex; width: 500px; height: 500px; background-color: pink; } .child{ flex: 0 0 auto; margin: auto; width: 100px; height: 100px; background-color: red; 

11. 如何理解回流和重绘？ ？

回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。 由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。

常见的会导致回流的元素：

• 常见的几何属性有 width、height、padding、margin、left、top、border 等等。
• 最容易被忽略的操作：获取一些需要通过即时计算得到的属性,当你要用到像这样的属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 时，浏览器为了获取这些值，也会进行回流。
• 当我们调用了 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发回流。原理是一样的，都为求一个“即时性”和“准确性”。

避免方式：

1. 避免逐条改变样式，使用类名去合并样式
2. 将 DOM “离线”,使用DocumentFragment
3. 提升为合成层,如使用will-change

 #divId { will-change: transform; } 

优点

• 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
• 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
• 对于 transform 和 opacity 效果，不会触发 layout 和 paint

注意：

部分浏览器缓存了一个 flush 队列，把我们触发的回流与重绘任务都塞进去，待到队列里的任务多起来、或者达到了一定的时间间隔，或者“不得已”的时候，再将这些任务一口气出队。但是当我们访问一些即使属性时，浏览器会为了获得此时此刻的、最准确的属性值，而提前将 flush 队列的任务出队。

12. 手写一个Promise？
答案太长，你可以参考这个issues:https://github.com/LuckyWinty/fe-weekly-questions/issues/20

13. 谈谈web安全问题及解决方案
答案太长，你可以参考这个issues:https://github.com/LuckyWinty/fe-weekly-questions/issues/1

14. HTTPS和HTTP有什么区别？
答案太长，你可以参考这个issues:https://github.com/LuckyWinty/fe-weekly-questions/issues/2

15. Webpack性能优化你知道哪些？
答案太长，你可以参考这个issues:https://github.com/LuckyWinty/fe-weekly-questions/issues/4

更多

本期汇总暂时到这里，更多题目，可以关注： https://github.com/LuckyWinty/fe-weekly-questions

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。