フロントエンドのパフォーマンスの最適化とテクニック_JavaScript テクニック

はじめに フロントエンド エンジニアにとってパフォーマンスの最適化が非常に重要である理由

業界には、「パフォーマンスの最適化を理解し、JQuery ソースコードを研究した人々が書いたコードのパフォーマンス消費量は、それを聞いたことがあるかどうかはわかりませんが、それらの人々とは何百倍も異なります」という格言があります。 パフォーマンスの最適化を何千回も理解していない人は '、現在の JavaScript は ECMAscript3 から ECMAscript5 および ECMAscript6 への移行プロセスです。 JavaScript が完璧ではない場合に、不適切なコーディング方法によって引き起こされる問題は無視できません。

パフォーマンスの最適化

ここで、パフォーマンスの最適化に関する私の洞察をいくつか共有します。

1. スプライトマップ

最も基本的なことは 背景画像を可能な限りスプライト マップにする ことで画像リクエストを減らすため、一般的な Web エンジニアのもう 1 つの基本的な本能は、スプライトマップ。

2.css セレクターの最適化

CSS では、子孫セレクターをできるだけ使用するようにし、子孫セレクターの使用を減らします。子孫セレクターを使用すると、検索エンジンはすべての子孫要素を検索します。これにより、検索エンジンのパフォーマンスの消費が削減されます。

3.jsはスタイルを変更し、クラス名を直接操作します

js で要素のスタイルを操作する場合、style を使用してスタイルを直接追加しないでください。実際には、スタイルを追加するたびに、そのようなことは起こりません。ページは再描画されますが、再描画には注意が必要です。スタイルを操作する場合、クラス名を直接操作すると再描画が 1 回だけ発生しますが、スタイルを使用してスタイルを直接追加すると複数回の再描画が発生します。

4.js が dom ノードを直接操作

ノードを操作する場合は、要素の後にノードを追加するようにしてください。ノードの前に挿入すると、挿入したノードの後のノードがリフローします。後ろに挿入する場合は、挿入したノードをリフローするだけで済みます。ノードを一度。

再描画とリフローの概念を理解していない人もいるかもしれません

5. 通常のマッチングセレクター

css3 および jQuery の属性セレクターの一部は、通常のマッチングを使用します。もちろん、パフォーマンスの最適化を考慮しない場合は、これらのメソッドを使用する方が簡単です。通常の一致セレクターにより、検索エンジンはすべてのタグを検索するため、パフォーマンスに大きな影響を与えます

6.js要素取得の最適化

js で要素を取得する場合、通常は document.getElementsById を使用します。検索エンジンは、ウィンドウ内でドキュメントが見つかるまで Dom ツリーの一番下から検索し、その後検索に戻ります。要素を取得するときに document.body を保存するのが最善です。再度使用する場合は、この変数を取り出して使用するだけで検索エンジンのパフォーマンスを節約できます

7. メモリオーバーフロー

一般に、再帰を実行するとメモリ オーバーフローが発生し、操作の完了後にメモリがシステムによってリサイクルされるため、再帰を実行する際にはオブジェクトを使用する必要があります。値が存在する場合は値を保存します。存在しない場合は値が追加されます。これにより、再帰のパフォーマンスが向上します。

8. Ajax の GET リクエストを使用します

POST リクエストは、最初に HTTP リクエスト ヘッダーを送信してからデータを送信することで実装されます。GET にはリクエスト ヘッダーがありませんが、: GET のサイズ制限は約 4K ですが、POST には制限がないことに注意してください。

9. 画像の遅延読み込み

リクエスト量が多すぎると、ページが画像の位置までスクロールすると、画像が再度ロードされることがあります。

画像の遅延読み込み用のプラグインをお勧めします

jquery.lazyload.js

 a=a||b;

a && a.length&& a.length>=0

 if(document.all){
    document.onselectstart= function(){return false}; //for ie
  }else{
    document.onmousedown= function(){return false};
    document.onmouseup= function(){return true};
  }
  document.onselectstart = new Function('event.returnValue=false');

  obj=obj===undefined?Object:obj;