JSでよく使われる性能最適化方式

画像の最適化

多くの場合、多くの修飾画像が使用されますが、実際にはCSSで代用することができます.

図base 64フォーマット

を使用

複数のアイコンファイルを1枚の画像に統合する(雪碧図)

WebP形式を表示できるブラウザには、できるだけWebP形式を使用します.WebPフォーマットは、より良い画像データ圧縮アルゴリズムを有するため、より小さな画像体積をもたらすことができ、肉眼認識の差のない画像品質を有するため、互換性が悪い

という欠点がある.
しぼり
1つのシナリオを考慮すると、スクロールイベントではネットワークリクエストが開始されますが、スクロール中にユーザーがリクエストを開始するのではなく、時間を隔てて開始することを望んでいません.この場合、スロットルを使用できます.

// func            
// wait     
const throttle = (func, wait = 50) => {
  //            
  let lastTime = 0
  return function(...args) {
    //     
    let now = +new Date()
    //                  
    //                   
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}

setInterval(
  throttle(() => {
    console.log(1)
  }, 500),
  1
)

ブレ止め
1つのシナリオを考えると、1つのボタンをクリックするとネットワークリクエストがトリガーされますが、クリックするたびにネットワークリクエストが開始されることを望んでいません.ユーザーがボタンをクリックしてからしばらくしてから再度クリックしていない場合にネットワークリクエストを開始することを望んでいません.この場合、ジッタ防止を使用することができます.

// func            
// wait     
const debounce = (func, wait = 50) => {
  //        id
  let timer = 0
  //                      
  //                      
  //          ，           
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

プリレンダリング
ダウンロードしたファイルを事前にバックグラウンドでレンダリングするには、次のコードを使用します.

プリレンダリングは、ページのロード速度を向上させることができますが、ユーザーが後で開く可能性が高いことを確認します.そうしないと、リソースを無駄にしてレンダリングされます.
だらだらロード

怠け者ロードとは、重要でないリソースを遅延ロードすることです.

画像にとって、まず画像ラベルのsrc属性を1枚の占位図に設定し、実際の画像資源を1つのカスタム属性に入れ、カスタム領域に入ると、カスタム属性をsrc属性に置き換え、画像がリソースをダウンロードし、画像の怠惰なロードを実現する.
小結
これらの断片化されたパフォーマンス最適化ポイントは短いように見えますが、パフォーマンスの問題が発生した場合にパフォーマンスを簡単かつ効率的に向上させることができます.