1.DOM树中三种常见的DOM节点:

1>元素节点：上图中<a>,<h1>等都是元素节点，即标签

2>文本节点：向用户展示的内容，如...中的"文档标题"文本

3>属性节点：元素的属性，如a标签的链接地址属性 href

4>通过getElementById和document.body等方法获取元素就是获取元素节点的

2. DOM结构优化

  • 减少DOM访问次数
  • 多次访问同一DOM，应该用局部变量缓存该DOM
  • 尽可能使用querySelector，而不是使用获取HTML集合的API
  • 注意回流和重绘
  • 使用事件委托，减少绑定事件的数量

DOM结构及优化的更多相关文章

  1. DOM2级提供的对DOM结构执行深度优先遍历 笔记

    NodeIterator和TreeWalker这2个类型可以基于给定的起点对DOM结构执行深度优先遍历.(我测试用的浏览器是Chrome,介绍说IE不支持DOM遍历,但是不知道最新的IE支持不支持) ...

  2. js实现DOM结构

    /* 编写一段js脚本生成下面的DOM结构.要求使用标准的DOM方法或属性 <div id='example'> <p class='slogan'>淘,你喜欢</p&g ...

  3. React虚拟DOM具体实现——利用节点json描述还原dom结构

    前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...

  4. 提高测试脚本复用性降低DOM结构引起路径变化的影响

    问题描述 在定位元素时直接复制的xpath. 但是因为下面这些原因导致之前引用的路径失效, 不得不频繁修改脚本重新定位元素, 大降低了脚本的复用性, 也增加了维护的成本: 1. UI修改 (比如增加了 ...

  5. MySQL 性能优化--优化数据库结构之优化数据类型

    MySQL性能优化--优化数据库结构之优化数据类型   By:授客  QQ:1033553122   优化数字数据(Numeric Data) l   对于唯一ID或其它可用字符串或数字表示的值,选择 ...

  6. MySQL 性能优化--优化数据库结构之优化数据大小

    MySQL性能优化--优化数据库结构之优化数据大小   By:授客  QQ:1033553122 尽量减少表占用的磁盘空间.通常,执行查询期间处理表数据时,小表占用更少的内存. 表列 l   尽可能使 ...

  7. datagrid 完整dom结构

    <!-- datagrid的最外层容器,可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象, ...

  8. jQuery EasyUI Datagrid组件的完整的基础DOM结构

    标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而“完整” ...

  9. html5--switch选择结构的优化

    html5--switch选择结构的优化 问题: 使用循环语句判断月份是31天还是30天 两点提示: 使用switch多条件判断语句 合理的省略break优化代码 <!DOCTYPE html& ...

随机推荐

  1. 详解centos6和centos7防火墙

    CentOS6.5查看防火墙的状态: ? 1 [zh@localhost ~]$service iptable status 显示结果: ? 1 2 3 4 5 6 7 8 9 [zh@localho ...

  2. django变量使用-在模板中使用视图函数中的变量

    DTL语言,即django template language 第一次使用时,需要修改项目的setting.py文件,将其中TEMPLATES中的DIRS修改为os.path.join(BASE_DI ...

  3. python静态属性@property、类方法@classmethod、静态方法@staticmethod和普通方法

    静态属性:即将类的函数通过@property属性封装,封装后实例调用该函数时,不再需要在函数后面加(),而是用类似调用数据属性的方式直接调用函数名称即可执行函数. 静态属性既可以访问类的属性,也可以访 ...

  4. DBeaver连接Oracle11g数据库

    DBeaver连接Oracle11g数据库 一.准备 (1)dbeaver管理软件 (2)远程连接数据库地址.用户名秘密等 (3)Oracle驱动:ojdbc6.jar工具包 下载地址:https:/ ...

  5. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  6. py4CV例子2汽车检测和svm算法

    1.什么是汽车检测数据集: ) pos, neg = , ) matcher = cv2.FlannBasedMatcher(flann_params, {}) bow_kmeans_trainer ...

  7. Black Hat Python3 Chapter4

    mail sniffer 现在的邮箱应用我能找到的都是加密传输了,因此相像书中那样直接从抓到的包里获取到用户名和密码信息除非是自己专门搭建一个邮箱服务器,不然很难做到,为了便于理解代码的运行,多添加一 ...

  8. topcoder srm 688 div1 -3

    1.给出一个只包含'(',')'的字符串$s$,现在对它进行若干次如下操作使其变成匹配的括号串(每次操作包含3个步骤):(1)选择 $L,R,L\leq R$;(2)将$L,R$之间的字符翻转:(3) ...

  9. topcoder srm 662 div1

    problem1 link 首先枚举差值$d$,判断是否存在一个序列任意连续两个之间的差值小于$d$. 首先将数字排序,然后从小到大依次放置每一个数字.每个当前的数字有两个位置可以放,当前序列的前面或 ...

  10. CentOS 使用 Docker 安装 Sentry

    官网介绍:Sentry是一个实时事件日志记录和汇集的日志平台,其专注于错误监控,以及提取一切事后处理所需的信息.他基于Django开发,目的在于帮助开发人员从散落在多个不同服务器上的日志文件里提取发掘 ...