2

JavaScriptがどのように解釈され実行されるかを学ぶ方法はありますか？たとえば、.NETやJAVAでは、生成されたバイトコードを確認できます。Cでは、生成されたアセンブリ命令を確認できますが、私が収集したものから、JavaScriptは行ごとに解釈され、ブラウザによってJSエンジンによって異なります。 。

JavaScriptがこれをどのように行うかを学ぶ方法はまだありますか？最近のブラウザのインタプリタは、コンパイラのように先を見越して最適化する傾向がありますか？

たとえば、私がした場合：

$('#div1').css('background-color','red');
$('#div1').css('color','white');

次のようにしてパフォーマンスを向上させることはできますか？

var x = $('#div1');
x.css('background-color','red');
x.css('color','white');

この質問のポイントは、JavaScriptがブラウザーでどのように実行されるかについての洞察を得る方法についての情報を取得することです。

4

3 に答える 3

2

実行される最適化手順は、いつものように、コンパイラーによって異なります。SpiderMonkeyはかなりよく文書化されたオープンソースであることを私は知っており、JITコンパイルも行っていると思います。ブラウザの外でそれをいじくり回すことができるので、実験するときに扱うブラックボックスが1つ少なくなります。コンパイルされたコードを実行中にダンプして、コードでどのように最適化されるかを確認する方法があるかどうかはわかりませんが、Javascriptの中間表現の標準的な概念がないため（.NET / Javaバイトコードの場合のように）、とにかくエンジンに固有です。

編集：さらに調査すると、SpiderMonkeyにバイトコードをダンプさせることができるようです。ただし、最適化は、バイトコードを生成するインタープリターとバイトコードを消費/コンパイル/実行するJITコンパイラーの両方で実行できるため、発生する可能性のある最適化を理解するまでの道のりは半分にすぎないことに注意してください（Javaおよび。 NETバイトコード）。

于 2012-12-11T23:29:59.790 に答える
1

V8は内部でいくつかの驚くべきことをします。マシンコードにコンパイルされ、オブジェクトの非表示クラスが作成されます。ここで驚異的な詳細：https ：//developers.google.com/v8/design

もちろん、DOMに関しては、ルックアップの実行はそれだけ速くなります。これが、特にループやアニメーション中に、連鎖変数または一時変数が違いを生む可能性がある理由です。

それに加えて、適切なセレクターを使用すると便利です。#idルックアップは間違いなく最速です。単純なタグ名またはクラスのルックアップもかなり高速です。：notのようなjQueryセレクターはビルトインにフォールバックできず、かなり遅くなります。

ルックアップを減らすことに加えて、DOMのもう1つの経験則は次のとおりです。多くのDOM操作を行う必要がある場合は、親ノードをいくつか取り出し、操作を行ってから再挿入します。これにより、リフロー/リペイントを大幅に節約できます。

于 2012-12-11T23:53:34.270 に答える
0

はい、パフォーマンスが向上します。DOMは2回照会されず、1つのjQueryオブジェクトのみがインスタンス化されます。

ただし、これはパフォーマンスのためではなく（ゲインはごくわずかです）、コード品質のために行う必要があります。また、変数は必要ありません。jQueryはチェーンをサポートしています。

$('#div1').css('background-color','red').css('color','white');

また、.cssメソッドはオブジェクトを取ることもできます。

$('#div1').css({'background-color': 'red', 'color': 'white'});
于 2012-12-11T23:49:55.673 に答える