成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

前端抽象世界之DOM與Virtual DOM

plokmju88 / 2671人閱讀

摘要：它是輕量級(jí)的，與特定于瀏覽器的實(shí)現(xiàn)細(xì)節(jié)分離。由于本身已經(jīng)是抽象，因此虛擬實(shí)際上是抽象的抽象。它允許在這個(gè)抽象的世界中進(jìn)行計(jì)算，并跳過(guò)真正的那些緩慢的操作。

前言

目前主流的前端框架React和Vue中都用到了Virtual DOM這個(gè)技術(shù)，而Virtual DOM到底是什么，可能很多人和我一樣，概念上還是模糊。

本文主要介紹DOM和Virtual DOM的基本概念及個(gè)人理解。

以下的DOM均指HTML DOM.另外前端菜鳥(niǎo)一枚，寫(xiě)文章主要是為了想加深理解知識(shí)，如有不對(duì)的地方懇請(qǐng)大佬們指點(diǎn)，輕噴.

1. 什么是DOM？

DOM（Document Object Model）文檔對(duì)象模型是對(duì)結(jié)構(gòu)化文檔的抽象，對(duì)于web前端開(kāi)發(fā)者主要是對(duì)HTML文檔。通俗的來(lái)說(shuō)，DOM就是把我們寫(xiě)的HTML文檔抽象成API(應(yīng)用程序接口)，提供給JS去操縱HTML。比如在JS里添加、刪除、更新HTML里的元素都是通過(guò)DOM提供的API操作的。

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

getElementById就是HTML DOM API的方法

2. DOM樹(shù)介紹

瀏覽器在加載HTML時(shí)候，DOM就把HTML文檔抽象成DOM樹(shù)。DOM樹(shù)類(lèi)似于家譜圖，是由多層節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)。




    mylist


    
    
        
  • list1
    • 
        
  • list2
    •

如上html可以用下面的DOM樹(shù)表示：

DOM樹(shù)是由節(jié)點(diǎn)構(gòu)成的集合，主要有三種類(lèi)型節(jié)點(diǎn)：元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)。把HTML抽象成這種樹(shù)模型，實(shí)際上DOM就是提供操控這些節(jié)點(diǎn)的API，讓我們可以用諸如js這種編程語(yǔ)言去修改DOM樹(shù)，從而DOM樹(shù)的變化就會(huì)間接地改變了HTML的內(nèi)容。

例如removeChild()、appendChild()這樣的方法去修改DOM樹(shù)

3. 什么是Virtual DOM？ 
首先，虛擬DOM不是由React發(fā)明的，但是React使用它并免費(fèi)提供它。
虛擬DOM是HTML DOM的抽象。 它是輕量級(jí)的，與特定于瀏覽器的實(shí)現(xiàn)細(xì)節(jié)分離。 由于DOM本身已經(jīng)是抽象，因此虛擬DOM實(shí)際上是抽象的抽象。


從另一方面來(lái)說(shuō)，也許可以將虛擬DOM視為React的HTML DOM的本地和簡(jiǎn)化版。 它允許React在這個(gè)抽象的世界中進(jìn)行計(jì)算，并跳過(guò)“真正的”那些緩慢的DOM操作。

React、Vue這樣的框架通過(guò)模擬真實(shí)DOM構(gòu)造出一個(gè)輕量級(jí)的虛擬DOM,來(lái)簡(jiǎn)化重量級(jí)真實(shí)的DOM操作，讓開(kāi)發(fā)者用數(shù)據(jù)邏輯通過(guò)虛擬DOM去操控真實(shí)DOM，從而讓代碼更容易維護(hù)。

4. Virtual DOM的優(yōu)點(diǎn)

在復(fù)雜的網(wǎng)站項(xiàng)目中，可以簡(jiǎn)化繁瑣的傳統(tǒng)DOM操作。

讓開(kāi)發(fā)者專(zhuān)注業(yè)務(wù)邏輯層代碼的實(shí)現(xiàn)，底層的DOM操作讓框架去處理。

5. 參考鏈接

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

網(wǎng)上都說(shuō)操作真實(shí) DOM 慢，但測(cè)試結(jié)果卻比 React 更快，為什么？---尤雨溪的回答 - 知乎

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/53264.html

相關(guān)文章

  • 前端抽象世界之DOM與Virtual DOM

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

    joy968 評(píng)論0 收藏0

  • vue源碼閱讀之數(shù)據(jù)渲染過(guò)程

    摘要：圖在中應(yīng)用三數(shù)據(jù)渲染過(guò)程數(shù)據(jù)綁定實(shí)現(xiàn)邏輯本節(jié)正式分析從到數(shù)據(jù)渲染到頁(yè)面的過(guò)程，在中定義了一個(gè)的構(gòu)造函數(shù)。一、概述 vue已是目前國(guó)內(nèi)前端web端三分天下之一，也是工作中主要技術(shù)棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進(jìn)行總結(jié)。本文旨在梳理初始化頁(yè)面時(shí)data中的數(shù)據(jù)是如何渲染到頁(yè)面上的。本文將帶著這個(gè)疑問(wèn)一點(diǎn)點(diǎn)追究vue的思路?？傮w來(lái)說(shuō)vue模版渲染大致流程如圖1所...

    AlphaGooo 評(píng)論0 收藏0

  • 1、深入淺出React（一）

    摘要：中的事件不存在以上問(wèn)題掛載的每個(gè)函數(shù)都可以控制在組件中，不會(huì)污染全局空間中沒(méi)有產(chǎn)生直接使用的，而是使用了事件委托方式處理，無(wú)論有多少個(gè)出現(xiàn)，其實(shí)最后都只在樹(shù)上添加了一個(gè)事件處理函數(shù)，掛在最頂層的節(jié)點(diǎn)上。 深入淺出React（一） 1、create-react-app工具使用 安裝create-react-app npm install create-react-app -g 創(chuàng)...

    davidac 評(píng)論0 收藏0

  • Vue 進(jìn)階系列（三）之Render函數(shù)原理及實(shí)現(xiàn)

    摘要：進(jìn)階系列一之響應(yīng)式原理及實(shí)現(xiàn)進(jìn)階系列二之插件原理及實(shí)現(xiàn)進(jìn)階系列三之函數(shù)原理及實(shí)現(xiàn)函數(shù)原理根據(jù)第一篇文章介紹的響應(yīng)式原理，如下圖所示。在初始化階段，本質(zhì)上發(fā)生在函數(shù)中，然后通過(guò)函數(shù)生成，根據(jù)生成。負(fù)責(zé)收集依賴(lài)，清除依賴(lài)和通知依賴(lài)。 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）showImg(https://segmentfa...

    geekidentity 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<