Minimize DOM access inorder to have a more responsive page












0















Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, we have to do the following things




  1. Cache references to accessed elements


  2. Update nodes "offline" and then add them to the tree


  3. Avoid fixing layout with JavaScript



Can anyone tell me how to do the first two things?



Thank You










share|improve this question




















  • 2





    It's not really browser caching. You're storing a reference to the element, e.g., var cacheref = document.getElementById('someId'); Or var othercacheref = document.createElementById('div'); Then you can do things like cacheref.appendChild(othercacheref); without having to go get the element's DOM reference.

    – Jared Farrish
    Jan 12 '13 at 9:07


















0















Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, we have to do the following things




  1. Cache references to accessed elements


  2. Update nodes "offline" and then add them to the tree


  3. Avoid fixing layout with JavaScript



Can anyone tell me how to do the first two things?



Thank You










share|improve this question




















  • 2





    It's not really browser caching. You're storing a reference to the element, e.g., var cacheref = document.getElementById('someId'); Or var othercacheref = document.createElementById('div'); Then you can do things like cacheref.appendChild(othercacheref); without having to go get the element's DOM reference.

    – Jared Farrish
    Jan 12 '13 at 9:07
















0












0








0








Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, we have to do the following things




  1. Cache references to accessed elements


  2. Update nodes "offline" and then add them to the tree


  3. Avoid fixing layout with JavaScript



Can anyone tell me how to do the first two things?



Thank You










share|improve this question
















Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, we have to do the following things




  1. Cache references to accessed elements


  2. Update nodes "offline" and then add them to the tree


  3. Avoid fixing layout with JavaScript



Can anyone tell me how to do the first two things?



Thank You







javascript html dom tree-nodes






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 12 '13 at 9:12







Prashanth Suriyanarayanan

















asked Jan 12 '13 at 8:54









Prashanth SuriyanarayananPrashanth Suriyanarayanan

11.2k72347




11.2k72347








  • 2





    It's not really browser caching. You're storing a reference to the element, e.g., var cacheref = document.getElementById('someId'); Or var othercacheref = document.createElementById('div'); Then you can do things like cacheref.appendChild(othercacheref); without having to go get the element's DOM reference.

    – Jared Farrish
    Jan 12 '13 at 9:07
















  • 2





    It's not really browser caching. You're storing a reference to the element, e.g., var cacheref = document.getElementById('someId'); Or var othercacheref = document.createElementById('div'); Then you can do things like cacheref.appendChild(othercacheref); without having to go get the element's DOM reference.

    – Jared Farrish
    Jan 12 '13 at 9:07










2




2





It's not really browser caching. You're storing a reference to the element, e.g., var cacheref = document.getElementById('someId'); Or var othercacheref = document.createElementById('div'); Then you can do things like cacheref.appendChild(othercacheref); without having to go get the element's DOM reference.

– Jared Farrish
Jan 12 '13 at 9:07







It's not really browser caching. You're storing a reference to the element, e.g., var cacheref = document.getElementById('someId'); Or var othercacheref = document.createElementById('div'); Then you can do things like cacheref.appendChild(othercacheref); without having to go get the element's DOM reference.

– Jared Farrish
Jan 12 '13 at 9:07














1 Answer
1






active

oldest

votes


















2














These are some abstract questions, ones even that do not necessarily relate to each other.





1. Cache references to accessed elements



Caching references is a practice and sometimes a necessity. The act of maintaining a reference to an element locally (or, um, globally) is rather simple. When working with DOM methods like document.createElement(), there's usually a variable it's saved to. This is a reference that may be cached for later use. document.getElementById returns a reference to an element, document.getElementsByTagName returns a list of references, as does document.querySelectorAll, etc.





2. Update nodes "offline" and then add them to the tree



When you say "offline", I'm not quite sure the context you're referencing. Is this before whatever element (including a string like <div>) is added to the DOM?



There are three primary ways to interact with elements:





  • document.createElement (with elem.appendChild)



    There was a day in the somewhat distant past when this was the de rigueur way of monkeying with your page content. It appealed to the subset of the "web developer" community which was comfortable with an API-like, programmatic way of addressing and manhandling the DOM and it's denizens; it almost looked like real code, the hard stuff.



    Sure, some of the code kinda rambled, and iteratively creating and appending and appending to those and on and on looked wicked-cool to anyone who didn't have to birth it.



    If you were clever with cloneNode, you could get more reasonable results with DOM nodes. But I think until the last few years, cloneNode wasn't a great option. I may misremember that, cargo-cult and all. Correct me if I'm wrong.



    Then IE came along and gave us...




  • elem.innerHTML



    Surprise! This was non-standard, man. How could they? The only problem was, it was really fast. Killer-fast (like IE6/7 never happened either, we all want to forget).



    DOM was... whatever, browsers were slow and inefficient and weren't really running real code anyways, so DOM's slowness was tolerated. But then, for whatever reason, innerHTML entered stage-left and groovy, dude, it was faster than DOM methods. And elegant, in "I like staring at markup instead of DOM methods all day" way.



    Eventually, everyone got on the .innerHTML bandwagon, and it's now a de facto standard. It's fast, right?



    Well. Depends. Doing elem.innerHTML = "<p>Hey!</p>" was fast, yep. So was elem.innerHTML = '<p>Hey!</p><p>Yo!</p><p>What!</p>'. So naturally folks thought, it's a property, let's get giggy and



    for 1..500 element.innerHTML += '<p>Medusa!</p>';


    Psuedo-code there. Where's the problem? += is like kryptonite to our sprinty friend, innerHTML. Crazy-bad, never-do-it, don't-even-think-about-it bad idea. Why? AFAIK, it has to do with the manner in which .innerHTML assaults the inner content, so when you elem.innerHTML += '...mayhem...', you're "tearing down" the DOM each time. Or something. Which makes the DOM weep.



    Don't make the DOM cry.




  • documentFragment



    So then at some point (has it always been there? DOM Level 3, if that means anything), documentFragment crashed the scene. MDN's brief note about it sums it up, though. It's a Node separate from the main DOM. Like a little box you put stuff in, before moving it to the daddy DOM.



    In terms of speed, it's right behind .innerHTML for the most part, and is all DOM-programmy and stuff. Nifty.






In terms of caching, much of that has to do with how you structure your code and use scope to your advantage. Take for example:



window.addEventListener('load', function () {
var target = document.getElementById('target'),
source = document.getElementById('source'),
...

source.addEventListener('click', function () {
var words = source.getElementsByTagName('span'),
total = words.length,
word;

while (word = words[--total]) {
target.appendChild(word);
}
});

});


http://jsfiddle.net/userdude/T6YLZ/



I keep the target and source above the click handler's scope, so that when I access them later, I already have them. Since I don't add the words to source until window.onload, I won't get all of the span elements with the words to move to target until source.click occurs.



You seem to be describing documentFragments in your terminology. And they're cool. I've only recently come across them, although apparently for those in the know they seem to have been there for a couple years or more. So if you're one of those must.use.dom.methods(now), use documentFragments before inserting into the non-fragment DOM.



However... Keep in mind there are times you will use elemn.innerHTML, because you're adding markup. Maybe you have templates, AJAX response markup, whatnot.



Just don't += when elem.innerHTMLing.






share|improve this answer

























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f14291811%2fminimize-dom-access-inorder-to-have-a-more-responsive-page%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    2














    These are some abstract questions, ones even that do not necessarily relate to each other.





    1. Cache references to accessed elements



    Caching references is a practice and sometimes a necessity. The act of maintaining a reference to an element locally (or, um, globally) is rather simple. When working with DOM methods like document.createElement(), there's usually a variable it's saved to. This is a reference that may be cached for later use. document.getElementById returns a reference to an element, document.getElementsByTagName returns a list of references, as does document.querySelectorAll, etc.





    2. Update nodes "offline" and then add them to the tree



    When you say "offline", I'm not quite sure the context you're referencing. Is this before whatever element (including a string like <div>) is added to the DOM?



    There are three primary ways to interact with elements:





    • document.createElement (with elem.appendChild)



      There was a day in the somewhat distant past when this was the de rigueur way of monkeying with your page content. It appealed to the subset of the "web developer" community which was comfortable with an API-like, programmatic way of addressing and manhandling the DOM and it's denizens; it almost looked like real code, the hard stuff.



      Sure, some of the code kinda rambled, and iteratively creating and appending and appending to those and on and on looked wicked-cool to anyone who didn't have to birth it.



      If you were clever with cloneNode, you could get more reasonable results with DOM nodes. But I think until the last few years, cloneNode wasn't a great option. I may misremember that, cargo-cult and all. Correct me if I'm wrong.



      Then IE came along and gave us...




    • elem.innerHTML



      Surprise! This was non-standard, man. How could they? The only problem was, it was really fast. Killer-fast (like IE6/7 never happened either, we all want to forget).



      DOM was... whatever, browsers were slow and inefficient and weren't really running real code anyways, so DOM's slowness was tolerated. But then, for whatever reason, innerHTML entered stage-left and groovy, dude, it was faster than DOM methods. And elegant, in "I like staring at markup instead of DOM methods all day" way.



      Eventually, everyone got on the .innerHTML bandwagon, and it's now a de facto standard. It's fast, right?



      Well. Depends. Doing elem.innerHTML = "<p>Hey!</p>" was fast, yep. So was elem.innerHTML = '<p>Hey!</p><p>Yo!</p><p>What!</p>'. So naturally folks thought, it's a property, let's get giggy and



      for 1..500 element.innerHTML += '<p>Medusa!</p>';


      Psuedo-code there. Where's the problem? += is like kryptonite to our sprinty friend, innerHTML. Crazy-bad, never-do-it, don't-even-think-about-it bad idea. Why? AFAIK, it has to do with the manner in which .innerHTML assaults the inner content, so when you elem.innerHTML += '...mayhem...', you're "tearing down" the DOM each time. Or something. Which makes the DOM weep.



      Don't make the DOM cry.




    • documentFragment



      So then at some point (has it always been there? DOM Level 3, if that means anything), documentFragment crashed the scene. MDN's brief note about it sums it up, though. It's a Node separate from the main DOM. Like a little box you put stuff in, before moving it to the daddy DOM.



      In terms of speed, it's right behind .innerHTML for the most part, and is all DOM-programmy and stuff. Nifty.






    In terms of caching, much of that has to do with how you structure your code and use scope to your advantage. Take for example:



    window.addEventListener('load', function () {
    var target = document.getElementById('target'),
    source = document.getElementById('source'),
    ...

    source.addEventListener('click', function () {
    var words = source.getElementsByTagName('span'),
    total = words.length,
    word;

    while (word = words[--total]) {
    target.appendChild(word);
    }
    });

    });


    http://jsfiddle.net/userdude/T6YLZ/



    I keep the target and source above the click handler's scope, so that when I access them later, I already have them. Since I don't add the words to source until window.onload, I won't get all of the span elements with the words to move to target until source.click occurs.



    You seem to be describing documentFragments in your terminology. And they're cool. I've only recently come across them, although apparently for those in the know they seem to have been there for a couple years or more. So if you're one of those must.use.dom.methods(now), use documentFragments before inserting into the non-fragment DOM.



    However... Keep in mind there are times you will use elemn.innerHTML, because you're adding markup. Maybe you have templates, AJAX response markup, whatnot.



    Just don't += when elem.innerHTMLing.






    share|improve this answer






























      2














      These are some abstract questions, ones even that do not necessarily relate to each other.





      1. Cache references to accessed elements



      Caching references is a practice and sometimes a necessity. The act of maintaining a reference to an element locally (or, um, globally) is rather simple. When working with DOM methods like document.createElement(), there's usually a variable it's saved to. This is a reference that may be cached for later use. document.getElementById returns a reference to an element, document.getElementsByTagName returns a list of references, as does document.querySelectorAll, etc.





      2. Update nodes "offline" and then add them to the tree



      When you say "offline", I'm not quite sure the context you're referencing. Is this before whatever element (including a string like <div>) is added to the DOM?



      There are three primary ways to interact with elements:





      • document.createElement (with elem.appendChild)



        There was a day in the somewhat distant past when this was the de rigueur way of monkeying with your page content. It appealed to the subset of the "web developer" community which was comfortable with an API-like, programmatic way of addressing and manhandling the DOM and it's denizens; it almost looked like real code, the hard stuff.



        Sure, some of the code kinda rambled, and iteratively creating and appending and appending to those and on and on looked wicked-cool to anyone who didn't have to birth it.



        If you were clever with cloneNode, you could get more reasonable results with DOM nodes. But I think until the last few years, cloneNode wasn't a great option. I may misremember that, cargo-cult and all. Correct me if I'm wrong.



        Then IE came along and gave us...




      • elem.innerHTML



        Surprise! This was non-standard, man. How could they? The only problem was, it was really fast. Killer-fast (like IE6/7 never happened either, we all want to forget).



        DOM was... whatever, browsers were slow and inefficient and weren't really running real code anyways, so DOM's slowness was tolerated. But then, for whatever reason, innerHTML entered stage-left and groovy, dude, it was faster than DOM methods. And elegant, in "I like staring at markup instead of DOM methods all day" way.



        Eventually, everyone got on the .innerHTML bandwagon, and it's now a de facto standard. It's fast, right?



        Well. Depends. Doing elem.innerHTML = "<p>Hey!</p>" was fast, yep. So was elem.innerHTML = '<p>Hey!</p><p>Yo!</p><p>What!</p>'. So naturally folks thought, it's a property, let's get giggy and



        for 1..500 element.innerHTML += '<p>Medusa!</p>';


        Psuedo-code there. Where's the problem? += is like kryptonite to our sprinty friend, innerHTML. Crazy-bad, never-do-it, don't-even-think-about-it bad idea. Why? AFAIK, it has to do with the manner in which .innerHTML assaults the inner content, so when you elem.innerHTML += '...mayhem...', you're "tearing down" the DOM each time. Or something. Which makes the DOM weep.



        Don't make the DOM cry.




      • documentFragment



        So then at some point (has it always been there? DOM Level 3, if that means anything), documentFragment crashed the scene. MDN's brief note about it sums it up, though. It's a Node separate from the main DOM. Like a little box you put stuff in, before moving it to the daddy DOM.



        In terms of speed, it's right behind .innerHTML for the most part, and is all DOM-programmy and stuff. Nifty.






      In terms of caching, much of that has to do with how you structure your code and use scope to your advantage. Take for example:



      window.addEventListener('load', function () {
      var target = document.getElementById('target'),
      source = document.getElementById('source'),
      ...

      source.addEventListener('click', function () {
      var words = source.getElementsByTagName('span'),
      total = words.length,
      word;

      while (word = words[--total]) {
      target.appendChild(word);
      }
      });

      });


      http://jsfiddle.net/userdude/T6YLZ/



      I keep the target and source above the click handler's scope, so that when I access them later, I already have them. Since I don't add the words to source until window.onload, I won't get all of the span elements with the words to move to target until source.click occurs.



      You seem to be describing documentFragments in your terminology. And they're cool. I've only recently come across them, although apparently for those in the know they seem to have been there for a couple years or more. So if you're one of those must.use.dom.methods(now), use documentFragments before inserting into the non-fragment DOM.



      However... Keep in mind there are times you will use elemn.innerHTML, because you're adding markup. Maybe you have templates, AJAX response markup, whatnot.



      Just don't += when elem.innerHTMLing.






      share|improve this answer




























        2












        2








        2







        These are some abstract questions, ones even that do not necessarily relate to each other.





        1. Cache references to accessed elements



        Caching references is a practice and sometimes a necessity. The act of maintaining a reference to an element locally (or, um, globally) is rather simple. When working with DOM methods like document.createElement(), there's usually a variable it's saved to. This is a reference that may be cached for later use. document.getElementById returns a reference to an element, document.getElementsByTagName returns a list of references, as does document.querySelectorAll, etc.





        2. Update nodes "offline" and then add them to the tree



        When you say "offline", I'm not quite sure the context you're referencing. Is this before whatever element (including a string like <div>) is added to the DOM?



        There are three primary ways to interact with elements:





        • document.createElement (with elem.appendChild)



          There was a day in the somewhat distant past when this was the de rigueur way of monkeying with your page content. It appealed to the subset of the "web developer" community which was comfortable with an API-like, programmatic way of addressing and manhandling the DOM and it's denizens; it almost looked like real code, the hard stuff.



          Sure, some of the code kinda rambled, and iteratively creating and appending and appending to those and on and on looked wicked-cool to anyone who didn't have to birth it.



          If you were clever with cloneNode, you could get more reasonable results with DOM nodes. But I think until the last few years, cloneNode wasn't a great option. I may misremember that, cargo-cult and all. Correct me if I'm wrong.



          Then IE came along and gave us...




        • elem.innerHTML



          Surprise! This was non-standard, man. How could they? The only problem was, it was really fast. Killer-fast (like IE6/7 never happened either, we all want to forget).



          DOM was... whatever, browsers were slow and inefficient and weren't really running real code anyways, so DOM's slowness was tolerated. But then, for whatever reason, innerHTML entered stage-left and groovy, dude, it was faster than DOM methods. And elegant, in "I like staring at markup instead of DOM methods all day" way.



          Eventually, everyone got on the .innerHTML bandwagon, and it's now a de facto standard. It's fast, right?



          Well. Depends. Doing elem.innerHTML = "<p>Hey!</p>" was fast, yep. So was elem.innerHTML = '<p>Hey!</p><p>Yo!</p><p>What!</p>'. So naturally folks thought, it's a property, let's get giggy and



          for 1..500 element.innerHTML += '<p>Medusa!</p>';


          Psuedo-code there. Where's the problem? += is like kryptonite to our sprinty friend, innerHTML. Crazy-bad, never-do-it, don't-even-think-about-it bad idea. Why? AFAIK, it has to do with the manner in which .innerHTML assaults the inner content, so when you elem.innerHTML += '...mayhem...', you're "tearing down" the DOM each time. Or something. Which makes the DOM weep.



          Don't make the DOM cry.




        • documentFragment



          So then at some point (has it always been there? DOM Level 3, if that means anything), documentFragment crashed the scene. MDN's brief note about it sums it up, though. It's a Node separate from the main DOM. Like a little box you put stuff in, before moving it to the daddy DOM.



          In terms of speed, it's right behind .innerHTML for the most part, and is all DOM-programmy and stuff. Nifty.






        In terms of caching, much of that has to do with how you structure your code and use scope to your advantage. Take for example:



        window.addEventListener('load', function () {
        var target = document.getElementById('target'),
        source = document.getElementById('source'),
        ...

        source.addEventListener('click', function () {
        var words = source.getElementsByTagName('span'),
        total = words.length,
        word;

        while (word = words[--total]) {
        target.appendChild(word);
        }
        });

        });


        http://jsfiddle.net/userdude/T6YLZ/



        I keep the target and source above the click handler's scope, so that when I access them later, I already have them. Since I don't add the words to source until window.onload, I won't get all of the span elements with the words to move to target until source.click occurs.



        You seem to be describing documentFragments in your terminology. And they're cool. I've only recently come across them, although apparently for those in the know they seem to have been there for a couple years or more. So if you're one of those must.use.dom.methods(now), use documentFragments before inserting into the non-fragment DOM.



        However... Keep in mind there are times you will use elemn.innerHTML, because you're adding markup. Maybe you have templates, AJAX response markup, whatnot.



        Just don't += when elem.innerHTMLing.






        share|improve this answer















        These are some abstract questions, ones even that do not necessarily relate to each other.





        1. Cache references to accessed elements



        Caching references is a practice and sometimes a necessity. The act of maintaining a reference to an element locally (or, um, globally) is rather simple. When working with DOM methods like document.createElement(), there's usually a variable it's saved to. This is a reference that may be cached for later use. document.getElementById returns a reference to an element, document.getElementsByTagName returns a list of references, as does document.querySelectorAll, etc.





        2. Update nodes "offline" and then add them to the tree



        When you say "offline", I'm not quite sure the context you're referencing. Is this before whatever element (including a string like <div>) is added to the DOM?



        There are three primary ways to interact with elements:





        • document.createElement (with elem.appendChild)



          There was a day in the somewhat distant past when this was the de rigueur way of monkeying with your page content. It appealed to the subset of the "web developer" community which was comfortable with an API-like, programmatic way of addressing and manhandling the DOM and it's denizens; it almost looked like real code, the hard stuff.



          Sure, some of the code kinda rambled, and iteratively creating and appending and appending to those and on and on looked wicked-cool to anyone who didn't have to birth it.



          If you were clever with cloneNode, you could get more reasonable results with DOM nodes. But I think until the last few years, cloneNode wasn't a great option. I may misremember that, cargo-cult and all. Correct me if I'm wrong.



          Then IE came along and gave us...




        • elem.innerHTML



          Surprise! This was non-standard, man. How could they? The only problem was, it was really fast. Killer-fast (like IE6/7 never happened either, we all want to forget).



          DOM was... whatever, browsers were slow and inefficient and weren't really running real code anyways, so DOM's slowness was tolerated. But then, for whatever reason, innerHTML entered stage-left and groovy, dude, it was faster than DOM methods. And elegant, in "I like staring at markup instead of DOM methods all day" way.



          Eventually, everyone got on the .innerHTML bandwagon, and it's now a de facto standard. It's fast, right?



          Well. Depends. Doing elem.innerHTML = "<p>Hey!</p>" was fast, yep. So was elem.innerHTML = '<p>Hey!</p><p>Yo!</p><p>What!</p>'. So naturally folks thought, it's a property, let's get giggy and



          for 1..500 element.innerHTML += '<p>Medusa!</p>';


          Psuedo-code there. Where's the problem? += is like kryptonite to our sprinty friend, innerHTML. Crazy-bad, never-do-it, don't-even-think-about-it bad idea. Why? AFAIK, it has to do with the manner in which .innerHTML assaults the inner content, so when you elem.innerHTML += '...mayhem...', you're "tearing down" the DOM each time. Or something. Which makes the DOM weep.



          Don't make the DOM cry.




        • documentFragment



          So then at some point (has it always been there? DOM Level 3, if that means anything), documentFragment crashed the scene. MDN's brief note about it sums it up, though. It's a Node separate from the main DOM. Like a little box you put stuff in, before moving it to the daddy DOM.



          In terms of speed, it's right behind .innerHTML for the most part, and is all DOM-programmy and stuff. Nifty.






        In terms of caching, much of that has to do with how you structure your code and use scope to your advantage. Take for example:



        window.addEventListener('load', function () {
        var target = document.getElementById('target'),
        source = document.getElementById('source'),
        ...

        source.addEventListener('click', function () {
        var words = source.getElementsByTagName('span'),
        total = words.length,
        word;

        while (word = words[--total]) {
        target.appendChild(word);
        }
        });

        });


        http://jsfiddle.net/userdude/T6YLZ/



        I keep the target and source above the click handler's scope, so that when I access them later, I already have them. Since I don't add the words to source until window.onload, I won't get all of the span elements with the words to move to target until source.click occurs.



        You seem to be describing documentFragments in your terminology. And they're cool. I've only recently come across them, although apparently for those in the know they seem to have been there for a couple years or more. So if you're one of those must.use.dom.methods(now), use documentFragments before inserting into the non-fragment DOM.



        However... Keep in mind there are times you will use elemn.innerHTML, because you're adding markup. Maybe you have templates, AJAX response markup, whatnot.



        Just don't += when elem.innerHTMLing.







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 19 '18 at 13:33









        Sᴀᴍ Onᴇᴌᴀ

        6,57182142




        6,57182142










        answered Jan 12 '13 at 13:43









        Jared FarrishJared Farrish

        41.3k147884




        41.3k147884






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f14291811%2fminimize-dom-access-inorder-to-have-a-more-responsive-page%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Guess what letter conforming each word

            Port of Spain

            Run scheduled task as local user group (not BUILTIN)