Flooding DOM by using HTML templates

Photo by Irvan Smith on Unsplash

Some time back I’ve discovered and started to use an amazing feature of HTML 5: templates. If you never heard about it – you definitely should visit HTML 5 Rocks website to read about pros and cons of these functionality. But anyway this post is not about feature itself, but about some pitfall, which I’ve faced after some time.

So, let’s imagine, that you are going to write some page with a dynamic content, which will be generated by using some AJAX calls and templates mechanism. For example you are not satisfied with slow data-binding from existing frameworks (all of them are too generic) and you developed your own data-binding with blackjack and… anyway, you have some HTML:

      
        <!DOCTYPE html>
      
        <html>
      
          <head>
      
            <template id="testTemplate">
      
              <div class="test-class1"></div>
      
              <div class="test-class2"></div>
      
              <div class="test-class3"></div>
      
            </template>
      
          </head>
      
          <body>
      
            <div id="parent">
      
            </div>
      
            <script type="text/javascript">
      
              //Some script will be added here later
      
            </script>
      
          </body>
      
        </html>

view raw flooding-dom.html hosted with ❤ by GitHub

So, now we want to bind some data to this template. So basically, what I will do – is just reuse this template 1000 times and then… drop all nodes, that I’ve been added this way (for example you need to remove everything, that outside the viewport):

      
        (function() {
      
          let template = document.getElementById('testTemplate');
      
          function removeNode(node) {
      
            node.parentNode.removeChild(node);
      
          }
      
          for (let i = 0; i < 1000; ++i) {
      
            let clone = document.importNode(template.content, true);
      
            clone.querySelector('.test-class1').innerHTML = 'Firts Column_' + i;
      
            clone.querySelector('.test-class2').innerHTML = 'Second Column_' + i;
      
            clone.querySelector('.test-class3').innerHTML = 'Third Column_' + i;
      
            document.getElementById('parent').appendChild(clone);
      
          }
      
          let slice = Array.prototype.slice.call;
      
          slice(document.getElementsByClassName('test-class1'), 0).forEach(removeNode);
      
          slice(document.getElementsByClassName('test-class2'), 0).forEach(removeNode);
      
          slice(document.getElementsByClassName('test-class3'), 0).forEach(removeNode);
      
        })();

view raw flooding-dom.js hosted with ❤ by GitHub

And now the most interesting part. You, probably are expecting, that DOM is in the same state as it was before I’ve done these strange manipulations. But it’s not.

Before:

After:

What’s wrong? The answer is very simple. Let’s go into debugger and find an answer:

Yes, so every tab, newline and other character, that is not HTML tag – creates Text Node. I believe most of developers prefer to format their code with tabs and spaces, but sometimes it can lead to some unexpected behavior. So, it’s fine to use this pretty-printing on development boxes, but don’t forget to minimize your HTML before moving it to production:

      
        <!DOCTYPE html>
      
        <html>
      
          <head>
      
            <template id="testTemplate">
      
              <div class="test-class1"></div>
      
              <div class="test-class2"></div>
      
              <div class="test-class3"></div>
      
            </template>
      
          </head>
      
          <body>
      
            <div id="parent">
      
            </div>
      
            <script type="text/javascript">
      
              (function() {
      
                var template = document.getElementById('testTemplate'),
      
                  clone, i;
      
                function removeNode(node) {
      
                  node.parentNode.removeChild(node);
      
                };
      
                for (i = 0; i < 1000; ++i) {
      
                  clone = document.importNode(template.content, true);
      
                  clone.querySelector('.test-class1').innerHTML = 'Firts Column_' + i;
      
                  clone.querySelector('.test-class2').innerHTML = 'Second Column_' + i;
      
                  clone.querySelector('.test-class3').innerHTML = 'Third Column_' + i;
      
                  document.getElementById('parent').appendChild(clone);
      
                }
      
                let slice = Array.prototype.slice.call;
      
                slice(document.getElementsByClassName('test-class1'), 0).forEach(removeNode);
      
                slice(document.getElementsByClassName('test-class2'), 0).forEach(removeNode);
      
                slice(document.getElementsByClassName('test-class3'), 0).forEach(removeNode);
      
              })();
      
            </script>
      
          </body>
      
        </html>

view raw flooding-dom-fixed.html hosted with ❤ by GitHub

In this example (you can easily check it in your browser) – you will not get any issues with memory leaks in DOM.

Flooding DOM by using HTML templates

Published by Anton Gorbikov

Leave a Reply Cancel reply

Share:

Like this:

Related

Published by Anton Gorbikov

Leave a Reply Cancel reply