1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Hey techies, from 10,00 ft up, how does a Virt. DOM transfer to actual DOM?

Discussion in 'HTML & JavaScript' started by thedorf, Aug 6, 2017.

  1. thedorf

    thedorf Supreme Member

    Joined:
    Oct 1, 2008
    Messages:
    1,223
    Likes Received:
    729
    Occupation:
    what? I gotta have a job?
    Location:
    BHW - Where else?
    Like the title says - how does a Virt. DOM transfer to actual DOM? Do you register the virtual DOM to automatically update the actual DOM when you make a change in the virtual DOM and want that change moved to the screen (changes would then be reflected in the actual DOM)?

    Keep the conversation like "Virtual DOM for DOMMIES", if you get my drift.
     
  2. rafark

    rafark Regular Member

    Joined:
    Jan 15, 2013
    Messages:
    439
    Likes Received:
    221
    Gender:
    Male
    Occupation:
    Moderador
    Location:
    Noble and Heroic MC
    Huh?
     
  3. thedorf

    thedorf Supreme Member

    Joined:
    Oct 1, 2008
    Messages:
    1,223
    Likes Received:
    729
    Occupation:
    what? I gotta have a job?
    Location:
    BHW - Where else?
    It's a Javascript kind of question - I think.
     
  4. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,642
    Likes Received:
    11,376
    Occupation:
    Pusillanimous Knitter
    Location:
    Buenos Aires
    Virtual DOM is simply an abstraction over the actual DOM. Instead of "calculating" over the actual DOM (which is slow), you do in on the Virtual one (which is fast) and then you only touch the actual DOM with the changes.
     
    • Thanks Thanks x 1
  5. thedorf

    thedorf Supreme Member

    Joined:
    Oct 1, 2008
    Messages:
    1,223
    Likes Received:
    729
    Occupation:
    what? I gotta have a job?
    Location:
    BHW - Where else?
    1) so are you saying that without a virtual DOM a browser traverses the whole actual DOM to apply changes on a screen redraw?

    2) But doesn't it still have to do that for other changes?

    3) And that begs the question: "is it setup so that once you start with a Virt. DOM "all" your changes have to go through it?
     
  6. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,642
    Likes Received:
    11,376
    Occupation:
    Pusillanimous Knitter
    Location:
    Buenos Aires
    To change ANYTHING in a page, DOM functions have to be used for a) calculating what to change and how, b) apply the changes. vDOM removes the need for the first part. Think of a as read and b as write. You can't do away with b but you can make the site faster by not using the DOM for a.

    A virtual DOM is nothing more than a JS structure that you create with a library. Your code may chose to use it or not. It's not some kind of "middleware" that tunnels code that's unaware of it.
     
    • Thanks Thanks x 1
  7. thedorf

    thedorf Supreme Member

    Joined:
    Oct 1, 2008
    Messages:
    1,223
    Likes Received:
    729
    Occupation:
    what? I gotta have a job?
    Location:
    BHW - Where else?
    Got you on that part and thanks given for your whole reply.

    Pretty sure I am with you on that part. But my question is not about tunneling code but more about: How often does the screen redraw occur by itself? So many times per second, yes? Do you know how many? I am trying to figure out a rough estimate of the time saved for a non-graphics-intensive web page by using a VDOM (and time spent doing this) vs. just focusing on one point in time (webpage material above the fold displays quickly). You see, I think I can do a single refresh faster using php and flush() as opposed to getting involved with Mithril or something like that.

    I friggin hate overhead and while Mithril is tiny for code the overhead here is learning to use Mithril and how much code you have to write to use it.
     
  8. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,642
    Likes Received:
    11,376
    Occupation:
    Pusillanimous Knitter
    Location:
    Buenos Aires
    The browser redraws (paints) whenever the DOM has been modified. There are partial redraws and full redraws. People who write browser games are extremely careful on optimizing on partial redraws and avoiding full redraws whenever possible. Also, the browser redraws when you scroll (since what is drawn is only what needs to be seen).