DOM结构及优化
1.DOM树中三种常见的DOM节点:

1>元素节点:上图中<a>,<h1>等都是元素节点,即标签
2>文本节点:向用户展示的内容,如...中的"文档标题"文本
3>属性节点:元素的属性,如a标签的链接地址属性 href
4>通过getElementById和document.body等方法获取元素就是获取元素节点的
2. DOM结构优化
- 减少DOM访问次数
- 多次访问同一DOM,应该用局部变量缓存该DOM
- 尽可能使用querySelector,而不是使用获取HTML集合的API
- 注意回流和重绘
- 使用事件委托,减少绑定事件的数量
DOM结构及优化的更多相关文章
- DOM2级提供的对DOM结构执行深度优先遍历 笔记
NodeIterator和TreeWalker这2个类型可以基于给定的起点对DOM结构执行深度优先遍历.(我测试用的浏览器是Chrome,介绍说IE不支持DOM遍历,但是不知道最新的IE支持不支持) ...
- js实现DOM结构
/* 编写一段js脚本生成下面的DOM结构.要求使用标准的DOM方法或属性 <div id='example'> <p class='slogan'>淘,你喜欢</p&g ...
- React虚拟DOM具体实现——利用节点json描述还原dom结构
前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...
- 提高测试脚本复用性降低DOM结构引起路径变化的影响
问题描述 在定位元素时直接复制的xpath. 但是因为下面这些原因导致之前引用的路径失效, 不得不频繁修改脚本重新定位元素, 大降低了脚本的复用性, 也增加了维护的成本: 1. UI修改 (比如增加了 ...
- MySQL 性能优化--优化数据库结构之优化数据类型
MySQL性能优化--优化数据库结构之优化数据类型 By:授客 QQ:1033553122 优化数字数据(Numeric Data) l 对于唯一ID或其它可用字符串或数字表示的值,选择 ...
- MySQL 性能优化--优化数据库结构之优化数据大小
MySQL性能优化--优化数据库结构之优化数据大小 By:授客 QQ:1033553122 尽量减少表占用的磁盘空间.通常,执行查询期间处理表数据时,小表占用更少的内存. 表列 l 尽可能使 ...
- datagrid 完整dom结构
<!-- datagrid的最外层容器,可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象, ...
- jQuery EasyUI Datagrid组件的完整的基础DOM结构
标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而“完整” ...
- html5--switch选择结构的优化
html5--switch选择结构的优化 问题: 使用循环语句判断月份是31天还是30天 两点提示: 使用switch多条件判断语句 合理的省略break优化代码 <!DOCTYPE html& ...
随机推荐
- DOS下读取smbios的汇编程序(通过搜索memory)
汇编程序编写的读取smbios的代码: ;------------------------------------------------- ;功能: 读取SMBIOS 的Entry Point ,并 ...
- strpos 的正确使用方式
首先简单介绍下strpos函数: strpos函数是查找某个字符在字符串中的位置:这里需要明确这个函数的作用: 这个函数得到的是位置:如果存在:返回数字:否则返回的是false: 而很多时候我们拿这个 ...
- Redis可以用来做什么?(摘自http://www.lianpenglin.cc廉鹏林博客)
Redis 是互联网技术领域使用最为广泛的存储中间件,它是「Remote Dictionary Service」的首字母缩写,也就是「远程字典服务」.Redis 以其超高的性能.完美的文档.简洁易懂的 ...
- Zookeeper集群方式安装
分布式安装部署 配置系统环境变量等 /etc/profile export JAVA_HOME=/opt/app/jdk1.8.0_181 #export CLASSPATH=.:${JAVA_HOM ...
- FJOI2019游记
应该是.....尽力了吧 day0:下午到酒店,晚上魔兽(with lyc)+雀魂.心里也清楚,今年只是来观光的. day1:上午暴力打完走人.下午和晚上魔兽+雀魂+300. day2:暴力打到一半拉 ...
- 那些不错的 [ Html5 + CSS3 + Canvas ] 效果!
apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...
- 错误 1 error LNK2019: 无法解析的外部符号 __imp__pthread_create,该符号在函数 _main 中被引用 解决方法
晚上花几分钟在windows下测了下pthread的用法,出现错误 1 error LNK2019: 无法解析的外部符号 __imp__pthread_create,该符号在函数 _main 中被引用 ...
- Python之字符编码(一)
一.了解字符编码的知识储备? 1.计算机基础知识? 计算机中所有的软件文件(包括:操作系统)都存储在硬盘,启动计算机,计算机需要把系统文件都去到内存中. 2.文本编辑器存取文件的原理(nodepad+ ...
- 【4opencv】求解向量和轮廓的交点
在“学习OpenCV3"的QQ群众,网友且行且珍惜针对前期博客(https://www.cnblogs.com/jsxyhelu/p/9345590.html)中的内容提出了以下问题: 比如 ...
- tr 命令用法
tr a. 替换全部字符 [root@bogon scripts]# tr [a-z] [A-Z] < /etc/fstab 将读出的结果全部替换成大写字母 (取一行作为展示效果) ...