パフォーマンスの最適化

パフォーマンスの最適化

不必要な DOM 操作を回避します

ブラウザーが DOM 要素を走査するのはコストがかかります。 DOM ツリー クエリを最適化する最も簡単な解決策は、要素が複数回出現するときにそれを変数に保存して、DOM ツリーへの複数回のクエリを回避することです。

// Recommended
var myList = "";
var myListHTML = document.getElementById("myList").innerHTML;

for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}

myListHTML = myList;

// Not recommended
for (var i = 0; i < 100; i++) {
  document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}

キャッシュ配列の長さ

ループは間違いなく JavaScript のパフォーマンスに非常に関連する部分です。配列の長さを保存すると、各ループの再計算を効果的に回避できます。

注: 最新のブラウザ エンジンはこのプロセスを自動的に最適化しますが、古いブラウザがまだ存在することを忘れないでください。

var arr = new Array(1000),
    len, i;
// Recommended - size is calculated only 1 time and then stored
for (i = 0, len = arr.length; i < len; i++) {

}

// Not recommended - size needs to be recalculated 1000 times
for (i = 0; i < arr.length; i++) {

}

サードパーティ コンテンツの非同期読み込み

YouTube 動画やいいね/ツイート ボタンなどのサードパーティ コンテンツの埋め込みが適切に機能することが保証できない場合は、ページ全体のブロックを避けるために、これらのコードを非同期で読み込むことを検討する必要があります。負荷。

(function() {    var script,
        scripts = document.getElementsByTagName('script')[0];    function load(url) {
      script = document.createElement('script');
      script.async = true;
      script.src = url;
      scripts.parentNode.insertBefore(script, scripts);
    }

    load('//apis.google.com/js/plusone.js');
    load('//platform.twitter.com/widgets.js');
    load('//s.widgetsite.com/widget.js');

}());

アニメーションの実装には jQuery を使用しないでください

1。slideUp/Down()、fadeIn/fadeOut() およびその他のメソッドの使用は禁止されています。