Originally published at WillWorkForBanjos.com
However, let's say you've got an application that needs to have a dynamic front-end. You want several areas of your page to be changeable either through AJAX requests or user-interactions within the page. Using jQuery's html() and append() functions in this situation will negatively affect performance (potentially up to 60%). The answer is to manually utilize the same thing that jQuery is using: Document Fragments. Document Fragments are just lightweight containers made to hold DOM nodes and you interact with them via included functions such as setAttribute(). Let's look at a simple example where we insert a short list to the page using both jQuery and Document Fragments.