mqyqingfeng / frontend-interview-question-and-answer

前端校招面试题和答案

我是冴羽

很高兴你能关注我，我从 17 年开始写博客至今，已完成了深入系列、专题系列、underscore 系列、ES6 系列、TypeScript 系列、博客搭建系列等 6 个系列上百篇文章，做一个持续原创，输出干货的博主。

• 公众号：冴羽的 JavaScript 博客
• 微信号：mqyqingfeng
• 茶话会：认识自己、克服拖延、快速成长
• 可能是中国最好的 TS 入门到进阶系统教程
• 小册：《Next.js 开发指南》

frontend-interview-question-and-answer's Issues

[未知]怎样理解前端工程化?

[汇总]阿里前端攻城狮们写了一份前端面试题答案，请查收(一)

前言

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

于是我真的就建群收集了题目，和团队的同事一起写答案，我们也不图什么，就是想做一件有意义的事情，现在我整理了下我们的回答，有的不一定就是非常具体的回答，但也提供了思路和参考资料，大家看看是否还有什么补充的？

[高德一面]一个 tcp 连接能发几个 http 请求？

如果是 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 的优势在哪里？

「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 的区别

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

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

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

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

首屏时间的计算，可以由 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 相等？

作为一道面试题，我觉得重要的是要讲出一点其他人一般不会答出来的深度。像这道题，可以从原理和解决方案两个地方作为答题点，最好在编一个案例。大致讲自己遇到过这个问题，于是很好奇深入研究了一下，发现是浮点数精度导致……原理怎样怎样……然后又看了业界的库的源码，然后怎样怎样解决。

关于原理，我专门写了一篇文章 mqyqingfeng/Blog#155 来解释，实际回答的时候，我觉得答出来

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

就已经 OK 了。

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

如果还有精力的话，可以从加法再拓展讲讲超出安全值的数字的计算问题。

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

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

在执行一段代码时，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引擎的执行做了图形化的说明，更加便于理解。

https://tylermcginnis.com/ultimate-guide-to-execution-contexts-hoisting-scopes-and-closures-in-javascript/?spm=ata.13261165.0.0.2d8e16798YR8lw

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

前言

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

于是我真的就建群收集了题目，和团队的同事一起写答案，我们也不图什么，就是想做一件有意义的事情，现在我整理了下我们的回答，有的不一定就是非常具体的回答，但也提供了思路和参考资料，大家看看是否还有什么补充的？

[字节跳动] 怎么与服务端保持连接

和服务端保持连接，最简单粗暴的方法就是通过请求轮询保持跟服务端的通信，客户端不光要花成本维护定时轮询器，还会使得服务器压力变大，所以不推荐。

还有一种可以借助请求超时的设置，将超时时间设置一个足够大的值，客户端发起连接后，只要服务端不返回消息，整个连接阶段都会受到阻塞，所以这种方式也不推荐。

最后一种是WebSocket，当服务器完成协议从HTTP到WebSocket的升级后，服务端可以主动推送信息给客户端，解决了轮询造成的同步延迟问题。由于 WebSocket 只需要一次 HTTP 握手，服务端就能一直与客户端保持通信，直到关闭连接，这样就解决了服务器需要反复解析 HTTP 协议，减少了资源的开销。

[字节跳动] 谈一下隐式类型转换

这个问题可以拓展讲成 JavaScript 中的类型转换，分为两类，显式类型转换和隐式类型转换，当我们用 Number() 等函数的时候，就是显式类型转换，其转换规则是当是基本类型时，参照规范中的对应表进行转换，当不是基本类型的时候，先参照规范中的 ToPrimitive 方法转换为基本类型，再按照对应表转换，当执行 ToPrimitive 的时候，又会根据情况不同，判断先执行对象的 valueOf 方法还是 toString 方法进行准换，这个可以参照 JavaScript 深入之头疼的类型转换(上)，而当我们进行运算的时候，经常发生的就是隐式类型转换，比如 + 和 == 运算符，当 + 运算符的时候，更倾向于转成字符串，而当 == 的时候，更倾向于转为数字，这个在 JavaScript 深入之头疼的类型转换(下)中会讲到……但是我还在写……总之，回答类型转换的时候，最好是扯到规范中，表明你在研究这块内容的时候，还专门去看过规范。基本上回答了这里，对类型转换说明已经有很多的了解，但你可以再拓展讲一下，比如当时我在学习类型转换的时候，还专门去研究了如何花式表示 26 个字母，比如在控制台打印这样一句话：

[[][0] + []][0][5]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[[[] == []][0] + []][0][2]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]]+[]][0][23]+[[][0] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[+[1 + [[][0] + []][0][3] +309][0] + []][0][7]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][0]

花式表示字母的原理大家也可以探索一下，虽然看起来很无聊，但可以作为一个小案例，表明下你对技术的钻研和兴趣。

[各种公司] 输入url后发生了什么

这个问题的核心是在问从输入URL到页面渲染经历了哪些过程。

从耗时过程来看，可以分为DNS解析、TCP连接、HTTP请求与响应、客户端浏览器解析渲染、连接结束。其中浏览器解析渲染包含HTML词法、语法的解析、CSS解析、DOM树生成、渲染树建立、屏幕绘制。

下面针对几个较为重要的过程做下介绍。

DNS解析

当我们在浏览器中输入如www.taobao.com的时候，DNS解析充当了一个翻译的角色，把网址「翻译」成了IP地址。DNS解析的过程就是域名到IP地址的转换的过程。域名解析也叫域名指向、服务器设置、域名配置以及反向IP登记等等。说得简单点就是将好记的域名解析成IP，服务由DNS服务器完成，把域名解析到一个IP地址，然后在此IP地址的主机上将一个子目录与域名绑定。

TCP连接

TCP连接的重要目的，是为了保证消息的有序和不丢包，为了建立可靠的数据传输，TCP通信双方相互告知初始化序列号，并确定对方已经收到ISN的，整个链接的过程就是我们俗称的三次握手。

HTTP请求与响应

HTTP请求它主要发生在客户端，发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议发送到服务器指定端口的过程。

还是用 https://www.taobao.com 举例子。

当在地址栏输入后，浏览器会分析这个url，并设置好请求报文发出。请求报文中包括请求行(包括请求的方法，路径和协议版本)、请求头(包含了请求的一些附加的信息，一般是以键值的形式成对存在)、空行(协议中规定请求头和请求主体间必须用一个空行隔开)、请求主体(对于post请求，所需要的参数都不会放在url中，这时候就需要一个载体了，这个载体就是请求主体)。服务端收到这个请求后，会根据url匹配到的路径做相应的处理，最后返回浏览器需要的页面资源。处理后，浏览器会收到一个响应报文，而所需要的资源就就在报文主体上。与请求报文相同，响应报文也有与之对应的起始行(响应报文的起始行同样包含了协议版本，与请求的起始行不同的是其包含的还有状态码和状态码的原因短语)、响应头(对应请求报文中的请求头，格式一致，但是各自有不同的首部)、空行、报文主体(请求所需要的资源)，不同的地方在于包含的东西不一样。

HTML词法、语法解析

对我们来说HTML其实是一坨字符串，而实际上我们要面对的是"字符流"。为了把字符流解析成正确的可被浏览器识别的结构，我们需要做的事情分为两步：

词法分析：把字符流初步解析成我们可理解的"词"，学名叫token。

语法分析：把开始结束标签配对、属性赋值好、父子关系连接好、构成dom树。

html结构其实不算太复杂，我们平时见到的大部分都只是标签、属性、注释、CDATA节点。

屏幕绘制

DOM树的生成和渲染树建立比较好理解这个就不做展开。完成了这「两棵树」的构造后，就进入屏幕绘制阶段。

在绘制的过程中，会遍历渲染树，调用由浏览器的UI组件的paint()方法在屏幕上显示对应的内容，并根据渲染树布局，计算CSS样式(即每个节点在页面中的大小和位置等几何信息)。

HTML默认是从上到下流式布局的，CSS和JS的加入会打破这种布局，改变DOM的外观样式以及大小和位置。这就引出两个非常重要的概念：replaint重绘和reflow重排。

replaint重绘，屏幕的一部分重新绘制，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。eflow重排： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。无论是重绘还是重排，对浏览器而言都是一种「消耗」，所以我们应该尽量减少这两种状态的触发。

[百词斩] CDN的原理

CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
最简单的CDN网络由一个DNS 服务器和几台缓存服务器就可以组成，当用户输入URL按下回车，经过本地DNS系统解析，DNS系统会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器，然后将得到全局负载均衡设备的IP地址，用户向全局负载均衡设备发送内容访问请求，全局负载均衡设备将实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度

[百词斩] 性能监控平台是如何捕获错误的

一般从如下两个方面考虑：

1.全局捕获：

通过全局的接口，将捕获代码集中写在一个地方，可以利用的接口有：

1. window.addEventListener(‘error’) / window.addEventListener(“unhandledrejection”) / document.addEventListener(‘click’) 等
2. 框架级别的全局监听，例如aixos中使用interceptor进行拦截，vue、react都有自己的错误采集接口
3. 通过对全局函数进行封装包裹，实现在在调用该函数时自动捕获异常
4. 对实例方法重写（Patch），在原有功能基础上包裹一层，例如对console.error进行重写，在使用方法不变的情况下也可以异常捕获

2.单点捕获：

在业务代码中对单个代码块进行包裹，或在逻辑流程中打点，实现有针对性的异常捕获：

1. try…catch
2. 专门写一个函数来收集异常信息，在异常发生时，调用该函数
3. 专门写一个函数来包裹其他函数，得到一个新函数，该新函数运行结果和原函数一模一样，只是在发生异常时可以捕获异常

注：详情可参见Fundebug 发表的 《前端异常监控解决方案研究》

[腾讯一面] 性能优化从哪些方面入手？

• 分屏加载，当页面需要渲染的数据较多时，先渲染首屏，下滑时再加载第二屏的数据；
• 图片大小优化，在不影响视觉效果的前提下，把图片尺寸降到最小；
• 图片懒加载，on appear时再加载图片；
• Code splitting，或者拆包，应用下的某些组件不需要立刻import，可以采用动态import的方式，打包时也可以将它们打到不同的bundle里，给index bundle瘦身；
• Chrome Devtools - Trace & Timeline等一系列强大的分析工具可以去研究一下，它们可以深入到内核分析应用的性能问题所在；

[腾讯二面] 如何加快首屏渲染，你有哪些方案?

• 降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyload。
• 加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。
• 增加缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage、PWA。
• 渲染优化：首屏内容最小化，JS/CSS优化，加载顺序，服务端渲染，pipeline。

[腾讯一面] webpack 针对模块化做的处理

这一块建议去读 webpack4 文档中对于 library，libraryTarget 的描述。当我们开发一个 JS 库的时候，通常最终的 npm package 需要输出的是一些组件或 api，这个时候我们需要了解webpack4所提供的模块化的打包能力。通过对libraryTarget的设置，我们可以将我们的工程打包成amd，umd，或commonJS模块。
https://webpack.js.org/configuration/output/#outputlibrarytarget

[腾讯一面] 概述一下 Node.js 中的进程与线程

Node.js 中的进程 Process 是一个全局对象，无需 require 直接使用，给我们提供了当前进程中的相关信息。Node.js 中进程可以使用 child_process 模块创建。

关系：

• 一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程（通常说的主线程）。
• 同一进程的所有线程共享该进程的所有资源。
• 进程在执行过程中，需要协作同步。不同进程的线程间要利用消息通信的办法实现同步。
• 处理机分给线程，即真正在处理机上运行的是线程。
• 线程是指进程内的一个执行单元，也是进程内的可调度实体。

区别：

• 调度：线程作为调度和分配的基本单位，进程作为拥有资源的基本单位。
• 拥有资源：进程是拥有资源的一个独立单位，线程不拥有系统资源，但可以访问隶属于进程的资源。

[字节跳动] 鼠标滚动的时候，会触发很多次事件，如何解决的？

这里选择的方法应该是节流，可以拓展讲到防抖和节流，防抖是指连续触发的时候只会执行一次，停止触发 N 秒后才能继续执行，而节流是指如果你持续触发事件，每隔一段时间，只执行一次事件。像防止按钮多次点击就用防抖，像是监听滚动事件就用节流，函数实现都可以参照 underscore 代码中的实现，以前我写过 JavaScript专题之跟着underscore学防抖 和 JavaScript专题之跟着 underscore 学节流 两篇文章讲述了 underscore 中的实现方式

[未知] 下面这个会输出什么？为什么？

[腾讯一面]浏览器有哪些线程

[腾讯一面]概述一下Node中的进程与线程

[钉钉二面]5G时代下，前端会有哪些新的挑战 / 方向

[未知] 团队中考虑框架选型时会考虑哪些方面 vue/react

[腾讯一面]首页白屏，如何优化

[腾讯二面]浏览器中的全局属性有哪些?

[腾讯一面]怎么理解前端

[未知]React项目有哪些性能优化方法？setState大对象的优化？

引申：如果必须要setState一个较大、层级较深的对象，该如何优化？

[字节]怎么与服务端保持连接

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

[腾讯一面]Webpack中的loader与plugins作用分别是什么

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

[震惊]阿里前端在线助力程序员进入BAT等大厂

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

[腾讯一面]弹性布局当下的兼容性情况

next

答：CommonJs是一种模块规范，最初被应用于node.js，成为nodejs的模块规范。运行在浏览器端的js由于也缺少类似的规范，在es6出来之前，前端也实现了一套相同的模块规范(例如:AMD)，用来对前端模块进行管理。自es6起，引入了一套新的es6 module规范，ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对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

[腾讯一面]HTTP3中使用的QUIC协议基于UDP的原因?

[快手]如何对请求进行缓存

如何对请求进行缓存，例如有10个异步请求，如果有一个异步请求返回结果剩下的请求就用这个结果，并且能过传入成功和失败的回调函数

[腾讯一面]Virtual Dom 的优势在哪里？

[腾讯一面]HTTP2的特点?如何才能使用HTTP2?有什么前提条件?

[未知]Vue、React有哪些区别，不同应用场景下如何选型

[腾讯一面]概述一下浏览器缓存机制?强缓存/协商缓存?协商缓存的作用,它是如何工作的?

[未知]小程序和 H5 有什么区别？

[腾讯一面] 使用虚拟 DOM 就比较快吗？

有时候使用 innerHTML 反而更快，怎么回答

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

你是怎么学习前端的？如何提升前端技术水平

[腾讯一面]事件委托为什么就比普通绑定快 (1000个div)

[未知]Vue有没有哪些**是 vue 使用比较深了才能用好的

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

English version of this Repository

It could be great if you can write in English ?

[腾讯二面]如何加快首屏渲染?你有哪些方案?

[未知]针对移动端的网络和性能上可以由哪些方法进行优化

[腾讯一面] 浏览器 tab 卡主，而其他 tab 却没有问题，原因？

[腾讯一面]HTTP与HTTPS的区别?TLS协议握手过程,如何工作的?

[未知] cookie token 和 session 的区别

[腾讯一面]分别概述一下浏览器与Node中event loop?他们有何不同?

哪些是微任务?

哪些是宏任务?

请问大神这题的解决思路是怎么样的

// 点击提交按钮，如果短时间内连续点击多次，会发送多次相同请求，
// 为了避免这种情况，实现一个通用的包装函数singlePipe，
// 使得被包装的请求函数，在请求过程中如果再次调用该函数，
// 不会发出请求，直到该次请求完成后才能再次发出请求
const singlePipe = function(promiseFunc) {
// TODO

};

// 测试
const promiseFunc = function (data) {
return new Promise((resolve) => {
setTimeout(() => resolve(data), 1000);
});
};

const request = singlePipe(promiseFunc);
request(1).then(data => console.log(data)); // 1
request(2).then(data => console.log(data)); // 无反应
setTimeout(() => {
request(3).then(data => console.log(data)); // 3
}, 1000);

[腾讯一面]如何实现图片剪裁

[蚂蚁金服二面]移动端开发相对于pc端开发有什么需要注意的？

[高德一面]一个 tcp 连接能发几个 http 请求？

[腾讯二面]浏览器中打开多个标签(同一个地址),标签之间有哪些本地通信方案?

输入url后发生了什么

react diff

详细介绍一下react16 diff的过程

[腾讯一面]线程与进程的概念/区别/如何工作的?进程之间如何进行切换的?

笔试题

用 proxy 实现 一个方法，接受一个对象 例如 { 'a.b.c': function(){} } 返回观察对象，完成以下例子
testCase
it('test1', () => {
const func1 = () => 1;
const func2 = () => 2;
const func3 = () => 3;

const res = registerProxyApi({
'a.b.c.d': func1,
'd.e.f': func2,
'o': func3
});
res.o() = 3;
res.a.b.c.d() = 1;
res.d.b.b.b() = undefined;
})
写registerProxyApi函数

[腾讯一面]React中ref转发

我期望的重点：ref转发的使用场景
非常感谢您的回答。