高パフォーマンスの JavaScript について知っておくべきこと

JavaScript はフルスタック開発言語であり、ブラウザ、携帯電話、サーバーで使用できることは誰もが知っているはずです。この記事では、JS の基礎となる原則と実装原則についての全員の理解を深めるために、効率的な JavaScript のベスト プラクティスをいくつか紹介します。

データ ストレージ

コンピュータ サイエンスにおける古典的な問題は、データ ストレージの場所を変更することで最高の読み取りおよび書き込みパフォーマンスを得るというものです。JavaScript では、データ ストレージの場所が影響します。コードのパフォーマンスに大きな影響を与えます。 – {} を使用してオブジェクトを作成できる場合は、new Object を使用しないでください。[] を使用して配列を作成できる場合は、new Array を使用しないでください。 JSのリテラルはオブジェクトよりもアクセス速度が速いです。 – 変数がスコープ チェーン内で深くなるほど、アクセスに時間がかかります。この種の変数の場合、キャッシュを通じてローカル変数を使用して変数を保存すると、スコープ チェーンへのアクセス数を減らすことができます。ドット表記 (object.name) と演算子 (object[name]) の使用に大きな違いはありません。 Safari には違いがあります。ポイントは常に高速です。

ループ

JS の一般的なループには次の種類があります。

for(var i = 0; i < 10; i++) { // do something}  
for(var prop in object) { // for loop object}    
[1,2].forEach(function(value, index, array) { // 基于函数的循环})

最初のメソッドであることは間違いありません。ネイティブであり、パフォーマンスが優れています。消費量が最も少ないものは、最も高速でもあります。 for-in の 2 番目の方法は、反復ごとにより多くのオーバーヘッド (ローカル変数) を生成し、その速度は最初の方法の 1/7 にすぎません。3 番目の方法は、明らかにより便利なループ メソッドを提供しますが、速度は 1/8 しかありません。通常のサイクルの。したがって、プロジェクトの状況に応じて適切なリサイクル方法を選択できます。

イベント委任

ページ上の各 A タグにイベントを追加することを想像してください。各タグに onClick を追加しますか?同じイベント ハンドラーにバインドする必要がある要素がページ内に多数ある場合、この状況はパフォーマンスに影響を与える可能性があります。イベントのバインディングごとに、ページまたは実行時の負荷が増加します。リッチなフロントエンド アプリケーションの場合、バインディングが多すぎると、対話が頻繁に行われるページで多くのメモリが占​​有されます。シンプルでエレガントな方法は、イベントの委任です。これはイベントベースのワークフローです。レイヤーごとにキャプチャし、ターゲットに到達し、レイヤーごとにバブルします。イベントにはバブリングメカニズムがあるため、イベントを外側の層にバインドすることで、すべての子要素からのイベントを処理できます。

document.getElementById('content').onclick = function(e) { 
    e = e || window.event;    
    var target = e.target || e.srcElement;    //如果不是 A标签，我就退出   
    if(target.nodeNmae !=== 'A') { return }   //打印A的链接地址    
    console.log(target.href) }

再描画と再配置

ブラウザは HTMl、CSS、および JS をダウンロードした後、DOM ツリーとレンダリング ツリーの 2 つのツリーを生成します。 Dom の幅、高さ、色、位置など、Dom の幾何学的プロパティが変更されると、ブラウザは要素の幾何学的プロパティを再計算し、レンダリング ツリーを再構築する必要があります。このプロセスは再描画と再配置と呼ばれます。

bodystyle = document.body.style; 
bodystyle.color = red; 
bodystyle.height = 1000px; 
bodystyke.width = 100%;

上記のメソッドで 3 つの属性を変更すると、ブラウザは 3 回リフローして再描画します。場合によっては、この再配置を減らすことでブラウザのレンダリング パフォーマンスが向上することがあります。推奨される方法は次のとおりです。操作を 1 つだけ実行し、3 つの手順を完了します。

bodystyle = document.body.style; 
bodystyle.cssText 'color:red;height:1000px;width:100%';

JavaScript の読み込み

IE8、Firefox3.5、および Chrome2 ではすべて、JavaScript ファイルの必須ダウンロードが許可されています。したがって、3f1c4e4b6b16bbbd69b2ee476dc4f83a は他のタグのダウンロードをブロックしません。残念ながら、JS のダウンロード プロセスでは、画像などの他のリソースのダウンロードが引き続きブロックされます。最新のブラウザでは並列ダウンロードが可能になりパフォーマンスが向上しましたが、スクリプトのブロックには依然として問題があります。したがって、ページ全体のレンダリングへの影響を最小限に抑え、ユーザーに表示されないようにするために、すべての 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを 6c04bd5ca3fcae76e30b72ad730ca86d タグの下部に配置することをお勧めします。空白

JS ファイルの高パフォーマンスのデプロイメント

複数の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグがページのレンダリング速度に影響することは誰もが知っているので、難しいことではありません。 「ページのレンダリングに必要な時間を短縮する」を理解するには、「HTTP」は Web サイトの速度を向上させるための古典的なルールです。したがって、実稼働環境ですべての JS ファイルをマージすると、リクエストの数が減り、ページのレンダリングが高速化されます。 JS ファイルをマージするだけでなく、JS ファイルを圧縮することもできます。圧縮とは、ファイルの実行に関係のないファイルの部分を削除することを指します。除去されたコンテンツには空白文字やコメントが含まれます。通常、変更プロセスによりファイル サイズを半分に減らすことができます。ローカル変数の長さを短縮する圧縮ツールもいくつかあります。たとえば、次のとおりです。

var myName = "foo" + "bar";  
//压缩后变成  
var a = "foobar";

JS ファイルのキャッシュ

HTTP コンポーネントのキャッシュにより、Web サイトへの再アクセスのユーザー エクスペリエンスが大幅に向上します。 Web サーバーは、「Expires HTTP 応答ヘッダー」を使用して、リソースをキャッシュする期間をクライアントに伝えます。もちろん、キャッシュには独自の欠点があります。アプリケーションがアップグレードされるときは、ユーザーが最新の静的コンテンツをダウンロードするようにする必要があります。この問題は、静的リソースのファイル名を変更することで解決できます。運用環境では、ブラウザが jsapplication-20151123201212.js を参照していることがわかります。これにより、新しい JS ファイルがタイムスタンプとして保存され、キャッシュが更新されない問題が解決されます。

まとめ

もちろん、効率的な JS には改善できる点があるだけではなく、パフォーマンスの低下を軽減できれば、JavaScript を使用してより効率的に開発することができます。

推奨チュートリアル: 「JavaScript 基本チュートリアル」

以上が高パフォーマンスの JavaScript について知っておくべきことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。