2024年最全Vue源码解析：虚拟dom详解(1)，2024年最新web前端面试基础题记不住怎么回事

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

• 第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

• 第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。

1.webkit渲染引擎工作流程

2、DOM树的构建是文档加载完成开始的？

不是，边加载边构建：构建DOM数是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。

3、Render树是DOM树和CSSOM树构建完毕才开始构建的吗？

不是，交叉进行：这三个过程（Render树、DOM树、CSSOM树）在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象

4、为什么原生js操作或者jquery操作的dom消耗很大？

a、【更新dom都会从头到尾更新】：用原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。

b、【有多次dom操作会操作dom更新多次】：在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。

c、【dom更新会导致前一次计算的结果无效】：例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。

5、为什么需要虚拟DOM，它有什么好处？

【将这10次dom更新的diff内容保存到本地一个JS对象中】：若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。

6、用JS对象模拟DOM节点的好处是什么？

页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

7. CSS的解析

CSS的解析是从右往左逆向解析的(从DOM树的下－上解析比上－下解析效率高)，嵌套标签越多，解析越慢。

二、实现虚拟DOM

例如一个真实的DOM节点。

我们用JS来模拟DOM节点实现虚拟DOM

其中的Element方法具体怎么实现的呢？

第一个参数是节点名（如div），第二个参数是节点的属性（如class），第三个参数是子节点（如ul的li）。除了这三个参数会被保存在对象上外，还保存了key和count。其相当于形成了虚拟DOM树。

有了JS对象后，最终还需要将其映射成真实DOM

我们已经完成了创建虚拟DOM并将其映射成真实DOM，这样所有的更新都可以先反应到虚拟DOM上，如何反应？需要用到Diff算法。

两棵树如果完全比较时间复杂度是O(n^3)，但参照《深入浅出React和Redux》一书中的介绍，React的Diff算法的时间复杂度是O(n)。要实现这么低的时间复杂度，意味着只能平层的比较两棵树的节点，放弃了深度遍历。这样做，似乎牺牲掉了一定的精确性来换取速度，但考虑到现实中前端页面通常也不会跨层移动DOM元素，这样做是最优的。

深度优先遍历，记录差异

Diff操作

在实际代码中，会对新旧两棵树进行一个深度的遍历，每个节点都会有一个标记。每遍历到一个节点就把该节点和新的树进行对比，如果有差异就记录到一个对象中。 下面我们创建一棵新树，用于和之前的树进行比较，来看看Diff算法是怎么操作的。

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】