あなたの知らない高パフォーマンス JAVASCRIPT_JavaScript のヒント-jsチュートリアル-php.cn

この記事では、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 ファイルをダウンロードできます。したがって、

人気のチュートリアル

詳細>