|
来源：GBin1.com
我们的浏览器执行越来越多的特性，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化，就变得越来越重要了。前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你9种代码小技巧，只需要一分钟，就可以优化你现有的代码。
使用DocumentFragments或者innerHTML代替复杂的元素注入
DOM操作在浏览器上是要付税的。尽管性能提升是在浏览器，DOM很慢，如果你没有注意到，你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了。
现在假设我们页面中有一个元素，调用AJAX获取JSON列表，然后使用JavaScript更新元素内容。通常，程序员会这么写：
var list = document.querySelector('ul');
ajaxResult.items.forEach(function(item) {
// 创建
- 元素
var li = document.createElement('li');
li.innerHTML = item.text;
//
- 元素常规操作，例如添加class，更改属性attribute，添加事件监听等
// 迅速将
- 元素注入父级
上 面的代码其实是一个错误的写法，将元素带着对每一个列表的DOM操作一起移植是非常慢的。如果你真的想要 使用document.createElement，并且将对象当做节点来处理，那么考虑到性能问题，你应该使用DocumentFragement。
DocumentFragement 是一组子节点的“虚拟存储”，并且它没有父标签。在我们的例子中，将DocumentFragement想象成看不见的元素，在 DOM外，一直保管着你的子节点，直到他们被注入DOM中。那么，原来的代码就可以用DocumentFragment优化一下：
var frag = document.createDocumentFragment();
ajaxResult.items.forEach(function(item) {
// 创建
- 元素
var li = document.createElement('li');
li.innerHTML = item.text;
//
- 元素常规操作
// 例如添加class，更改属性attribute，添加事件监听，添加子节点等
// 将
- 元素添加到碎片中
frag.appendChild(li);
});
// 最后将所有的列表对象通过DocumentFragment集中注入DOM
document.querySelector('ul').appendChild(frag);
为DocumentFragment追加子元素，然后再将这个DocumentFragment加到父列表中，这一系列操作仅仅是一个DOM操作，因此它比起集中注入要快很多。
如果你不需要将列表对象当做节点来操作，更好的方法是用字符串构建HTML内容：
var htmlStr = '';
ajaxResult.items.forEach(function(item) {
// 构建包含HTML页面内容的字符串
htmlStr += '
';
});
// 通过innerHTML设定ul内容
document.querySelector('ul').innerHTML = htmlStr;
这当中也只有一个DOM操作，并且比起DocumentFragment代码量更少。在任何情况下，这两种方法都比在每一次迭代中将元素注入DOM更高效。
下一篇，我们将介绍高频事件/方法的防抖优化。
via Nelly@极客标签
来源：前端性能优化：DocumentFragments或innerHTML取代复杂的元素注入 （编辑：佛山站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
