A true DOM and its resolution process?
Browser rendering engine work processes are similar, divided into five steps, create a DOM tree - Create StyleRules-- create Render tree - Drawing Painting layout Layout--
The first step, with HTML parser, parses the HTML elements, to build a DOM tree (tree construction and labeled).
The second step, using CSS analyzer to analyze the inline style on the element and CSS files to generate the page style sheet.
The third step will DOM tree and the style sheet, associate Render build a tree (a process also known as Attachment). Each node has a DOM attach method, receiving style information , returns a render target (aka renderer). These render objects will eventually be built into a Render tree.
The fourth step, with the Render Tree, browsers began to layout, to determine the precise coordinates of one appears on the display as each node Render tree.
The fifth step, Render tree node and has a display coordinates, call each node paint method to draw them out.
Build a DOM tree of the document is finished loading begins? DOM build number is a gradual process, in order to achieve a better user experience, content rendering engine will soon be displayed on the screen. It does not have to wait until the whole building began to render HTML document number and layout after parsing is completed.
Render tree is a DOM tree and CSSOM tree construction is finished before beginning to build it? These three processes in the actual conduct of another is not completely independent, but there will be cross. It will cause side load, parse it again, again rendering work phenomenon.
CSS analytical reverse parsed from right to left (from the DOM tree - - Analytical than - under high resolution efficiency), the more nested tags, the slower the resolution.
Two, JS real cost of operating the DOM!
When using our traditional development model, native JS JQ operation or DOM, the browser will start the process from start to finish execution again build a DOM tree. In one operation, I need to update the DOM node 10, after receiving the first browser DOM requests do not know 9 update operation, and therefore the implementation process immediately and eventually executed 10 times. For example, the first complete calculation, followed by a DOM next update request, the node coordinate values had changed, the previous evaluation time is wasted effort. Calculating coordinate values are all DOM node performance wasted. Even if the computer hardware has been an iterative update, manipulate the DOM price is still expensive, frequent operation or page will appear Caton, affecting the user experience.
Third, why you need a virtual DOM, what good is it?
Web interface provided by the DOM tree (a tree data structure means) is constructed, when the part changes, in fact, correspond to a DOM node changes,
Virtual DOM is to solve the problem browser performance is designed. As before , if there is one operation to update the DOM action 10 times, will not immediately operate virtual DOM DOM, but these 10 diff content update saved to a local JS object, the object will eventually be a one-time attch to the JS DOM tree, and then subsequent operations, thus avoiding the unnecessary computation. Therefore, the benefits of simulation objects with JS DOM node that can update the page to reflect on all JS objects (virtual DOM), the operation speed of JS objects in memory obviously faster, and so the update is complete, and then the final JS object mapping to real DOM, handed over to the browser to draw.
Fourth, the virtual DOM
Such as a true DOM node.
We JS DOM node to simulate virtual 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算法是怎么操作的。
平层Diff，只有以下4种情况：
1、节点类型变了，例如下图中的P变成了H3。我们将这个过程称之为REPLACE。直接将旧节点卸载并装载新节点。旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做效率不高。但为了避免O(n^3)的时间复杂度，这样是值得的。这也提醒了开发者，应该避免无谓的节点类型的变化，例如运行时将div变成p没有意义。
2、节点类型一样，仅仅属性或属性值变了。我们将这个过程称之为PROPS。此时不会触发节点卸载和装载，而是节点更新。
3、文本变了，文本对也是一个Text Node，也比较简单，直接修改文字内容就行了，我们将这个过程称之为TEXT。
4、移动／增加／删除 子节点，我们将这个过程称之为REORDER。看一个例子，在A、B、C、D、E五个节点的B和C中的BC两个节点中间加入一个F节点。
我们简单粗暴的做法是遍历每一个新虚拟DOM的节点，与旧虚拟DOM对比相应节点对比，在旧DOM中是否存在，不同就卸载原来的按上新的。这样会对F后边每一个节点进行操作。卸载C，装载F，卸载D，装载C，卸载E，装载D，装载E。效率太低。
如果我们在JSX里为数组或枚举型元素增加上key后，它能够根据key，直接找到具体位置进行操作，效率比较高。常见的最小编辑距离问题，可以用Levenshtein Distance算法来实现，时间复杂度是O(M*N)，但通常我们只要一些简单的移动就能满足需要，降低精确性，将时间复杂度降低到O(max(M,N))即可。
映射成真实DOM
虚拟DOM有了，Diff也有了，现在就可以将Diff应用到真实DOM上了。深度遍历DOM将Diff的内容更新进去。
我们会有两个虚拟DOM(js对象，new/old进行比较diff)，用户交互我们操作数据变化new虚拟DOM，old虚拟DOM会映射成实际DOM(js对象生成的DOM文档)通过DOM fragment操作给浏览器渲染。当修改new虚拟DOM，会把newDOM和oldDOM通过diff算法比较，得出diff结果数据表(用4种变换情况表示)。再把diff结果表通过DOM fragment更新到浏览器DOM中。
虚拟DOM的存在的意义？vdom 的真正意义是为了实现跨平台，服务端渲染，以及提供一个性能还算不错 Dom 更新策略。vdom 让整个 mvvm 框架灵活了起来
Diff comparison algorithm only to a virtual DOM higher replacement efficiency by diff Diff algorithm Algorithm Results Table (operation record table which is required). DOM is supposed to operate in vue still here to operate, but uses js the DOM the fragment to operate dom (after all the changes Unified Computing Unified updated DOM) carried out the browser DOM-time update. In fact, DOM fragment we do not usually open hair can also be used, but this business programmers to write code using the DOM fragment into operation, the value of which is the framework, programmers can focus on writing business code .
Transfer: HTTPS: // www.jianshu.com/p/af0b398602bc
Author: LoveBugs_King
link: https: //www.jianshu.com/p/af0b398602bc
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.