问题
Using the Timeline in the Chrome Developer Tools, I used this small piece of code to record events through 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>
And I can see that there are two parsing events fired once the test method is run :
I am using Chrome Version 23.0.1271.64 m
Is it something expected ? Is it a bug from the Chrome Developer Tools ? or is there something to improve under Chrome ?
回答1:
After a bit of playing around I would guess that this has something to do with Chrome needing to parse the string "test" and then re-parse the page, or possibly just the "wrap" element after the string has been added. innerHTML is a curious function because it allows the addition of any content whatsoever, so some validation/parsing has to occur.
It is somewhat telling that if you change your function to this :
function test() {
var wrap = document.getElementById('wrapper');
var newtext = document.createTextNode("test");
wrap.appendChild(newtext);
}
...then no parse events occur at all.
来源：https://stackoverflow.com/questions/13335999/why-does-a-click-setting-innerhtml-trigger-two-parsing-events-on-chrome