为什么在Chrome浏览器中设置innerHTML后会触发两个解析事件？

Question

为什么在Chrome浏览器中设置innerHTML后会触发两个解析事件？

javascripthtmlgoogle-chromegoogle-chrome-devtools

8

使用Chrome开发者工具中的时间轴，在通过innerHTML记录事件时，我使用了以下小段代码：

<!DOCTYPE html>

<html>
<head>
  <script>
    function test(){
      var wrap = document.getElementById('wrapper');
      wrap.innerHTML = "test";
    }
  </script>
</head>

<body>
  <input type="button" value="click" onClick="test();"/>
  <div id="wrapper"></div>
</body>
</html>

我可以看到，在运行测试方法后，有两个解析事件被触发：

Chrome时间轴显示解析双重事件

我正在使用Chrome Version 23.0.1271.64 m。

这是否是预期的结果？这是否是Chrome开发者工具中的一个bug？还是在Chrome下有需要改进的地方？

- JBE

可能是为什么在Chrome上appendChild触发Recalculate Style而设置innerHTML不触发的重复问题？ - Frank van Puffelen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adhocgeek · Accepted Answer

经过一些试验，我猜测这可能与Chrome需要解析字符串"test"，然后重新解析页面或仅解析添加了该字符串之后的"wrap"元素有关。innerHTML是一个奇特的函数，因为它允许添加任何内容，所以必须进行一些验证/解析。

如果你将自己的函数改为如下形式，则有点透露了一些信息：

function test() {
    var wrap = document.getElementById('wrapper');
    var newtext = document.createTextNode("test");
    wrap.appendChild(newtext);
}

如果没有解析事件发生，那么就根本不会发生任何解析操作。