【刘建】19道前端面试题

总体的感受

近日参加了一次技术面试，因为提前准备不足，回答得很烂，所以凭借记忆将被问到的问题全部记录，仔细研究一下。

首先感谢那位面试官看了下我自己网站上的技术文章，虽然那个网站现在做得不是太好，不过以后有时间定会重点优化本人的网站。然后通过回答他的问题确实给我如何复习技术面试提供了有意义的参考，当然还有自己记忆力不错的原因（稍微夸下自己）；最后，通过与他的交流，发现他在技术研究上确实下了不少功夫，非常明确自己所问问题的答案，比很多喜欢问开放问题的面试官强不少。

此套面试题难度中等偏上。(如果是前端Leader岗位的技术面试，难度升级为上等），完全回答好并且有个好的工作背景应聘大部分公司的高级前端研发岗位问题不大（应聘大厂还需要复习算法和node），应聘技术专家或者架构师还需把我所扩展的问题务必答好。只要都答好，即可攻受互换，拿offer拿到手软。

问题与答案

1、事件循环机制

同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入 Event Queue 。主线程内的任务执行完毕为空，会去 Event Queue 读取对应的任务，推入主线程执行。 上述过程的不断重复就是我们说的 Event Loop (事件循环)。

2、堆和栈

当javascript代码执行的时候会将不同的变量存于内存中的不同位置：堆（heap）和栈（stack）中来加以区分。其中，堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针。 但是我们上面说的执行栈和这里的栈的意义却有些不同。

3、虚拟dom是什么？为什么操作虚拟dom会比操作真实dom更快？（最重要的问题，此题没有答好，直接导致后续以此为基础的问题全部答崩）

回答这个问题前，首先需要了解下虚拟dom的创建流程
具体实现步骤如下
1、用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
2、当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
3、把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新
所以虚拟DOM，就是用JS普通对象结构的一种映射。
用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。
所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。
前三道没回答好，只有一个感觉就是我可以回家了

本人原文地址

百度搜索【前端刘建】或者【全栈刘建】可以搜到更多本人写的技术文章