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:
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):
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:
In this example (you can easily check it in your browser) – you will not get any issues with memory leaks in DOM.
