virtual DOM是如何優化性能的

Luosunce 發布于2019-08-23 18:15 / 755人閱讀

摘要：當數據開始變化時，如何手動操作回想一下，這樣的場景是不是常常見到。是如何操作的首先有一個數據結構和結構相似的對象，然后用這個對象去渲染真正的樹。兩種渲染的比較為什么通過會提高性能呢要知道每一次修改都會觸發瀏覽器的重新渲染的流程。

談到virtual DOM 前先來說說瀏覽器渲染的流程

瀏覽器接收到html文件，并轉換成DOM樹。如果有css還會生成css樹。如果遇到script標簽，會先判斷是async或defer。如果是前者會并行下載并執行js，后者會先下載，等html解析完后順序執行。
當構建后dom樹和css樹后，開始構建render樹。這一步就是確定頁面布局和樣式，在生成render樹的過程中瀏覽器就開始繪制合成圖層將內容顯示在屏幕。
只要dom一更新，以上流程瀏覽器就會再執行一次。

當數據開始變化時，如何手動操作DOM？

回想一下，這樣的場景是不是常常見到。一個列表中有許多條數據，需要提供一個按鈕來控制數據的排序；一個按鈕刪除，一個按鈕新增甚至還有編輯數據。當沒有任何的框架的時候，就需要我們手動的修改DOM結構。給按鈕增加監聽事件和回調函數更新DOM。功能越復雜，需要增加的事件和維護的代碼就會越來越多，項目也會越來越臃腫。

virtual DOM是如何操作的
首先有一個數據結構和DOM結構相似的對象，然后用這個對象去渲染真正的DOM樹。當狀態發生改變時，新生成一個對象和原來的對象比較，發現有不同的地方，就將改變的地方替換掉相對應的原來的對象的地方。

兩種渲染的比較
為什么通過virtual DOM會提高性能呢？
要知道每一次修改DOM都會觸發瀏覽器的重新渲染的流程。
假設有一個頁面數據龐大，需要修改1000條數據，
直接操作DOM 相當于1000瀏覽器重新渲染
然而使用虛擬DOM是先js層面了計算了1000次，計算好后在訪問一次DOM
在js層面的計算和直接訪問DOM操作相比，簡直便宜得不行。

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

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

4、React組件之性能優化

摘要：組件的性能優化高德納我們應該忘記忽略很小的性能優化，可以說的情況下，過早的優化是萬惡之源，而我們應該關心對性能影響最關鍵的另外的代碼。對多個組件的性能優化當一個組件被裝載更新和卸載時，組件的一序列生命周期函數會被調用。 React組件的性能優化高德納: 我們應該忘記忽略很小的性能優化，可以說97%的情況下，過早的優化是萬惡之源，而我們應該關心對性能影響最關鍵的另外3%的代碼。...

陳偉 2019-08-22 15:01 評論0 收藏0
React 源碼剖析系列－不可思議的 react diff

摘要：目前，前端領域中勢頭正盛，使用者眾多卻少有能夠深入剖析內部實現機制和原理。當發現節點已經不存在，則該節點及其子節點會被完全刪除掉，不會用于進一步的比較。目前，前端領域中 React 勢頭正盛，使用者眾多卻少有能夠深入剖析內部實現機制和原理。本系列文章希望通過剖析 React 源碼，理解其內部的實現原理，知其然更要知其所以然。 React diff 作為 Virtual DOM 的加速...

shuibo 2019-08-21 10:47 評論0 收藏0
你不知道的Virtual DOM（三）：Virtual Dom更新優化

摘要：經過這次優化，計算的時間快了那么幾毫秒?；诋斍斑@個版本的代碼還能做怎樣的優化呢，請看下一篇的內容你不知道的四的作用。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言目前最流行的兩大前端框架，React和Vue，都不約而同的借助Virtual DOM技術提高頁面的渲染效率。那么，什...

xiongzenghui 2019-08-23 11:34 評論0 收藏0
深入React知識點整理（一）

摘要：以我自己的理解，函數式編程就是以函數為中心，將大段過程拆成一個個函數，組合嵌套使用。越來越多的跡象表明，函數式編程已經不再是學術界的最愛，開始大踏步地在業界投入實用。也許繼面向對象編程之后，函數式編程會成為下一個編程的主流范式。使用React也滿一年了，從剛剛會使用到逐漸探究其底層實現，以便學習幾招奇技淫巧從而在自己的代碼中使用，寫出高效的代碼。下面整理一些知識點，算是React看書...

Gilbertat 2019-08-22 11:18 評論0 收藏0
一起理解 Virtual DOM

摘要：具體而言，就是每次數據發生變化，就重新執行一次整體渲染。而給出了解決方案，就是。由于只關注，通過閱讀兩個庫的源碼，對于的定位有了更深一步的理解。第二個而且，技術本身不是目的，能夠更好地解決問題才是王道嘛。前言 React 好像已經火了很久很久，以致于我們對于 Virtual DOM 這個詞都已經很熟悉了，網上也有非常多的介紹 React、Virtual DOM 的文章。但是直到前不久...

Tangpj 2019-08-22 10:46 評論0 收藏0