あなたの知らない高パフォーマンス 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 ファイルをダウンロードできます。したがって、