前端性能优化:DocumentFragments或innerHTML取代复杂的元素注入
日期:2013-6-19 来源:GBin1.com
我们的浏览器执行越来越多的特性,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了。前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你9种代码小技巧,只需要一分钟,就可以优化你现有的代码。
使用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@极客标签