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>

そして、テスト メソッドが実行されると、2 つの解析イベントが発生することがわかります。

double イベントの解析を示す Chrome タイムライン

Chrome バージョン 23.0.1271.64 m を使用しています

それは期待されているものですか？Chrome Developer Tools のバグですか? またはChromeの下で改善するものはありますか?

4

1 に答える 1

2

少し遊んだ後、これはChromeが文字列「test」を解析してからページを再解析する必要があるか、文字列が追加された後に「wrap」要素だけを解析する必要があることと関係があると思います。innerHTMLは、コンテンツを追加できるため、興味深い関数です。そのため、検証/解析を行う必要があります。

関数をこれに変更すると、次のようになります。

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

...その後、解析イベントはまったく発生しません。

于 2012-11-13T10:54:24.677 に答える