詳細に飛び込む前に、最初にこの質問をよりマクロの観点から理解しましょう。高性能JavaScriptとは何ですか？
キーポイント
まず、明確にする必要があります。デスクトップでのみテストする場合、ユーザーの50％以上を除外します。
この傾向は、主に100ドル以下のAndroidデバイスを介してインターネットにアクセスする新しい市場ユーザーにのみ進化し続けます。インターネットにアクセスするためのメインデバイスとしてのデスクトップの時代が終了し、10億人のインターネットユーザーの次のバッチは、主にモバイルデバイスを介してウェブサイトにアクセスします。
実際のモバイルデバイスでテストしている場合でも、
であっても、新しい$ 600のフラッグシップ電話でテストしている可能性があります。問題は、これがユーザーが持っているデバイスではないことです。中央値デバイスは、1GB未満のメモリ、非常に弱いCPUおよびGPUを備えたデバイスであるMoto G1に似ています。
平均JSパッケージを解析するときのパフォーマンスを見てみましょう。 ああいいえ。この画像は、全体的なパフォーマンスではなく、JSの解析時間とコンピレーション時間のみをカバーしますが、全体的なパフォーマンスと密接に関連しており、JSパフォーマンス全体のメトリックとして使用できます。 ブルース・ローソンの引用：「これは裕福な西部のウェブではなく、ワールドワイドウェブです。」したがって、Webパフォーマンスの目標は、MacBookやiPhoneの約25倍遅いデバイスです。これについて慎重に考えてください。しかし、それはさらに悪いことです。私たちの実際の目標が何であるか見てみましょう。 高性能JSコードとは何ですか？ ターゲットプラットフォームがわかったので、次の質問に答えることができます。
高性能コードを定義する絶対分類はありませんが、参照として使用できるユーザー中心のパフォーマンスモデルがあります：レールモデル。
アニメーション（アニメーション） アイドルワーク（アイドル作業） load（load）
インジケータを知っているので、いくつかの統計を見てみましょう： デスクトップ（ケーブルを使用）で対話するには8秒かかり、モバイルデバイス（3G経由のMoto G4）に16秒かかります。 コンテキストは非常に重要です
メインのボトルネックは、ウェブサイトを読み込むのにかかる時間であることに気づいたかもしれません。具体的には、JavaScriptのダウンロード、解析、コンパイル、実行時間です。 JavaScriptコードを減らしてよりインテリジェントにロードする以外に、他に何もすることはありません。
分析、編集、実行
基本的に、ほとんどの非ハイパフォーマンスJSの問題は、実行中のコード自体ではなく、コードの実行を開始する前に実行する必要があるすべての手順です。
code notプログラム
Addy Osmani：JSの解析と評価の平均時間。 
応答（応答）アプリが100ミリ秒以内にユーザーアクションに応答した場合、ユーザーは応答を即座に考慮します。これは、クリック可能な要素で動作しますが、スクロールまたはドラッグでは機能しません。
60Hzのディスプレイでは、アニメーションとスクロール中に1秒あたり60フレームの一定のフレームレートを達成したいと考えています。これは、フレームあたり約16ミリ秒があることを意味します。この16ミリ秒の予算では、実際にはすべての作業を行うために8〜10ミリ秒しかありません。残りの時間は、ブラウザの内部メカニズムやその他の違いによって取り上げられます。
高価で継続的に実行されているタスクがある場合は、メインスレッドがユーザー入力に応答できるように、それを小さなチャンクに分割してください。ユーザーの入力を50ミリ秒以上遅らせるタスクを持たないでください。
ページの読み込み時間を1000ミリ秒未満に制御する必要があります。この時間の後、ユーザーは焦りを感じ始めます。これは、画面に描画してスクロール可能であるだけでなく、ページがインタラクティブであることのかなり難しい目標です。実際、時間は短いです：
デフォルトによる高速：モダンロードベストプラクティス（2017 Chrome Dev Summit）
実際、目標は相互作用時間の5秒です。これは、ChromeがLighthouse監査で使用するメトリックです。
中央値の場合、開発者は410kbのGZIP圧縮JSコードをページに提供しました。
について話していることを意味します。これは、すべてのOSレベルの抽象化を除いて、ハードウェアでネイティブに実行されることを意味します準備なし。
最初にコードを解析する必要があります。つまり、コンピレーションのためにコンピューターによってインデックス作成できる構造に読み取られて変換されます。次に、デバイス/ブラウザで実行する前に、ByteCodeにコンパイルし、最終的にマシンコードにコンパイルします。
言及するもう1つの非常に重要なことは、JavaScriptがシングルスレッドで、ブラウザのメインスレッドで実行されることです。これは、一度に1つのプロセスのみを実行できることを意味します。 devtoolsパフォーマンスのタイムラインが、CPUの100％を稼働させ続ける黄色のピークでいっぱいの場合、長い/ドロップフレーム、st音、その他の迷惑なものに遭遇します。
ポール・ルイス：すべてが重要なとき、何も重要ではありません！ 。
それで、JSが機能し始める前に、これをすべて行う必要があります。 ChromeのV8エンジンでは、JSの総実行時間の最大50％を解析およびコンパイルします。
このセクションから覚えておくべき2つのこと：
必ずしも線形ではありませんが、JS解析時間はパケットサイズに比例します。 JSコードの量が小さいほど良いです。
CSS遷移、合成特性、およびRequestAnimationFrame（）を使用する場合でも、メインスレッドでJSでまだ実行されています。彼らは基本的に、16ミリ秒ごとにインラインスタイルであなたのDOMを叩くだけです。アニメーションをスムーズに保つには、すべてのJSがフレームあたり8ミリ秒以内に実行できることを確認する必要があります。
一方、アニメーションとトランジションは、メインスレッドの外側で実行されます。効率的に実装されていれば、リレーアウト/塗り直しを行わずにGPUで実行します。ロードまたはユーザーの相互作用中にほとんどのアニメーションが実行されることを考慮すると、これにより、Webアプリケーションに非常に必要な呼吸スペースが提供されます。
Web Animations APIは、メインスレッド以外で高性能のJSアニメーションを実行できるようにする今後の機能セットですが、現時点ではCSS遷移やフリップなどのテクノロジーに固執しています。
バックサイズは非常に重要です
今、それはすべて梱包に関するものです。 bowerと最後に
マークの前にマークの時代が過ぎる前に多数のマークがありました。
NPMで見つけた光沢のある新しいおもちゃをインストールし、データプランを制限しながらユーザーのブラウザーに遅れていることを引き起こします。
JSコードの量を減らすようにしてください。あなたのプロジェクトは、Lodashライブラリ全体を必要としない場合があります。 JSフレームワークを絶対に使用する必要がありますか？もしそうなら、ReactまたはHyperHTMLなど、反応以外の他のフレームワークを使用することを検討しましたか？トップアニメーションへのスクロールを実装するには、TweenMaxが必要ですか？ NPMとフレームワークでコンポーネントを分離する利便性は、欠点をもたらします。開発者が問題を解決する最初の方法は、JavaScriptコードを追加することになります。あなたがハンマーしか持っていないとき、すべては爪のように見えます。 剪定雑草を終えてJSコードの量を減らした後、それをより
より賢く配信してみてください。必要に応じて必要なものを配信します。Webpack 3には、コードセグメンテーションと動的インポートと呼ばれる驚くべき
機能があります。すべてのJSモジュールを単一のApp.jsパッケージにバンド化する代わりに、Import（）構文を使用してコードを自動的に分割し、非同期にロードできます。また、フレームワーク、コンポーネント、クライアントルーティングを使用して利点を得る必要はありません。 .mega-widgetをサポートする複雑なコードがあり、任意の数のページに配置できるとします。メインJSファイルに次のことを記述する必要があります：
アプリがページにウィジェットを見つけた場合、必要な補助コードを動的にロードします。それ以外の場合、すべてが正常です。
さらに、Webpackは機能するために独自のランタイムを必要とし、生成するすべての.jsファイルに注入します。 CommonChunksプラグインを使用する場合、次の方法を使用してランタイムを独自のブロックに抽出できます。
if (document.querySelector('.mega-widget')) {
import('./mega-widget');
}他のすべてのブロックからランタイムを独自のファイル（この場合はruntime.jsと呼ばれる）にストリップします。メインJSパッケージの前にロードされていることを確認してください。たとえば、
それから、コードとポリフィルを翻訳するトピックがあります。 Modern（ES6）JavaScriptを書いている場合、Babelを使用してES5互換コードに翻訳する可能性があります。翻訳は、すべての冗長性のためにファイルサイズを増加させるだけでなく、複雑さも増し、しばしばネイティブES6コードと比較してパフォーマンスを低下させます。
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime',
}),重要なのは、JSパッケージに100キロバイト近くのデータを追加することです。これは、ファイルサイズが大きいだけでなく、古いブラウザーをサポートすることを目指して、解析と実行コストが大きいことです。
<🎜> <🎜>
a非効率的で効果的な方法は、以下をインラインスクリプトに入れることです。
ブラウザが非同期関数を評価できない場合、それは古いブラウザであると仮定し、ポリフィルを含むパッケージを配信するだけです。それ以外の場合、ユーザーはシンプルでモダンなバージョンを取得します。
if (document.querySelector('.mega-widget')) {
import('./mega-widget');
}この記事から、JavaScriptが多くのパフォーマンスを消費し、注意して使用する必要があることを願っています。
ローエンドデバイスと実際のネットワーク環境でWebサイトのパフォーマンスをテストしてください。あなたのウェブサイトは迅速にロードし、できるだけ早く対話する必要があります。これは、JSコードの量を減らし、できるだけ早くロードを高速化することを意味します。コードは常に圧縮され、パッケージを管理しやすく、可能な場合は非同期にロードしやすくなります。サーバー側では、HTTP/2がより高速な並列転送のために有効になっていることを確認し、GZIP/Brotli圧縮を使用してJS転送サイズを大幅に削減します。
これについて言えば、私は次のツイートでそれを終了したいと思います：
これを達成するために多大な努力をする必要があります。しかし、真剣に、友人たちは、あなたのフレームワークを放棄し、ブラウザがどれだけ速くなるかを見る時です。
- アレックスラッセル（@slightlylate）2016年9月15日JavaScriptパフォーマンスの最適化に関する
FAQ どのような一般的なJavaScriptパフォーマンストラップを避けるべきですか？
JavaScriptのパフォーマンスの問題は、多くの場合、非効率的なコーディングプラクティスに起因します。これらには、過剰なDOM操作、メモリリーク、および不必要な計算が含まれる場合があります。これらの問題を回避するには、JavaScriptがどのように機能するかを理解し、効率的なコーディングプラクティスを使用することが重要です。たとえば、グローバル変数の使用を制限し、イベントデリゲートを使用してイベントを効率的に処理し、パフォーマンスの問題を引き起こす可能性があるため（）withおよびeval（）を使用しないようにします。
JavaScriptループを最適化してパフォーマンスを向上させる方法は？ループはJavaScriptの一般的な機能ですが、正しく最適化されていない場合、パフォーマンスの問題の原因にもなります。ループを最適化する1つの方法は、ループ内で行われた作業を最小化することです。たとえば、各反復の配列の長さを計算する代わりに、ループが開始される前に1回計算します。別の方法は、ニーズに応じて最も効率的なループを使用することです。たとえば、foreach（）メソッドは、従来のループよりも遅い場合があります。
JavaScriptの強化はパフォーマンスにどのような影響を与えますか？
標高は、コンパイルフェーズ中に変数と関数宣言が含まれるスコープの上部に移動されるJavaScriptのメカニズムです。正しく理解されていない場合、これは予期しない動作や潜在的なパフォーマンスの問題につながる可能性があります。たとえば、大量のデータが提起されているがすぐに使用されない場合、プロモーションは不必要なメモリの使用につながる可能性があります。 VARの代わりに標高を理解し、LETとconstを使用することは、これらの問題を軽減するのに役立ちます。
JavaScriptのメモリリークを防ぐ方法は？
必要なメモリがリリースされなくなった場合、メモリリークが発生し、時間の経過とともにパフォーマンスが低下します。 JavaScriptのメモリリークの一般的な原因には、忘れられたタイマーまたはコールバック、個別のDOM要素、およびグローバル変数が含まれます。メモリリークを防ぐには、間隔とタイムアウトをクリアし、不要になったらイベントリスナーを削除し、可能な場合はグローバル変数を避けてください。
JavaScriptの組み込みパフォーマンスツールを使用してコードを最適化する方法は？
JavaScriptは、パフォーマンス分析と最適化のためのさまざまな組み込みツールを提供します。パフォーマンスAPIを使用すると、コードのさまざまな部分に費やされた時間を測定し、ボトルネックを識別することができます。メモリAPIは、メモリの使用量を追跡し、潜在的な漏れを特定するのに役立ちます。さらに、ブラウザ開発者ツールは、多くの場合、コードを最適化するのに役立つパフォーマンス分析機能を提供します。
JavaScriptの非同期プログラミングはパフォーマンスにどのように影響しますか？
非同期プログラミングにより、JavaScriptは非ブロッキング操作を実行し、非同期操作が完了するのを待っている間に他のコードを実行できるようにすることでパフォーマンスを向上させることができます。ただし、非同期プログラミングの誤った使用は、パフォーマンスの問題につながる可能性があります。たとえば、あまりにも多くの約束やコールバックを使用すると、「コールバックヘル」やパフォーマンスの劣化につながる可能性があります。 Async/await、Promise、およびCallbacksを正しく使用する方法を学ぶことは、非同期コードを最適化するのに役立ちます。
モバイルデバイスのJavaScriptを最適化する方法は？
モバイルデバイスのJavaScriptを最適化するには、制限されたCPU機能やネットワーク遅延などの要因を考慮する必要があります。モバイル最適化の手法には、ネットワークを介して送信されるJavaScriptコードの量を最小化すること、CPUの使用量を削減するための効率的なコーディングプラクティスを使用し、低電力デバイスでもウェブサイトが適切に機能するようにプログレッシブエンハンスメントを使用することが含まれます。
JavaScriptの圧縮と圧縮はパフォーマンスをどのように改善しますか？
圧縮と圧縮JavaScriptファイルのサイズを縮小し、ダウンロードを高速化し、パフォーマンスを向上させます。圧縮には、スペースやコメントなどの不要な文字を削除することが含まれますが、圧縮にはより効率的な形式でデータをエンコードすることが含まれます。両方のテクノロジーは、特にネットワークが遅いユーザーにとって、ウェブサイトの読み込み速度を大幅に改善できます。
JavaScriptのRequestAnimationFrameを使用してパフォーマンスを最適化する方法は？
RequestAnimationFrameメソッドを使用すると、ブラウザの次の塗り直しの前にアニメーション関数を呼び出すことができ、スムーズなアニメーションが作成されます。これにより、SetIntervalまたはSettimeOutを使用するよりも効率的なアニメーションにつながる可能性があります。これにより、ブラウザは現在のデバイスとロード条件に基づいてアニメーションを最適化できるためです。
JavaScriptでWebワーカーを使用してパフォーマンスを最適化する方法は？
Webワーカーを使用すると、メインスレッドをブロックすることなく、バックグラウンドの個別のスレッドでJavaScriptを実行できます。これは、ユーザーインターフェイスを遅くすることなく、計算集約型タスクを実行するのに役立ちます。ただし、Webワーカーには、新しいワーカースレッドを開始するオーバーヘッドやDOMを直接操作する能力など、いくつかの制限とコストがあるため、注意して使用する必要があります。
以上がJavaScriptパフォーマンス最適化のヒント：概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
