关于前端:刘建19道前端面试题

7次阅读

共计 1520 个字符,预计需要花费 4 分钟才能阅读完成。

总体的感触

近日加入了一次技术面试,因为提前准备有余,答复得很烂,所以凭借记忆将被问到的问题全副记录,认真钻研一下。

首先感激那位面试官看了下我本人网站上的技术文章,尽管那个网站当初做得不是太好,不过当前有工夫定会重点优化自己的网站。而后通过答复他的问题的确给我如何温习技术面试提供了有意义的参考,当然还有本人记忆力不错的起因(略微夸下本人);最初,通过与他的交换,发现他在技术钻研上的确下了不少功夫,十分明确本人所问问题的答案,比很多喜爱问凋谢问题的面试官强不少。

此套面试题难度中等偏上。(如果是前端 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,交由浏览器去绘制。
前三道没答复好,只有一个感觉就是我能够回家了

自己原文地址

百度搜寻【前端刘建】或者【全栈刘建】能够搜到更多自己写的技术文章

正文完
 0