本文详细探讨了前端性能优化的技巧，重点关注DOM优化。包括减少DOM操作引起的回流和重绘，通过创建文档片段来批量添加节点，避免频繁访问元素和样式，限制样式更改以减少reflow次数，优化元素数量以提升查询和匹配效率，谨慎处理DOM集合，使用事件委托等方法。建议在执行大量DOM操作时使用绝对定位，利用缓存并批量修改样式以提高性能。
DOM优化
使用cloneNode在外部更新节点然后再通过replace与原始节点互换。
var orig = document.getElementById('container');
var clone = orig.cloneNode(true);
var list = ['foo', 'bar', 'baz'];
var content;
for (var i = 0; i < list.length; i++) {
content = document.createTextNode(list[i]);
clone.appendChild(content);
}
orig.parentNode.replaceChild(clone, orig);优化节点添加
多个节点插入操作，即使在外面设置节点的元素和风格再插入，由于多个节点还是会引发多次reflow。
优化的方法是创建
DocumentFragment，在其中插入节点后再添加到页面。
如JQuery中所有的添加节点的操作如append，都是最终调用DocumentFragment来实现的，
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
