Javascript的DOM操做 - 你真的了解吗?

    前言

    在前端开发的过程当中,javascript极为重要的一个功能就是对DOM对象的操做,不管增删改查在前端页面操做这一范围内都是比较消耗性能的.如何高效率的,便捷的操做DOM,这就是本文要讲述的.但愿看彻底文,你能知道如何更高效的经过原生js以及jQuery操做DOM元素.

    操做DOM

    这里我但愿介绍的相对系统一点,而不是东一句西一句,因此把Javascript和jQuery经常使用操做DOM的内容概括成思惟导图方便阅读.这里就总结出最基本最经常使用的DOM操做.

    Javascript:

    jQuery:

    上面的思惟导图分别是javascript和jQuery下操做DOM的一些经常使用Function,并不彻底我仅仅列出相对经常使用的.这里我比较推荐的是jQuery的操做方式,更加便捷的同时在性能上也相对有所保障.

    性能影响

    DOM操做会致使最重要的,也是咱们最须要的问题就是致使用户阻塞的重构(reflow)和重绘(repaint).比较通俗的一句话就是你在页面上的任何操做都是有代价的,有些大有些小,若是咱们的操做比较频繁或者波及范围较大,那么就要讲究方式和技巧.reflow和repaint就是咱们在改变页面或者说操做DOM时,会带来的两种后果.

    reflow意味着结构的改变,好比一堆元素堆叠,改变其中一个的宽高,那么相应的全部元素的位置都要改变.repaint意味着样式的改变好比div调整了背景色等,可是位置不变,只改变咱们操做的元素.因此一般来看repaint的代价要远小于reflow,速度也更快.

    影响性能的因素咱们已经知道了,那么下面看一下怎么避免.

    更有效的操做

    最重要的观点:既然任何DOM操做都有代价,那么最好就是不操做或者最少的操做DOM.因此首先记住一个原则,将DOM操做尽可能少!这里有我认为主要的4个原则,记下来足以应付大多数状况.

    (1) 能放到DOM操做以外的操做就放到外面,DOM操做要尽可能少.

    DOM操做优化中这一观点在网上已经很普及了,不少例子都有好比遍历一个数组而后逐渐把内容添加到DOM上,这里就推荐先遍历完数组,而后一次性在DOM上操做.你们能够看代码:

// 很差的作法
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    list.appendChild(item);
}   


// 更好的作法
// 使用容器存放临时变动， 最后再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    fragment.appendChild(item);
}
list.appendChild(fragment);

    (2) 大范围操做先把容器隐藏,在其中操做完成后,再显示.

    这是一个我刚接触前端时遇到的一个优化办法,当时很不理解为何display=none以后操做就算是性能优化了.可是数据证实如此渲染确实快了不少,这个的原理要涉及到浏览器加载和渲染的原理,简单说就是隐藏的元素其中不会产生reflow.这个例子我就不写了,很简单.

    (3) 样式操做不要注意修改属性,直接替换class

    这个仍是比较容易理解的,你逐一修改要访问不少次,而替换class就至关于批量操做了,访问一次DOM就能够了,固然性能提升了.

    (4) 用变量保存DOM对象而不是屡次获取,同时减小操做DOM属性的次数.

//很差

function addAnchor(parentElement, anchorText, anchorClass) {
  var element = document.createElement('a');
  parentElement.appendChild(element);
  element.innerHTML = anchorText;
  element.className = anchorClass;
}


//更好

function addAnchor(parentElement, anchorText, anchorClass) {
  var element = document.createElement('a');
  element.innerHTML = anchorText;
  element.className = anchorClass;
  parentElement.appendChild(element);
}

    总结

    说到这里DOM的操做就差很少了,其实没有什么太新鲜的内容只是作了一个系统点总结.对于性能这部分要平时积累这个意识,由于大多数时候它在开发过程当中体现的并不明显.本文还有不少不足,但愿你们留言沟通吧.