Javascript 为什么appendChild会触发重新计算样式，而设置innerHTML don'；铬上的t？
使用Chrome开发者工具中的时间线，我使用这段小代码通过innerHTML和appendChild方法记录事件：Javascript 为什么appendChild会触发重新计算样式，而设置innerHTML don'；铬上的t？,javascript,html,google-chrome,google-chrome-devtools,Javascript,Html,Google Chrome,Google Chrome Devtools,使用Chrome开发者工具中的时间线，我使用这段小代码通过innerHTML和appendChild方法记录事件： <!DOCTYPE html> <html> <head> <script> function testInnerHTML(){ var wrap = document.getElementById('wrapper'); wrap.innerHTML = "test"; } fu
<!DOCTYPE html>
<html>
<head>
<script>
function testInnerHTML(){
var wrap = document.getElementById('wrapper');
wrap.innerHTML = "test";
}
function testAppendChild(){
var wrap = document.getElementById('wrapper');
wrap.appendChild(document.createTextNode("test"));
}
</script>
</head>
<body>
<input type="button" value="innerHTML" onClick="testInnerHTML();"/>
<input type="button" value="appendChild" onClick="testAppendChild();"/>
<div id="wrapper"></div>
</body>
</html>
函数testinerhtml（）{
var wrap=document.getElementById（'wrapper'）；
wrap.innerHTML=“测试”；
}
函数testAppendChild（）{
var wrap=document.getElementById（'wrapper'）；
wrap.appendChild（document.createTextNode（“test”）；
}
- innerHTML触发布局事件
- appendChild触发布局事件和重新计算样式事件
在本示例中，每个事件几乎不需要处理任何内容，并且似乎或多或少是并行发生的，但是如果您使用一个大的html表来执行此操作，您将看到重新计算样式可能需要几秒钟，然后将发生布局。所以如果我们能避免它，那就更好了 我正在考虑使用带有文档片段的appendChild来避免innerHTML所涉及的解析。但这种方式节省的时间被重新计算的方式所浪费 我使用的是Chrome版本23.0.1271.64 m 你知道为什么会这样吗？ 我是否应该向附加的节点添加一些内容，以帮助浏览器不触发重新计算样式事件
PS:如果您想知道双重解析事件，可以参考WebKit中的
HTMLElement:：setInnerHTML（）replaceChildrenWithFragment（）if (hasOneTextChild(containerNode.get()) && hasOneTextChild(fragment.get())) {
toText(containerNode->firstChild())->setData(toText(fragment->firstChild())->data(), ec);
return;
}
ContainerNode:：appendChild（）DomainNodeInserted我同意这可能需要一些优化。事实上，它可以解释给出的简单示例。但是您可以尝试使用更复杂的HTML字符串，您仍然没有触发重新计算样式：
wrap.innerHTML=testsomething more complexingDocumentFragmentappendChild