DOM

本文深入探讨了DOM映射的概念,解析了元素对象与标签之间的对应关系,详细讲解了DOM回流与重绘的原理及如何优化DOM操作,包括批量使用字符串、createElement()和appendChild()方法,以及利用文档碎片减少页面重绘。
DOM 映射
通过document提供获取页面标签的接口,这个获取的为元素对象
这个对象和标签是一一对应的关系。

标签上的所有属性,都是能够和元素进行对应

id,className,src,value

并不是所有的标签属性都是一一对应在第一层属性上的
1     box = {
2         id:'box',
3         attributes:{
4             index:{//比如说要获取index这个属性,就必须通过box.attributes.index,这个顺序来找。
5                 nodeName:
6                 nodeValue:1
7             }
8         }
9     }


DOM 回流
DOM中如果操作了某个元素的位置或者大小,会导致浏览器会重新计算每个
元素的所占的位置,这样特别消耗性能,尽量少操作DOM

批量操作DOM的时候最好使用字符串
其次使用createElement()、appendChild....
最后使用文档碎片
1   let frg = document.createDocumentFragment();
2         frg.append(ele1);
3         frg.append(ele2);
4         parentNode.appendChild(frg[ele1,ele2])


DOM 重绘
当页面中元素的背景或者字体颜色发生改变,
那么浏览器要对元素进行重新的描绘;这种现象就是“重绘”;

转载于:https://www.cnblogs.com/MrZhujl/p/9942519.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值