浏览器的DOM操作

操作DOM,首先我们要理解什么事DOM,DOM是指文档对象模型,具体是指网页上XHTML中文档正文标题、段落、列表、样式、ID、class及所有其它出现的数据的一个内部表示。DOM的主要思想是HTML上每个元素分别对应于DOM中的一个节点,DOM定义了许多类型来表示节点的多个方面。

这是JavaScript常用的DOM操作

 

这是JQuery常用的DOM操作

 

      在DOM树中。每个节点可以有零到多个子节点,但每个子节点只能有一个父节点

 

性能影响

 

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

    reflow意味着结构的改变,比如一堆元素堆叠,改变其中一个的宽高,那么相应的所有元素的位置都要改变.repaint意味着样式的改变比如div调整了背景色等,但是位置不变,只改变我们操作的元素.所以通常来看repaint的代价要远小于reflow,速度也更快

所以我们应该尽量减少或不使用DOM操作,有一下一些原则:

    (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) 大范围操作先把容器隐藏,在其中操作完成后,再显示.

    (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的操作,是在我不太了解的基础上,参考得来的,希望大家看到后,对自己有帮助。能够更好地将性能优化,。

 

转载于:https://www.cnblogs.com/wsy19940622/p/4593272.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值