Question

使用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 Timeline showing parsing double events

我使用的是Chrome版本23.0.1271.64 m

这是预期的吗？这是Chrome开发人员工具中的错误吗？或者Chrome下有什么需要改进的地方吗？

Answer 1

经过一段时间的游戏，我猜想这与Chrome需要解析字符串“test”，然后重新解析页面，或者可能只是在添加字符串后的“wrap”元素有关。 innerHTML是一个奇怪的函数，因为它允许添加任何内容，因此必须进行一些验证/解析。

如果你将功能更改为：

，这有点说明

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

...然后根本不会发生任何解析事件。

为什么点击设置innerHTML会在Chrome上触发两个解析事件？

1 个答案: