认识虚拟 DOM

Posted JavaScript之弹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了认识虚拟 DOM相关的知识,希望对你有一定的参考价值。

我最近一直在研究 DOM 和 Shadow DOM 究竟是什么,以及它们之间有何区别。

概括地说,文档对象模型(DOM)包含两部分;一是 html 文档基于对象的表示,二是操作该对象的一系列接口。Shadow DOM 可以被认为是 DOM 的缩减版。它也是 HTML 元素基于对象的表示(推荐这篇神奇的Shadow DOM,能更好的理解Shadow DOM),Shadow DOM 能把 DOM 分离成更小封装位,并且能够跨 HTML 文档使用。

另外一个术语是“虚拟 DOM ”。虽然这个概念已存在很多年,但在 React 框架中的使用更受欢迎。在这篇文章中,我将详细阐述什么是虚拟 DOM 、它跟原始 DOM 的区别以及如何使用。

为什么我们需要虚拟 DOM ?

为了弄明白为什么虚拟 DOM 这个概念会出现,让我们重新审视原始 DOM 。正如上面提到的,DOM 有两部分 —— HTML 文档的对象表示和一系列操作接口。

举个栗子

以上是关于认识虚拟 DOM的主要内容,如果未能解决你的问题,请参考以下文章

基于Vue认识虚拟DOM(Virtual DOM)

vue2.0框架认识

虚拟DOM和实际的DOM有何不同?

ReactJS入门—— 初步认识React

从DOM到虚拟DOM——前端DOM发展史性能与产能双赢背后的思考

React系列入门教程 初步认识React