菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
340
0

javascript系列之DOM(二)

原创
05/13 14:22
阅读数 722365

标签:des   com   http   class   blog   code   div   style   img   java   size   

原生DOM扩展

     我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点。我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一些优秀 的DOM操作API。可见原生的一些方法和属性,还不能很灵活快捷的来完成我们所希望的操作。下面将总结出总结出几种很实用的扩展方法。包括 after()和before(),

A:after()和before()

bubuko.com,布布扣
 1 function after(elem){
 2     if(this.parentNode){
 3         this.parentNode.insertBefore(elem,this.nextSibling)
 4     }
 5 }
 6 function before(elem){
 7     if(this.parentNode){
 8         this.parentNode.insertBefore(elem,this)
 9     }
10 }
bubuko.com,布布扣

     这里的after()和 before()方法主要是为了快速解决this,this.nextSibling之间的空间问题。方便我们灵活的插入元素节点。两种方法的核心当然是insertBefore(),它是父节点和子节点,子节点之间联系的重要桥梁。

B:text()

bubuko.com,布布扣
 1 function text(elem){
 2     var str="";
 3     //判断是否有子节点
 4     elem=elem.childNodes||elem;
 5     for(var i=0;i<elem.length;i++){
 6         //若果不是元素节点,追加文本值
 7         str+=elem.nodeType!=1?elem.nodeValue:text(elem.childNodes[i]);    
 8     }
 9     return str;
10 }
bubuko.com,布布扣

     text()获取匹配元素集合(他的后代)中每个元素的文本内容,对于文本节点nodeValue属性为其文本内容,对于属性节点nodeValue为其属性值,他对于元素节点是不可用的。

DOM性能优化

     在DOM操作中,我们再完成其所期望实现的功能的同时,我们最应该关心的就是优化问题。DOM操作很耗费性能,相信各位前端儿们早有耳闻,在前文中提到的 createDocumentFrament()算是一个引子。DOM操作的效率为什么会这么低?这么慢?为什么说DOM操作是性能优化的主攻点?因为有 reflow和repaint这两个小屁孩的存在。而且浏览器为了保证执行结果的准确性(太宠这两个孩子了),他们想要什么就立马去实现(同步执行)。要 是他两贪得无厌,操作的波及范围比较大,次数比较频繁时。这后果可就够喝一壶的了。有必要先介绍下这两个坏小子: reflow 意味着结构的 改变,比如一堆元素,改变其中一个的宽高,那么相应的所有元素的位置都要改变.repaint意味着样式的改变比如div调整了背景色等,但是位置不 变,只改变我们操作的元素.所以通常来看repaint的代价要远小于reflow,比它斯文点,速度也更快.

      我们既然发现了问题的根源所在,就是去解决这些问题。毕竟这两个小屁儿又不是咱的亲儿子,该打屁股可不能客气。把我的一个原则当然就是尽量减少DOM操作了,不给他们更多放肆的机会。这里有几条原则。首先就从createDocumentFrament()说起吧!

A:createDocumentFrament()

      实例见前文,试想若果我们没有个这“盒子”,那document每构造一个元素,页面就要重构依次,后果可想而知。我们先把药添加的元素包裹起来,寄存在这个预定的盒子(文档碎片)里,然后一次性添加到文档中,jQuery就是这么干的。

B:display:none

      将display设置为"none",只是把这个元素从当前的DOM结构暂时删除起来, 让其不可见。这样私下就可以好好调戏他了,这个结构是个大容器,可以干很多事情,比如说添加一堆元素。一切完毕之后恢复。这样它只是一次重构。

C:class

     这个还是比较容易理解的,修改属性(样式居多)时,你逐一修改要访问很多次,而替换class就相当于批量操作了,访问一次DOM就可以了,当然性能提高了.

D:变量保存

      用变量保存DOM对象而不是多次获取,最典型的莫过于for(var i=0;i<list.length;i++)和for(var i=0,l=list.length;i<l;i++)效率比较,每次循环都要去获取长度可是很伤神又伤身的哦。你平时写的时候注意了这个细节了 嘛?

 

javascript系列之DOM(二),布布扣,bubuko.com

javascript系列之DOM(二)

发表评论

0/200
340 点赞
0 评论
收藏
为你推荐 换一批