13.1.3　尽可能少几次添加内容

在第4章中，我们学习到一些jQuery函数，它允许我们向页面元素添加内容：例如，.text（）函数（参见4.7节）允许你替换一个元素中的文本，而.html（）函数（参见4.7节）允许你替换元素中的HTML。例如，如果你想要在ID为passwordError的一个span标签中插入一条错误消息，可能会编写下面的代码：

$（'#passwordError'）.text（'Passwords must by at least 7 characters long.'）；

另外两个函数允许我们在一个元素之后（a p p e n d（），参见4.7节）或之前（prepend（），参见4.7节）添加内容。

添加和修改内容允许我们添加错误消息、弹出的工具提示（参见10.4节）、插入提取引用（参见4.11节），但是，它确实要求浏览器做很多工作。每次添加内容的时候，浏览器都需要做很多工作，你基本上修改DOM（参见4.5节），并且当发生这种情况的时候，浏览器在幕后做很多工作。多次更改内容，可能会显著地影响到Web页面的性能。

添加的内容的量并没有关系，你更改页面的次数会影响到性能。例如，假设你想要创建一个工具提示效果：当某人将鼠标光标悬停在一个框上，带有某些额外内容的一个div会出现。为了做到这一点，你需要把这个框以及额外的内容添加到页面。如下是添加该div的一种方法：

1//add div to end of element

2$（'#elemForTooltip'）.append（'＜div id="tooltip"＞＜/div'）；

3//add headline to tooltip

4$（'#tooltip'）.append（'＜h2＞The tooltip title＜/h2＞'）；

5//add contents

6$（'#tooltip'）.append（'＜p＞The tooltip contents here＜/p＞'）；

上面这段代码将很好地工作：第2行向访问者将要鼠标光标悬停的元素添加了一个div；第4行给工具提示框添加了一个标题；第6行给工具提示添加了一个段落。然而，在这个过程中，通过3次不同的添加操作，DOM修改了3次。在整个过程中，实际上是对Web浏览器进行过多盘剥，并且，减少必须修改DOM的次数，将会显著地提升页面的性能。

在这个例子中，你可以通过构建整个工具提示HTML，将其存储到一个变量中，然后将该变量的内容附加到页面，从而将添加操作的次数减少到仅仅一次，如下所示：

1 var tooltip=’＜div id="tooltip"＞＜h2＞The tooltip title＜/h2＞↵

＜p＞The tooltip contents here＜/p＞＜/div＞；

2$（'#elemForTooltip'）.append（tooltip）；

注意：一行代码末尾的*符号表示下一行代码实际上应该作为第1行代码的一部分。但是，由于一行很长的JavaScript代码可能无法在本书的一页中放下，因此将其分为两行。

在这段代码中，第1行创建了一个变量，其中包含了用于工具提示的所有HTML，并且，第2行代码将该HTML添加给了一个页面元素。这里只有一次添加操作，并且，根据访问者浏览页面的浏览器的不同，这段代码可能比使用3个.append（）函数的情况要快上20倍。

底线是，如果你想要将一段HTML插入到页面上的一个位置，在单独一次操作中这么做，而不是使用多次插入分部分地添加HTML。