インラインのonloadを使用して画像srcを変更すると、このコード行があまりにも多くのCPUを取る理由を知るために興味があるだけあまりにも多くのCPUの使用率

Question

をとる（コンソールプロファイラで見られるような）

<img style="display:none;" src="media/logo.png" 
    onload="this.style.display='block';this.src='media/dynamic_logo.png'" /> 

私はonloadイベントやsrc属性のいずれかを削除しますあまりCPUを消費しません。そこに何が起こっているのか理解できませんでした。誰でもハイライトすることができます

Answer 1

画像を変更するsrcアトリビュートは画像データをリロードしますが、新しいsrcがオリジナルと同じであるかどうかは不思議ではありません。

この例では、これはループの種類を生成します。

は（ブラウザのJSコンソールを見て）プロセスを理解するために、このフィドルを参照してください。

https://jsfiddle.net/magikarp/d72ndk1e/

あなたはonload属性からthis.src [...]を削除した場合、コンソールは一つだけ「onloadイベントが呼び出されると、」要求されます。