【面向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
    评论
JS渡一教育笔记是一份关于JavaScript编程语言的学习笔记。此笔记主要涵盖了JS的语法和常用功能,旨在帮助初学者从零基础开始学习JS编程。 首先,JS渡一教育笔记包括了JS的基础知识部分,例如数据类型、变量、运算符、条件语句和循环等。这些内容是学习JS编程必不可少的基础,通过学习这些知识,读者可以了解如何声明变量、进行数值计算、编写条件语句等。 其次,JS渡一教育笔记也覆盖了JS中的函数和数组等常用功能。函数是JS中的一种重要的代码封装方式,通过编写函数可以实现代码的复用和模块化,笔记中详细介绍了函数的定义和调用方法。数组是用于存储多个值的数据结构,JS渡一教育笔记也解释了如何创建和操作数组,以及如何使用数组进行数据处理。 此外,JS渡一教育笔记还介绍了JS中的面向对象编程(OOP)。面向对象是一种常用的编程思想,通过将数据和操作封装为对象,可以更好地组织和管理代码。JS渡一教育笔记讲解了面向对象的基本概念和语法,例如如何创建对象、定义类和实现继承等。 最后,JS渡一教育笔记还包含了一些进阶主题,例如DOM操作和AJAX等。DOM是用于操作网页元素的API,JS渡一教育笔记提供了DOM的基本用法和例子。AJAX是一种在不重新加载整个网页的情况下与服务器进行数据交互的技术,笔记中解释了如何使用AJAX发送异步请求和处理响应。 总之,JS渡一教育笔记是一份全面而详细的学习JS编程的资料,可以帮助读者掌握JS的基础知识和常用功能,逐步提升编程能力。无论是初学者还是有一定经验的开发者,都可以从中获得实用的知识和技巧。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值