阿里前端攻城狮们写了一份前端面试题答案，请查收

前言

话说一周前，我发了这样一条沸点：

因而我真的就建群收集了题目，和团队的同事一块儿写答案，咱们也不图什么，就是想作一件有意义的事情，如今我整理了下咱们的回答，有的不必定就是很是具体的回答，但也提供了思路和参考资料，你们看看是否还有什么补充的，或者面试时遇到的问题，也欢迎补充

[高德一面]一个 tcp 链接能发几个 http 请求？(LVYOU)

若是是 HTTP 1.0 版本协议，通常状况下，不支持长链接，所以在每次请求发送完毕以后，TCP 链接即会断开，所以一个 TCP 发送一个 HTTP 请求，可是有一种状况能够将一条 TCP 链接保持在活跃状态，那就是经过 Connection 和 Keep-Alive 首部，在请求头带上 Connection: Keep-Alive，而且能够经过 Keep-Alive 通用首部中指定的，用逗号分隔的选项调节 keep-alive 的行为，若是客户端和服务端都支持，那么其实也能够发送多条，不过此方式也有限制，能够关注《HTTP 权威指南》4.5.5 节对于 Keep-Alive 链接的限制和规则。

而若是是 HTTP 1.1 版本协议，支持了长链接，所以只要 TCP 链接不断开，即可以一直发送 HTTP 请求，持续不断，没有上限； 一样，若是是 HTTP 2.0 版本协议，支持多用复用，一个 TCP 链接是能够并发多个 HTTP 请求的，一样也是支持长链接，所以只要不断开 TCP 的链接，HTTP 请求数也是能够没有上限地持续发送

[腾讯一面]Virtual Dom 的优点在哪里？(B_Cornelius)

「Virtual Dom 的优点」其实这道题目面试官更想听到的答案不是上来就说「直接操做/频繁操做 DOM 的性能差」，若是 DOM 操做的性能如此不堪，那么 jQuery 也不至于活到今天。因此面试官更想听到 VDOM 想解决的问题以及为何频繁的 DOM 操做会性能差。

首先咱们须要知道：

DOM 引擎、JS 引擎 相互独立，但又工做在同一线程（主线程） JS 代码调用 DOM API 必须 挂起 JS 引擎、转换传入参数数据、激活 DOM 引擎，DOM 重绘后再转换可能有的返回值，最后激活 JS 引擎并继续执行如有频繁的 DOM API 调用，且浏览器厂商不作“批量处理”优化， 引擎间切换的单位代价将迅速积累若其中有强制重绘的 DOM API 调用，从新计算布局、从新绘制图像会引发更大的性能消耗。

其次是 VDOM 和真实 DOM 的区别和优化：

1. 虚拟 DOM 不会立马进行排版与重绘操做
2. 虚拟 DOM 进行频繁修改，而后一次性比较并修改真实 DOM 中须要改的部分，最后在真实 DOM 中进行排版与重绘，减小过多DOM节点排版与重绘损耗
3. 虚拟 DOM 有效下降大面积真实 DOM 的重绘与排版，由于最终与真实 DOM 比较差别，能够只渲染局部

[字节跳动] common.js 和 es6 中模块引入的区别？ (霍小叶)

CommonJS 是一种模块规范，最初被应用于 Nodejs，成为 Nodejs 的模块规范。运行在浏览器端的 JavaScript 因为也缺乏相似的规范，在 ES6 出来以前，前端也实现了一套相同的模块规范 (例如: AMD)，用来对前端模块进行管理。自 ES6 起，引入了一套新的 ES6 Module 规范，在语言标准的层面上实现了模块功能，并且实现得至关简单，有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对 ES6 Module 兼容还不太好，咱们平时在 Webpack 中使用的 export 和 import，会通过 Babel 转换为 CommonJS 规范。在使用上的差异主要有：

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
3. CommonJs 是单个值导出，ES6 Module能够导出多个
4. CommonJs 是动态语法能够写在判断里，ES6 Module 静态语法只能写在顶层
5. CommonJs 的 this 是当前模块，ES6 Module的 this 是 undefined

[未知] cookie token 和 session 的区别(Roxannej)

这道题绝对不是你回答的点越多就越好。这道题考察的是你对浏览器缓存知识的理解程度，因此你应该回答的是 Cookie、 Session、Token 的产生背景、原理、有什么问题，在回答这个的基础上把差异讲出来。把这些东西答出本质，再加点装逼的东西，再故意拓展讲到你准备的其余内容才是答好这道题的关键，而要理解好这些东西，其实一两天就够了。关于 Cookie，最近还发生了 Chrome80 屏蔽第三方 Cookie 的事件，若是真的问到这个问题，讲到这件事情妥妥的加分项，前提是你对这件事情也有比较深刻的了解。关于 Cookie 和这件事情 我写了篇文章 github.com/mqyqingfeng… 能够看一下。

[头条]如何选择图片格式，例如 png, webp(B_Cornelius)

图片格式	压缩方式	透明度	动画	浏览器兼容	适应场景
JPEG	有损压缩	不支持	不支持	全部	复杂颜色及形状、尤为是照片
GIF	无损压缩	支持	支持	全部	简单颜色，动画
PNG	无损压缩	支持	不支持	全部	须要透明时
APNG	无损压缩	支持	支持	FirefoxSafariiOS Safari	须要半透明效果的动画
WebP	有损压缩	支持	支持	ChromeOperaAndroid ChromeAndroid Browser	复杂颜色及形状浏览器平台可预知
SVG	无损压缩	支持	支持	全部（IE8以上）	简单图形，须要良好的放缩体验须要动态控制图片特效

[未知]首屏和白屏时间如何计算？(jhinnn)

首屏时间的计算，能够由 Native WebView 提供的相似 onload 的方法实现，在 ios 下对应的是 webViewDidFinishLoad，在 android 下对应的是onPageFinished事件。

白屏的定义有多种。能够认为“没有任何内容”是白屏，能够认为“网络或服务异常”是白屏，能够认为“数据加载中”是白屏，能够认为“图片加载不出来”是白屏。场景不一样，白屏的计算方式就不相同。

方法1：当页面的元素数小于x时，则认为页面白屏。好比“没有任何内容”，能够获取页面的DOM节点数，判断DOM节点数少于某个阈值X，则认为白屏。 方法2：当页面出现业务定义的错误码时，则认为是白屏。好比“网络或服务异常”。 方法3：当页面出现业务定义的特征值时，则认为是白屏。好比“数据加载中”。

[未知]小程序和 H5 有什么区别？(张慈仁)

1. 渲染方式与 H5 不一样，小程序通常是经过 Native 原生渲染的，可是小程序同时也支持 web 渲染，若是使用 web 渲染的方式，咱们须要初始化一个WebView 组件，而后在 WebView 中加载 H5 页面；

因此当咱们开发一个小程序时，一般会使用 hybrid 的方式，即会根据具体状况选择部分功能用小程序原生的代码来开发，部分功能经过 WebView 加载 H5 页面来实现。Native 与 Web 渲染混合使用，以实现项目的最优解；

这里值得注意的是，小程序下，native 方式一般状况下性能要优于 web 方式。

2. 小程序特有的双线程设计。 H5 下咱们全部资源一般都会打到一个 bundle.js 文件里（不考虑分包加载），而小程序编译后的结果会有两个bundle，index.js封装的是小程序项目的 view 层，以及 index.worker.js 封装的是项目的业务逻辑，在运行时，会有两条线程来分别处理这两个bundle，一个是主渲染线程，它负责加载并渲染 index.js 里的内容，另一个是 Service Worker线 程，它负责执行 index.worker.js 里封装的业务逻辑，这里面会有不少对底层api调用。

[未知]如何判断 0.1 + 0.2 与 0.3 相等？(红白)

做为一道面试题，我以为重要的是要讲出一点其余人通常不会答出来的深度。像这道题，能够从原理和解决方案两个地方做为答题点，最好在编一个案例。大体讲本身遇到过这个问题，因而很好奇深刻研究了一下，发现是浮点数精度致使……原理怎样怎样……而后又看了业界的库的源码，而后怎样怎样解决。

关于原理，我专门写了一篇文章 github.com/mqyqingfeng… 来解释，实际回答的时候，我以为答出来

1. 非是 ECMAScript 独有
2. IEEE754 标准中 64 位的储存格式，好比 11 位存偏移值
3. 其中涉及的三次精度丢失

就已经 OK 了。

再讲解决方案，这个能够直接搜索到，各类方案都了解一下，比较一下优劣，还能够参考业界的一些库的实现，好比 math.js，不过相关的我并无看过……

若是还有精力的话，能够从加法再拓展讲讲超出安全值的数字的计算问题。

因此我以为一能回答出底层实现，二能回答出多种解决方案的优劣，三能拓展讲讲 bignum 的处理，就是一个很是不错的回答了。

[腾讯二面]了解v8引擎吗，一段js代码如何执行的（B_Cornelius）

在执行一段代码时，JS 引擎会首先建立一个执行栈

而后JS引擎会建立一个全局执行上下文，并push到执行栈中, 这个过程JS引擎会为这段代码中全部变量分配内存并赋一个初始值（undefined），在建立完成后，JS引擎会进入执行阶段，这个过程JS引擎会逐行的执行代码，即为以前分配好内存的变量逐个赋值(真实值)。

若是这段代码中存在function的声明和调用，那么JS引擎会建立一个函数执行上下文，并push到执行栈中，其建立和执行过程跟全局执行上下文同样。但有特殊状况，即当函数中存在对其它函数的调用时，JS引擎会在父函数执行的过程当中，将子函数的全局执行上下文push到执行栈，这也是为何子函数可以访问到父函数内所声明的变量。

还有一种特殊状况是，在子函数执行的过程当中，父函数已经return了，这种状况下，JS引擎会将父函数的上下文从执行栈中移除，与此同时，JS引擎会为还在执行的子函数上下文建立一个闭包，这个闭包里保存了父函数内声明的变量及其赋值，子函数仍然可以在其上下文中访问并使用这边变量/常量。当子函数执行完毕，JS引擎才会将子函数的上下文及闭包一并从执行栈中移除。

最后，JS引擎是单线程的，那么它是如何处理高并发的呢？即当代码中存在异步调用时JS是如何执行的。好比setTimeout或fetch请求都是non-blocking的，当异步调用代码触发时，JS引擎会将须要异步执行的代码移出调用栈，直到等待到返回结果，JS引擎会当即将与之对应的回调函数push进任务队列中等待被调用，当调用(执行)栈中已经没有须要被执行的代码时，JS引擎会马上将任务队列中的回调函数逐个push进调用栈并执行。这个过程咱们也称之为事件循环。

附言：须要更深刻的了解JS引擎，必须理解几个概念，执行上下文，闭包，做用域，做用域链，以及事件循环。建议去网上多看看相关文章，这里推荐一篇很是精彩的博客，对于JS引擎的执行作了图形化的说明，更加便于理解。

tylermcginnis.com/ultimate-gu…