前端抽象世界之DOM与Virtual DOM

plokmju88 发布于2019-08-02 12:00 / 2540人阅读

摘要：它是轻量级的，与特定于浏览器的实现细节分离。由于本身已经是抽象，因此虚拟实际上是抽象的抽象。它允许在这个抽象的世界中进行计算，并跳过真正的那些缓慢的操作。

前言

目前主流的前端框架React和Vue中都用到了Virtual DOM这个技术，而Virtual DOM到底是什么，可能很多人和我一样，概念上还是模糊。

本文主要介绍DOM和Virtual DOM的基本概念及个人理解。

以下的DOM均指HTML DOM.另外前端菜鸟一枚，写文章主要是为了想加深理解知识，如有不对的地方恳请大佬们指点，轻喷.

1. 什么是DOM？

DOM（Document Object Model）文档对象模型是对结构化文档的抽象，对于web前端开发者主要是对HTML文档。通俗的来说，DOM就是把我们写的HTML文档抽象成API(应用程序接口)，提供给JS去操纵HTML。比如在JS里添加、删除、更新HTML里的元素都是通过DOM提供的API操作的。

document.getElementById("text").innerHTML="newtext" //通过DOM修改HTML文本

getElementById就是HTML DOM API的方法

2. DOM树介绍

浏览器在加载HTML时候，DOM就把HTML文档抽象成DOM树。DOM树类似于家谱图，是由多层节点构成的结构。




    mylist


    
        list1
        list2

如上html可以用下面的DOM树表示：

DOM树是由节点构成的集合，主要有三种类型节点：元素节点、文本节点、属性节点。把HTML抽象成这种树模型，实际上DOM就是提供操控这些节点的API，让我们可以用诸如js这种编程语言去修改DOM树，从而DOM树的变化就会间接地改变了HTML的内容。

例如removeChild()、appendChild()这样的方法去修改DOM树

3. 什么是Virtual DOM？

首先，虚拟DOM不是由React发明的，但是React使用它并免费提供它。
虚拟DOM是HTML DOM的抽象。 它是轻量级的，与特定于浏览器的实现细节分离。 由于DOM本身已经是抽象，因此虚拟DOM实际上是抽象的抽象。

从另一方面来说，也许可以将虚拟DOM视为React的HTML DOM的本地和简化版。 它允许React在这个抽象的世界中进行计算，并跳过“真正的”那些缓慢的DOM操作。

React、Vue这样的框架通过模拟真实DOM构造出一个轻量级的虚拟DOM,来简化重量级真实的DOM操作，让开发者用数据逻辑通过虚拟DOM去操控真实DOM，从而让代码更容易维护。

4. Virtual DOM的优点

在复杂的网站项目中，可以简化繁琐的传统DOM操作。

让开发者专注业务逻辑层代码的实现，底层的DOM操作让框架去处理。

5. 参考链接

The difference between Virtual DOM and DOM--by Bartosz Krajka

网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？---尤雨溪的回答 - 知乎

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53264.html

前端抽象世界之DOM与Virtual DOM

摘要：它是轻量级的，与特定于浏览器的实现细节分离。由于本身已经是抽象，因此虚拟实际上是抽象的抽象。它允许在这个抽象的世界中进行计算，并跳过真正的那些缓慢的操作。前言目前主流的前端框架React和Vue中都用到了Virtual DOM这个技术，而Virtual DOM到底是什么，可能很多人和我一样，概念上还是模糊。本文主要介绍DOM和Virtual DOM的基本概念及个人理解。以下的D...

joy968 2019-08-26 12:23 评论0 收藏0
vue源码阅读之数据渲染过程

摘要：图在中应用三数据渲染过程数据绑定实现逻辑本节正式分析从到数据渲染到页面的过程，在中定义了一个的构造函数。一、概述 vue已是目前国内前端web端三分天下之一，也是工作中主要技术栈之一。在日常使用中知其然也好奇着所以然，因此尝试阅读vue源码并进行总结。本文旨在梳理初始化页面时data中的数据是如何渲染到页面上的。本文将带着这个疑问一点点追究vue的思路。总体来说vue模版渲染大致流程如图1所...

AlphaGooo 2019-05-22 16:53 评论0 收藏0
1、深入浅出React（一）

摘要：中的事件不存在以上问题挂载的每个函数都可以控制在组件中，不会污染全局空间中没有产生直接使用的，而是使用了事件委托方式处理，无论有多少个出现，其实最后都只在树上添加了一个事件处理函数，挂在最顶层的节点上。深入浅出React（一） 1、create-react-app工具使用安装create-react-app npm install create-react-app -g 创...

davidac 2019-08-22 14:55 评论0 收藏0
Vue 进阶系列（三）之Render函数原理及实现

摘要：进阶系列一之响应式原理及实现进阶系列二之插件原理及实现进阶系列三之函数原理及实现函数原理根据第一篇文章介绍的响应式原理，如下图所示。在初始化阶段，本质上发生在函数中，然后通过函数生成，根据生成。负责收集依赖，清除依赖和通知依赖。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）showImg(https://segmentfa...

geekidentity 2019-08-23 12:55 评论0 收藏0