使用JavaScript将HTML内容附加到div的最快方法

Question

我有一个HTML页面,它使用AJAX从服务器检索消息.我将这些消息附加到a,因为它们是通过设置innerHTML属性来检索的.

这种方法工作正常,但文本量很小,但随着它的增长,它会使Firefox使用所有可用的CPU,并且消息会慢下来爬行.我不能使用文本框,因为我希望某些文本以彩色突出显示或使用其他HTML格式.有没有更快的方法来做这个不会导致浏览器锁定？

我也试过使用jQuery,但是从我读过的设置开始.innerHTML比它的.html()函数更快,而且在我自己的经验中似乎也是如此.

编辑:感知性能不是问题 - 消息在返回时已经被写入(使用Comet).问题是浏览器开始锁定.内容的数量并不是那么大--400-500行似乎就这么做了.该div中没有​​div.整个事情都在一张桌子里,但希望这不重要.

Answer 1

您明确表示您附加意味着您将其附加到同一父级.你做的事情是这样的:

myElem.innerHTML += newMessage;

要么

myElem.innerHTML = myElem.innerHTML + newMessage;

因为这是非常低效的(参见这个基准:http://jsben.ch/#/Nly0s).它会导致浏览器首先执行一个非常大的字符串连接(这永远不会好),但更糟糕的是,必须重新解析插入并呈现之前附加的所有内容.比这更好的是创建一个新的div对象,使用innerHTML放入消息然后调用dom方法appendChild来插入新创建的div与消息.然后浏览器只需插入并呈现新消息.