フロントエンドのパフォーマンスの最適化とテクニック_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

   10.避免图片src属性为空

    src 属性是空字符串的图片很常见，主要以两种形式出现：

    faaef668bdb1b9b810405a93368fe402

    var img = new Image();img.src = “”;

    这两种形式都会引起相同的问题：浏览器会向服务器发送另一个请求。

    技巧
        1.排他思想

    先排除当前所有的，再进行下一次操作；一般在进行动画、添加样式等时,在二次操作时先清楚前面的样式再从新添加新的样式，避免同时进行动画的冲突。

        2.短路运算（||）

    一般在一个值需要判断是否存在时，尽量不要使用if语句,可以使用短路运算符，可以省去代码占用的内存。比如：

 a=a||b;

a存在则使用a，a不存在则使用b。

        3.运算（&&）

    可以运用在条件匹配时，以便条件的多余查询，比如判断一个对象是否为数组时，

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

        4.伪数组以及数组

        当需要封装一个非数组元素变为一个数组时，最简单的办法就是给其添加一个[],如果需要是一个伪数组时，可以给其设置一个length属性。

        5.节流阀

    一般运用在动画中，设定一个值，开始时设置为true，判断其值，在进入动画时给这个值赋值为false，在动画结束时使用回调函数再重新赋值为true。

        6.解除文本的被动选中状态（纯干货）

    当在点击一些按钮时，有时会出现文本被选中的情况，让客户看见就犹如bug一般，以下是解除这一状态的代码，粘贴即可。

 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');

        7.巧妙使用三元运算符

        当需要判断一个值是否存在，也可以使用三元运算符使代码更加优化。比如

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

        补充：

        上述是自己在工作中，总结的前端优化以及一些技巧与大家分享，如果大家有什么好的优化以及技巧希望可以多多评论，个人认为技术是需要多沟通才可以更好的进步。