前端抽象世界之DOM與Virtual DOM

joy968 發布于2019-08-26 12:23 / 3298人閱讀

摘要：它是輕量級的，與特定于瀏覽器的實現細節分離。由于本身已經是抽象，因此虛擬實際上是抽象的抽象。它允許在這個抽象的世界中進行計算，并跳過真正的那些緩慢的操作。

前言

目前主流的前端框架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 更快，為什么？---尤雨溪的回答 - 知乎

GPU云服務器云服務器 virtual-dom DOM dom0和dom2 python dom

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108607.html

前端抽象世界之DOM與Virtual DOM

摘要：它是輕量級的，與特定于瀏覽器的實現細節分離。由于本身已經是抽象，因此虛擬實際上是抽象的抽象。它允許在這個抽象的世界中進行計算，并跳過真正的那些緩慢的操作。前言目前主流的前端框架React和Vue中都用到了Virtual DOM這個技術，而Virtual DOM到底是什么，可能很多人和我一樣，概念上還是模糊。本文主要介紹DOM和Virtual DOM的基本概念及個人理解。以下的D...

plokmju88 2019-08-02 12:00 評論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