YSLOW性能测试前端调优23大规则(十六):减少DOM数

HTML DOM（HTML Document Object Model）是专门适用于HTML/XHTML的文档对象模型，定义了访问和操作HTML文档的标准方法，通常我们也可以将HTML DOM理解为网页的API。HTML DOM将网页中的各个元素都看作为对象，这样可以让网页中的元素被计算机语言获取或者编辑。

DOM是一种与浏览器、平台、语言无关的接口，DOM是以层次结构组织或信息片断集合，HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构（节点树）。HTML DOM树所示。

通过HTML DOM，树中的所有节点均可通过JavaScript进行访问。所有HTML元素（节点）均可被修改，也可以创建或删除节点。

节点分父节点（parent）、子节点（child）、同胞节点（sibling），节点树中的节点彼此拥有有层级关系，父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

? 在节点树中，顶端节点被称为根（root）

? 每个节点都有父节点、除了根节点之外，根节点是没有父节点的。

? 一个节点可拥有任意数量的子

? 同胞是指拥有相同父节点的节点

节点节点之间的关系如图所示。

JavaScript或其他语言会通过HTML DOM对HTML中的元素进行访问，包括修改节点的属性值、插入新的节点、删除节点等操作。那么为了提高性能，前端页面的HTML DOM则应该越小越好，如果HTML DOM过多，这些会导致以下几个方面的问题：

1) HTML DOM数越多，越复杂，意味着页面加载时下面的字节数就越多。

2) HTML DOM数年越多，那么遍历和查找元素的时间就会越长。

需要获取页面中的DOM数，可以在Firebug的控制台中，输入以下命令。

document.getElementsByTagName('*').length

雅虎团队建议DOM的数量不要超过700，但现在的页面越来越复杂，一般类似雅虎这类资讯类的网站都远超过700。下面是几个我们比较熟悉的网站的DOM数。

所以在前端开发时应该尽量降低DOM数，减少DOM数的方法通常有以下几种：

1. 避免不正确地使用服务器控件。

2. 减少不必要的页面内容。

3. 如果数据量大，可以考虑分页，或者按需加载。

4. 最小化DOM深度。