序文パフォーマンスを最適化することがフロントエンドエンジニアにとって非常に重要な理由
業界には、「パフォーマンスの最適化を知っており、パフォーマンスの最適化なしで書かれたjQueryソースコードとコードを研究した人が、パフォーマンス消費量が数百倍または数千回も違いがある」と聞いたことがないかどうかはわかりません。今日のJavaScriptは、ECMAScript3からECMAScript5およびECMAScript6までの移行プロセスです。 JavaScriptが十分に記述されていない場合、コードメソッドは適切に記述されておらず、引き起こされた問題は無視できません。
パフォーマンスの最適化
以下では、パフォーマンスの最適化に関する私の洞察のいくつかをあなたと共有します。
1。エルフの写真
最も基本的なことは、写真のリクエストを減らすために可能な限りエルフに背景画像を作成することです。そのため、一般的なWebエンジニアのもう1つの基本的な本能は、エルフを作ることです。
2.CSSセレクターの最適化
CSSでは、子セレクターを使用して、より少ない子孫セレクターを使用してください。子孫セレクターを使用する場合、検索エンジンはすべての子孫要素を検索します。チャイルドセレクターを使用すると、検索範囲を絞り込んで、検索エンジンのパフォーマンス消費を削減できます。
3.JSスタイルを変更し、クラス名を直接操作します
JS要素スタイルを操作する場合、スタイルを直接追加するスタイルを使用しないでください。一般に、属性が少なくなり、パフォーマンスが影響を受けません。実際、そうではありません。スタイルが追加されるたびに、ページは1回再描画されます。注意を払うには塗り直しが必要です。操作スタイルの場合、クラス名を直接操作すると、1回の再描画が発生します。スタイルをスタイルで直接追加すると、複数の再描画が生じます。
4.JSはDOMノードを直接操作します
ノードを操作するときは、要素の背後にノードを追加してみてください。ノードの前に挿入すると、挿入されたノードの後のすべてのノードがリフローを引き起こします。背面に挿入すると、挿入されたノードのみを一度反射する必要があります。
一部の人々は、再描画とリフローの概念を理解していないかもしれません
5。レギュラーマッチセレクター
CSS3とjQueryでは、これらのセレクターの一部は通常の方法を使用して一致しており、それらを使用しないようにします。もちろん、パフォーマンスの最適化が考慮されない場合、これらの方法は比較的使いやすいです。通常のマッチングセレクターは、検索エンジンがすべてのタグを検索し、パフォーマンスに大きく影響します
6.JSは要素の最適化を取得します
JSで要素を取得する場合、document.getElementsByIDを使用するのは正常です。検索エンジンは、ウィンドウでドキュメントを検索してから再度検索するまで、DOMツリーの下部から検索します。したがって、要素を取得するときにdocument.bodyを保存することが最善です。それらをもう一度使用するときは、この変数を使用して使用してください。これにより、検索エンジンのパフォーマンスを節約できます
7。メモリオーバーフロー
一般に、再帰的に実行すると、メモリオーバーフローが発生し、再帰的に実行する際のパフォーマンスが大幅に低下します。実行後、メモリはシステムによってリサイクルされます。したがって、再帰的に実行するときは、オブジェクトを使用して値を保存し、再帰操作を検出し、直接返品し、存在しない場合は追加する必要があります。これにより、再帰の素晴らしいパフォーマンスを解決できます。
8。AjaxのGet Requestsを使用します
最初にHTTPリクエストヘッダーを送信してからデータを送信することにより、投稿リクエストが達成されます。 GETにはリクエストヘッダーがありませんが、GETサイズの制限は約4Kであり、POSTには制限がないことに注意する必要があります。
9.写真の読み込みを遅らせます
ページがリクエストを開始すると、リクエストの数が大きすぎるため、写真を読み込むのが面倒です。ページが写真の場所にスクロールすると、画像がロードされます。
これは、写真の怠zyなロード用のプラグインです
jquery.lazyload.js
10。画像SRC属性が空であることを避けてください
空の文字列であるSRC属性を持つ画像は一般的であり、主に2つの形式で表示されます。
<img src =” ">
var img = new image（）; img.src = "";
どちらのフォームも同じ問題を引き起こします。ブラウザはサーバーに別の要求を送信します。
スキル
1。排他的な思考
最初に現在のすべてのものを除外してから、次の操作を実行します。一般に、アニメーションを実行したり、スタイルを追加したりするときは、最初にセカンダリ操作中に以前のスタイルを明確にし、次に新しいスタイルを追加して、同時にアニメーションの競合を避けます。
2。短絡操作（||）
一般に、値を存在するかどうかを判断する必要がある場合、ステートメントの場合は使用しないようにしてください。短絡演算子を使用して、コードが占有しているメモリを保存できます。例えば：
a = a || b;
Aが存在する場合は、aを使用します。 aが存在しない場合は、bを使用します。
3。操作（&&）
オブジェクトが配列であるかどうかを決定するときなど、条件が一致するときに使用できます。
a && a.length && a.length> = 0
4。擬似アレイとアレイ
非アレイ要素をカプセル化してアレイに変える必要がある場合、最も簡単な方法は[]を追加することです。擬似アレイである必要がある場合は、長さの属性を設定できます。
5。スロットルバルブ
一般的にアニメーションで使用され、値を設定し、最初にtrueに設定し、その値を決定し、アニメーションを入力するときにこの値をFalseに割り当て、コールバック関数を使用してアニメーションの最後にtrueに再割り当てします。
6.テキストのパッシブ選択ステータスのロックを解除する（純粋なドライグッズ）
いくつかのボタンをクリックすると、テキストが選択されることがあり、顧客がバグのように見えるようになります。以下は、この状態を削除して貼り付けるためのコードです。
if（document.all）{document.onselectstart = function（）{return false}; // ie} else {document.onmousedown = function（）{return false}; document.onmouseup = function（）{return true}; } document.onselectStart = new Function（ 'event.ReturnValue = false'）;7.三元演算子を巧みに使用します
値が存在するかどうかを判断する必要がある場合は、三元演算子を使用してコードをより最適化することもできます。例えば
obj = obj === undefined？object：obj;
補充：
上記は、フロントエンドの最適化と、私が職場で要約したいくつかのヒントです。良い最適化とテクニックがある場合は、もっとコメントできることを願っています。私は個人的には、テクノロジーにはより良い進歩を遂げるためにより多くのコミュニケーションが必要だと思います。