JavaScript中DOM樹的平滑更新

我正在尋找一種順利遷移DOM樹的好方案。讓我們想象一下DOM樹這樣表示的書籍列表：JavaScript中DOM樹的平滑更新

<div class="books"> 
    <div class="book"> 
    <div class="title">Book 1</div> 
    ... 
    </div> 
    <div class="book"> 
    <div class="title">Book 2</div> 
    ... 
    </div> 
    ... 
</div>

這份名單應該由一個新的版本，我從服務器的輸入生成更新：

<div class="books"> 
    <div class="book"> 
    <div class="title">This is a new Book</div> 
     ... 
    </div> 
    <div class="book"> 
    <div class="title">Another book</div> 
    ... 
    </div> 
    <div class="book"> 
    <div class="title">Book 2</div> 
    ... 
    </div> 
    ... 
</div>

我可以只更換整個結構由新的一個。這會導致屏幕上出現大閃爍，我想避免這種閃爍。我的目標是以遞歸的方式迭代元素，並根據舊的和新的結構之間的發現差異，我將只更新修改過的元素。

這個算法不是很容易以一種可靠的方式實現。這就是爲什麼我問，如果有人知道一個圖書館，可以實現這一點。

來源

2013-05-21 Oliver Mattern

因此，如果新的構造，從第一個除了在'.title'塊文本沒有什麼區別，只是替換文本。或者我錯過了什麼？ – VisioN

這裏輸入和輸入的邏輯究竟是什麼？ – Dogbert

您應該考慮讓服務器發送更改/添加的條目而不是所有內容。這不僅可以讓您只更新更改，還可以加快處理速度，因爲不需要每次都發送整個列表。 – RoToRa

我並不完全清楚你在問什麼，但React.js是一個處理你正在談論的事情的庫。該庫維護DOM的虛擬副本，並且在做出需要修改頁面的更改時，實際和虛擬DOM將會被區分，只對頁面進行必要的更改。

坦率地說，除非你決定真的想要一個認真的重量級庫來處理你的模型視圖，否則React看起來像是過度殺傷。

如果您在使用DOM更改口吃時遇到問題，可以考慮使用（mdn）來包裝您的更新調用。

至於你自己實現一個差異算法，聽起來像它可能是一個非常有趣的練習！

鏈接：

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame http://facebook.github.io/react/

來源

2014-04-23 11:54:05

JavaScript中DOM樹的平滑更新

回答

相關問題