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