【面向JS--DOM加载过程】

DOM加载过程:

DOM加载

layout: 重新计算布局——效率低

只要改变DOM树上的元素,都会重新layout——效率更低

如何减少layout的次数:先在内存中拼凑要添加的DOM子树,然后一次性挂到页面,只会触发一次layout——效率提高

目前前端三大框架中的 vue 与 React 采用的虚拟DOM思想,就是在极大的程度上减少了layout的次数。

把要生成的DOM存在文档片段中,最后挂载到DOM树上

文档片段: 内存中临时存储一个DOM子树的临时父节点,用法和普通父节点完全一样

可将DOM子树整体挂到DOM树上,但自己不出现在DOM中

何时使用: 同时添加多个平级元素时,都要先放在文档片段中,再将文档片段整体挂到页面

如何使用: 3步:

1、创建文档片段对象:
   var frag=document.createDocumentFragment();
2、将平级子元素,追加到文档片段中
   frag.appendChild(elem)
3、将文档片段挂到DOM树上指定父节点下
   parent.appendChild(frag);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值