React的虛擬DOM

標籤：

ReactJs的一大特點就是引進了虛擬dom（Virtual DOM）的概念。為什麼我們需要Virtual DOM，Virtual DOM給我們帶來了什麼優勢。

首先我們要瞭解一下瀏覽器的工作流程。

當我們從一個服務拿到請求的html時，瀏覽器會怎麼辦？

（1）建立DOM樹

一旦瀏覽器收到html檔案後，渲染引擎（render engine）就開始解析它，並根據HTML元素（elements）一一對應地產生DOM 節點（nodes），組成一棵DOM樹。

（2）建立渲染樹

同時，瀏覽器也會解析來自外部CSS檔案和元素上的inline樣式。通常瀏覽器會為這些樣式資訊，連同包含樣式資訊的DOM樹上的節點，再建立另外一個樹，一般被稱作渲染樹（render tree）。

（3）Layout布局

又被簡稱為Reflow。構造了渲染樹以後，瀏覽器引擎開始著手布局（layout）。布局時，渲染樹上的每個節點根據其在螢幕上應該出現的精確位置，分配一組螢幕座標值。

（4）繪製 Painting

接著，瀏覽器將會通過遍曆渲染樹，調用每個節點的paint方法來繪製這些render對象。paint方法根據瀏覽器平台，使用不同的UI後端API（agnostic UI backend API）。 通過繪製，最終將在螢幕上展示內容。

 

我們知道，當頁面的結構布局發生變化時，瀏覽器就要去重新渲染，這就是迴流。每次瀏覽器的重新渲染都會都會花時間，如果頻繁的操作dom結構，可能會引起不好的使用者體驗。

React的虛擬dom，對此的一個最佳化，簡單點來說就是，將多次的DOM操作，合成一次操作，減少了reflow的次數。

 

DOM 操作 真正的問題在於每次操作都會觸發布局的改變、DOM樹的修改和渲染。所以，當你一個接一個地去修改30個節點的時候，就會引起30次（潛在的）布局重算，30次（潛在的）重繪，等等。

Virtual DOM 實際上沒有使用什麼全新的技術，僅僅是把 “ 雙緩衝（double buffering）” 技術應用到了DOM上面。 這樣一來，當你在這個單獨的虛擬DOM樹上也一個接一個地修改30個節點的時候，它不會每次都去觸發重繪，所以修改節點的開銷就變小了。 之後，一旦你要把這些改動傳遞給真實DOM，之前所有的改動就會整合成一次DOM操作。這一次DOM操作引起的布局計算和重繪可能會更大，但是相比而言，整合起來的改動只做一次，減少了（多次）計算。

不過，實際上不藉助Virtual DOM也可以做到這一點。你可以自己手動地整合所有的DOM操作到一個DOM 片段（DOM fragment） 裡，然後再傳遞給DOM樹。

 

 

——————————————————

原文連結：http://mp.weixin.qq.com/s?__biz=MzI0ODA2ODU2NQ==&mid=2651130413&idx=1&sn=56a1cc3ac225a09982fc0c4a508222c7&chksm=f257ca97c5204381b559763f4af839ab72eda009c47b0f0a4d47492852b87211c601dee8987a&scene=23&srcid=0910yHpjoNTORi3itDTKNRfu#rd

React的虛擬DOM