首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用JavaScript将HTML内容附加到div的最快方法

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

Stack Overflow用户
提问于 2009-09-07 03:28:23
回答 6查看 43.3K关注 0票数 18

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

这在文本量很小的情况下工作得很好,但随着文本量的增加,它会导致Firefox使用所有可用的CPU,消息会减慢为爬行。我不能使用文本框,因为我想要用颜色突出显示某些文本或使用其他HTML格式。有没有更快的方法来做到这一点,而不会导致浏览器锁定?

我也尝试过使用jQuery,但从我所读到的内容来看,设置.innerHTML比它的.html()函数更快,在我自己的经验中似乎也是如此。

Comet编辑:感知的性能不是问题-消息在返回时已经被写入(使用)。问题是浏览器开始锁定。内容的数量并不是那么庞大- 400-500行似乎就能做到这一点。该div中没有div。整个过程都在一个表中,但希望这无关紧要。

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2009-09-07 03:47:59

您特别提到,您附加的意思是将其附加到同一个父对象。你是否在做类似这样的事情:

myElem.innerHTML += newMessage;

myElem.innerHTML = myElem.innerHTML + newMessage;

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

票数 25
EN

Stack Overflow用户

发布于 2009-09-07 03:36:11

你能不能把你的文本分成块,然后再把它添加进去呢?将文本的一部分打包成div标记,然后将它们拆分,将较小的div添加到页面中。

虽然这不会加速整个过程,但感知到的性能可能会更好,因为用户更快地看到第一个元素,而其余的元素稍后加载,可能会离开可见页面。

此外,您可能应该重新考虑向下发送和嵌入到页面中的数据量。如果浏览器速度很慢,那么数据量肯定会很大--这对用户来说真的有意义吗?或者分页接口(或其他增量加载机制)更有意义?

票数 1
EN

Stack Overflow用户

发布于 2016-09-28 04:41:27

您可以使用insertAdjacentHTML("beforeend", "<HTML to append>")来实现这一点。

Here是一篇关于其性能的文章,有基准测试表明insertAdjacentHTML.innerHTML +=操作快约150倍。不过,在这篇文章撰写后的几年里,浏览器可能已经对此进行了优化。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1387433

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档