title: How different that React virtualDOM and real DOM treat a style changing?
body: <p>All:</p>
  
  <p>I am pretty new to React.js, heard a lot about React virtual dom, but I kinda wondering what is the main difference between it and real DOM when deal with a simple case like change a style of a element:</p>
  
  <p>Say I want to change the distance of a div to others, I can use jQuery for:</p>
  
  <pre><code>$("div#test").css("margin-left","10px");
  </code></pre>
  
  <p>And my understand about how browser does to the real dom is:</p>
  
  <ol>
  <li>search down the DOM tree and find that node.</li>
  <li>updating according style attribute( I guess it is CSSOM tree )</li>
  <li>rendering the view</li>
  </ol>
  
  <p><strong>So my question is:</strong></p>
  
  <ol>
  <li>Is my understanding correct?</li>
  <li>If it is basically correct, then what does virtual DOM do to improve the performance? Does not it just use a diff algorithm to compare what need to update in its light weighted version DOM tree and find that margin-left needs updating, and apply the same thing like in jquery to the real DOM?</li>
  </ol>
  
  <p><strong>OR</strong></p>
  
  <ol start="2">
  <li>if it is not correct, could anyone give a little detail what heavy job does browser do to real DOM which React virtual DOM skip to enhance the performance?</li>
  </ol>
  
  <p>I find a <a href="http://tonyfreed.com/blog/what_is_virtual_dom" rel="nofollow">post</a> mention 3 detail operation on virtual DOM:</p>
  
  <blockquote>
    <p>What makes it really fast is:</p>
    
    <ol>
    <li>Efficient diff algorithms.</li>
    <li>Batching DOM read/write operations. </li>
    <li>Efficient update of sub-tree only.</li>
    </ol>
  </blockquote>
  
  <p>So comparing with this, does that mean in real DOM:</p>
  
  <ol>
  <li>Not quite efficient diff algorithm or no diff algorithm(just update
  everything)? </li>
  <li>Single read/write operation like if I give 3 style updating to even same DOM element, the browser will look for that element down the DOM tree 3 times and update style? </li>
  <li>Update whole DOM from the root(basically like dump the current tree and rebuild the whole DOM tree again no matter what part of the tree need update, and find the node and update)</li>
  </ol>
  
  <p>Thanks</p>