html - insertAdjacentHTML 为何比 innerHTML 快这么多?

标签 html performance browser innerhtml

About a month ago之后,Firefox 8 实现了 insertAdjacentHTML 方法,该方法与 innerHTML 一起被添加到 IE4 中。根据this基准测试,insertAdjacentHTML 通常比 innerHTML 快一个数量级

我假设两者调用相同的 HTML 解析器,那么为什么差异如此显着? insertAdjacentHTML 是一个简单的方法调用,而 innerHTML 是一个 getter/setter,可能会有一些开销,但我永远不会想到那么多。

最佳答案

work.innerHTML += "<span>test</span>";相当于work.innerHTML = work.innerHTML + "<span>test</span>"; ,即每次运行时,它都必须序列化 work 的所有现有内容然后重新分析整个批处理,加上额外的跨度。

work.insertAdjacentHTML("BeforeEnd", "<span>test</span>");每次只解析一个span,然后将小文档片段附加到DOM。

关于html - insertAdjacentHTML 为何比 innerHTML 快这么多?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7589853/

相关文章:

php - 出于速度和效率目的通过引用传递参数

java - Android 上的 Guava-Splitter 需要 1.7 秒来初始化?

javascript - 是否需要分配此变量才能触发重绘?

javascript - 使用 AngularJS/Javascript 仅禁用浏览器后退按钮导航(而不是应用程序中的链接)

html - 如何删除 HTML select 标签的默认箭头?

html - Angular Material 和输入类型 'time' ,值属性与 ngModel

html - 在不同浏览器上居中滑动图像

html - 如何根据HTML5语义命名div?

java - 在分配给 null 之前检查变量是否为 null?

javascript - 在 Electron 中关闭窗口时保持页面内容加载