あなたの知らない高パフォーマンス 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 について知らなかったことがすべてわかりました!