About a month ago,Firefox 8实现了insertAdjacentHTML方法,该方法与innerHTML一起被添加到IE4中。根据{{3}}基准测试,insertAdjacentHTML通常比innerHTML快一个数量级。
我假设两者都调用相同的HTML解析器,那么为什么差异性很大呢? insertAdjacentHTML是一个简单的方法调用,而innerHTML是一个getter / setter,可能会有一些开销,但我绝对不会想到那么多。
答案 0 :(得分:10)
work.innerHTML += "<span>test</span>";
相当于work.innerHTML = work.innerHTML + "<span>test</span>";
,即每次运行时都必须序列化work
的所有现有内容,然后重新整理所有内容,再加上额外的跨度。
work.insertAdjacentHTML("BeforeEnd", "<span>test</span>");
每次只解析一个跨度,然后将小文档片段附加到DOM。
答案 1 :(得分:1)
innerHTML
setter必须在添加新节点之前删除所有现有子节点。
不知道这是否是唯一的原因,但这肯定是一个因素。