【面向JS--DOM加载过程】
来源:互联网 发布:格兰特希尔数据 编辑:程序博客网 时间:2024/06/06 04:38
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
- 【面向JS--DOM加载过程】
- 【面向JS--DOM节点】
- 认识DOM和DOM加载过程以及如何让DOM加载完成后再执行js脚本文件
- 认识DOM和DOM加载过程以及如何让DOM加载完成后再执行js脚本文件
- 认识DOM以及DOM加载过程
- JS面向对象和DOM
- 【面向JS--DOM 递归API】
- 【面向JS--DOM 操作API】
- JS , CSS ,image HTML DOM的加载过程 以及 总结JS的基本用法
- JS dom 面向对象的理解
- 【面向JS--HTML DOM常用对象】
- JS----拖拽图层,面向过程,面向对象
- 【转】js判断dom元素加载完成
- js加载优化:Script DOM Element
- PHP 初始化文件 自动加载 面向过程
- Java面向对象之类加载过程
- 原生JS实现DOM加载完成马上执行JS代码
- 02 JS-DOM之--js的加载和window onload
- 算法设计与分析——动态规划方法求解序列的连续最大子段和
- autoware安装、配置和快速使用
- 修改iso文件,让Windows10成为真正会念诗的膜法师
- 新版本kali-2017中部署dvwa后数据库连接失败的解决办法
- Spring Security OAuth2 开发指南
- 【面向JS--DOM加载过程】
- rsa破解简单练习
- function template函数模板概念笔记----C++学习之路
- 个人总结29
- 远方的路
- (shui ti)输入3个整数,输出绝对值最大的那个数。
- Scala的协变covariant(+),逆变contravariant(-),上界(<:),下界(>:)
- Java多线程和内存模型(一):进程和线程基础
- 计算机网络基础--1概述①