前端抽象世界之DOM與Virtual DOM

時間 2019-11-07

標籤前端抽象世界 dom virtual 欄目 HTML 简体版

原文原文鏈接

前言

目前主流的前端框架React和Vue中都用到了Virtual DOM這個技術，而Virtual DOM究竟是什麼，可能不少人和我同樣，概念上仍是模糊。

本文主要介紹DOM和Virtual DOM的基本概念及我的理解。html

如下的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的方法react

2. DOM樹介紹

瀏覽器在加載HTML時候，DOM就把HTML文檔抽象成DOM樹。DOM樹相似於家譜圖，是由多層節點構成的結構。

<!DOCTYPE html>
<html>
<head>
    <title>mylist</title>
</head>
<body>
    <ul>
        <li>list1</li>
        <li>list2</li>
    </ul>
</body>
</html>

如上html能夠用下面的DOM樹表示：
web

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 更快，爲何？---尤雨溪的回答 - 知乎

相關文章

1. 探索Virtual DOM的前世今生
2. 探索Virtual DOM的前世此生
3. 前端之BOM與DOM
4. Virtual DOM
5. 前端——BOM與DOM
6. python-day54--前端之js-DOM對象
7. 實現Virtual Dom
8. 淺談Virtual DOM
9. 【轉】Virtual DOM
10. 淺談 Virtual DOM
更多相關文章...
• XML DOM - CDATASection 對象 - XML DOM 教程
• XML DOM - Comment 對象 - XML DOM 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• Docker容器實戰(一) - 封神Server端技術

相關標籤/搜索

Hibernate教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<