前端性能优化：DocumentFragments或innerHTML取代复杂的元素注入

曾经终败给现在 2022-01-21 04:31 153阅读 0赞

日期：2013-6-19  来源：[GBin1.com][]

我们的浏览器执行越来越多的特性，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化，就变得越来越重要了。前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你9种代码小技巧，只需要一分钟，就可以优化你现有的代码。

## [![前端性能优化：DocumentFragments或innerHTML取代复杂的元素注入][DocumentFragments_innerHTML]][DocumentFragments_innerHTML_DocumentFragments_innerHTML]    ##

## 使用DocumentFragments或者innerHTML代替复杂的元素注入 ##

DOM操作在浏览器上是要付税的。尽管性能提升是在浏览器，DOM很慢，如果你没有注意到，你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了。

现在假设我们页面中有一个<ul>元素，调用AJAX获取JSON列表，然后使用JavaScript更新元素内容。通常，程序员会这么写：

var list = document.querySelector('ul');
    ajaxResult.items.forEach(function(item) {
        // 创建<li>元素
        var li = document.createElement('li');
        li.innerHTML = item.text;
    
        // <li>元素常规操作，例如添加class，更改属性attribute，添加事件监听等
    
        // 迅速将<li>元素注入父级<ul>中
        list.apppendChild(li);
    });

上面的代码其实是一个错误的写法，将<ul>元素带着对每一个列表的DOM操作一起移植是非常慢的。如果你真的想要 使用document.createElement，并且将对象当做节点来处理，那么考虑到性能问题，你应该使用DocumentFragement。

DocumentFragement 是一组子节点的“虚拟存储”，并且它没有父标签。在我们的例子中，将DocumentFragement想象成看不见的<ul>元素，在 DOM外，一直保管着你的子节点，直到他们被注入DOM中。那么，原来的代码就可以用DocumentFragment优化一下：

var frag = document.createDocumentFragment();
    
    ajaxResult.items.forEach(function(item) {
        // 创建<li>元素
        var li = document.createElement('li');
        li.innerHTML = item.text;
    
        // <li>元素常规操作
        // 例如添加class，更改属性attribute，添加事件监听，添加子节点等
    
        // 将<li>元素添加到碎片中
        frag.appendChild(li);
    });
    ........

via [ Nelly@极客标签 ][Nelly_]

来源：[前端性能优化：DocumentFragments或innerHTML取代复杂的元素注入][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130619-front-end-performance-optimization-1/
[DocumentFragments_innerHTML]: http://www.gbin1.com/technology/javascript/20130619-front-end-performance-optimization-1/title.jpg
[DocumentFragments_innerHTML_DocumentFragments_innerHTML]: http://www.gbin1.com/technology/javascript/20130619-front-end-performance-optimization-1/index.html
[Nelly_]: http://www.gbtags.com/gb/share/1215.htm