4

Douglas Crockford によるJavaScript の The Good Parts で述べられているように、文字列を に渡しsetTimeoutたり、setInterval呼び出しeval()たりすることは避ける必要があります。

setTimeout('console.log("this uses eval()");', 100);

それを念頭に置いて、次のようにインライン イベント ハンドラーを使用すると、同じことが起こりますか?:

<button onclick="console.log('click!');">Click Me</button>

つまり、インライン イベント ハンドラーを使用すると、イベントが発生したときに追加の解析オーバーヘッドが発生するか、それとも最初のドキュメントの読み込み中に他のすべて (インライン スクリプト ブロック、ヘッダー内のスクリプトなど) を使用して解析が行われますか?

4

1 に答える 1

4

はい、比喩的に言えば、そうです。ページ内のすべてのJavaScript は、 に渡されるコードとまったく同じ方法で解析されますeval()。追加の解析eval()が必要なため、通常のコードよりも遅いため、避ける必要があります。

少なくとも適切な開発者ツールを備えたブラウザーの場合、ブラウザーが既にハンドラーをコンパイルまたは再解析しているかどうかを確認できます (コード例では jQuery を使用していますが、もちろんプレーンな JS で書き直すこともできます)。

<div id="test" onclick="alert('tested')">Click</div>
<script>
console.log(typeof $('#test')[0].onclick);
console.log($('#test')[0].onclick);
</script>

私の Chrome テストでは、次のログが記録されます。

Type of handler: function
function onclick(event) {
  alert('click')
}

onclickプロパティがコンパイルされたfunction値であることは明らかです。また、ハンドラー用に追加で生成されたコード、つまりインライン コードにラップされた関数も確認できます。evalハンドラーにブレークポイントを設定し、スタック トレースを観察して、どこにも呼び出しがないことを確認することもできます。

于 2012-09-16T21:07:14.763 に答える