このページは Cloud Translation API によって翻訳されました。

JavaScript の実行を最適化する

JavaScript は多くの場合、視覚的な変化を引き起こすことがあります。これはスタイル操作を通じて直接行われることもあれば、データの検索や並べ替えなど、計算によって視覚的な変化が生じることもあります。タイミングの悪い JavaScript や長時間実行される JavaScript は、パフォーマンスの問題の一般的な原因です。可能であれば、その影響を最小限に抑える必要があります。

Paul Lewis

JavaScript は多くの場合、視覚的な変化を引き起こすことがあります。場合によっては場合によっては計算によってデータの検索や並べ替えなど、視覚的な変化が生じます。タイミングが悪い長時間実行されている JavaScript は、パフォーマンスの問題の一般的な原因です。可能であれば、その影響を最小限に抑える必要があります。

JavaScript のパフォーマンスプロファイリングは優れた技術です。なぜなら、作成する JavaScript は実際に実行されるコードとは違います。最近のブラウザでは JIT コンパイラが使用されるなど最速の実施を実現するための最適化とコツを多数紹介していますコードのダイナミクスを大幅に変えます。

とはいえ、アプリを実行するために必ずできることもいくつかあります。よくあります。

概要

視覚的な更新では setTimeout または setInterval を避ける常に requestAnimationFrame を使用してください。
長時間実行される JavaScript をメインスレッドからウェブワーカーに移動する。
マイクロタスクを使用して、複数のフレームにわたって DOM 変更を行います。
Chrome DevTools のタイムラインと JavaScript プロファイラを使用して、JavaScript の影響を評価します。

視覚的な変更に `requestAnimationFrame` を使用する

画面上の視覚的な変化が発生した場合は、適切なタイミングでフレームの最初に表示されます。Cloud Logging で JavaScript が確実に requestAnimationFrame を使用する方法です。

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

フレームワークまたはサンプルでは、setTimeout または setInterval を使用して、アニメーションなどの視覚的な変更を行うことができます。問題は、コールバックがフレーム内のどこかのポイント（おそらくは正しい位置）でそれによってフレームを見逃し、ジャンクが発生することがよくあります。

実際、jQuery は animate の動作に setTimeout を使用していました。次のように変更されました: requestAnimationFrame（バージョン 3 の場合）。古いバージョンの jQuery を使用している場合は、 requestAnimationFrame を使用するようにパッチを適用します。その方法を強くおすすめします

複雑さを軽減するか、ウェブワーカーを使用する

JavaScript は、ブラウザのメインスレッド、スタイル計算、レイアウト、その他のスレッドの多くのケース、ペイント。JavaScript が長時間実行されると、他のタスクもブロックされますが、フレームが欠落する可能性があります

JavaScript をいつ、どのくらい長く実行するかについては、慎重に検討する必要があります。たとえば、通常は、スクロールなどのアニメーションを 3 ～ 4 ミリ秒の領域です。それより長くなると、多くの時間を費やすリスクがあります。アイドル状態の場合かかる時間については、よりリラックスした方がよいでしょう。

多くの場合、純粋な計算作業は Google Cloud のウェブワーカー、たとえば DOM へのアクセスが不要な場合などです。データの操作または走査多くの場合、読み込みやモデルの生成と同様に、並べ替えや検索といった機能がこのモデルに適しています。

var dataSortWorker = new Worker("sort-worker.js");
dataSortWorker.postMesssage(dataToSort);

// The main thread is now free to continue working on other things...

dataSortWorker.addEventListener('message', function(evt) {
    var sortedData = evt.data;
    // Update data on screen...
});

すべての作業がこのモデルに適合するわけではありません。ウェブワーカーには DOM へのアクセス権がありません。処理をメインスレッドで行う必要がある場合は、バッチアプローチを検討してください。その場合は、大きなタスクをマイクロタスクに分割します。各タスクにかかる時間は数ミリ秒以内で、各フレームの requestAnimationFrame ハンドラ内で実行されます。

このアプローチはユーザーエクスペリエンスと UI に悪影響を及ぼします。そのため、進行状況またはアクティビティインジケーターを使用して、タスクが処理中であることを示します。いずれにせよ、このアプローチではアプリのメインスレッドが解放されたままになるため、向上します

JavaScript の「フレーム税」を理解する

フレームワーク、ライブラリ、独自のコードを評価する際は、 JavaScript コードをフレーム単位で実行するのにどれだけの費用がかかっているかを示すものです。これは、パフォーマンスが重視されるアニメーション作業を行う場合に特に重要です画面移動やスクロールで操作できます

Chrome DevTools の [Performance] パネルは、 JavaScript の費用。通常、次のような低レベルのレコードを取得します。

[Main] セクションには、JavaScript 呼び出しのフレームチャートが表示されるため、呼び出された関数と各関数にかかった時間を正確に分析できます。

この情報を基にしてアプリケーションの JavaScript をデプロイして、関数の実行に時間がかかりすぎています先ほど説明したように、実行時間の長い JavaScript を削除するか、それができない場合は、ウェブワーカーに送信し、メインスレッドを解放して他のタスクを続行します。

使用方法については、ランタイムパフォーマンスの分析を開始するをご覧ください。 [パフォーマンス] パネルを開きます。

JavaScript のマイクロ最適化を避ける

あるバージョンのものが、また、要素の offsetTop をリクエストする方が、コンピューティング時間よりも getBoundingClientRect() ですが、ほとんどの場合、次のような関数のみを呼び出す 1 フレームあたり数回しか実行されないため、この部分に労力を割くのは JavaScript のパフォーマンス。通常は、わずか数ミリ秒しか節約できません。

ゲームや計算コストが高いアプリケーションを制作している場合は、例外といえるでしょう。多くの計算を 1 つのフレームに収めるのが一般的であるため、このガイダンスに沿って進めてください。問題はありません

要するに、マイクロ最適化は通常、コンバージョンに結びつかないので、細心の注意を払ってください。注目してください。