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

2016-03-28 14:57:08来源:imooc作者:
DOM操作在浏览器上是要付税的。尽管性能提升是在浏览器,DOM很慢,如果你没有注意到,你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了。
DOM操作在浏览器上是要付税的。尽管性能提升是在浏览器,DOM很慢,如果你没有注意到,你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了。 现在假设我们页面中有一个<ul>元素,调用AJAX获取JSON列表,然后使用JavaScript更新元素内容。通常,程序员会这么写: 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优化一下: Javascript代码 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); 
}); 
// 最后将所有的列表对象通过DocumentFragment集中注入DOM  document.querySelector(‘ul‘).appendChild(frag);  为DocumentFragment追加子元素,然后再将这个DocumentFragment加到父列表中,这一系列操作仅仅是一个DOM操作,因此它比起集中注入要快很多。 如果你不需要将列表对象当做节点来操作,更好的方法是用字符串构建HTML内容: Javascript代码 var htmlStr = ‘‘;  ajaxResult.items.forEach(function(item) { 
    // 构建包含HTML页面内容的字符串 
    htmlStr += ‘<li>‘ + item.text + ‘</li>‘; 
}); 
// 通过innerHTML设定ul内容  document.querySelector(‘ul‘).innerHTML = htmlStr;  这当中也只有一个DOM操作,并且比起DocumentFragment代码量更少。在任何情况下,这两种方法都比在每一次迭代中将元素注入DOM更高效。
关键词:

相关阅读:

赞助商链接:

齐乐娱乐