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

时间 2019-12-01

标签前端性能优化 documentfragments innerhtml 取代复杂元素注入栏目系统性能繁體版

原文原文链接

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

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

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

DOM操做在浏览器上是要付税的。尽管性能提高是在浏览器，DOM很慢，若是你没有注意到，你可能会察觉浏览器运行很是的慢。这就是为何减小建立集中的DOM节点以及快速注入是那么的重要了。前端

如今假设咱们页面中有一个<ul>元素，调用AJAX获取JSON列表，而后使用JavaScript更新元素内容。一般，程序员会这么写： java

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优化一下： ajax

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@极客标签浏览器

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