Pengoptimuman prestasi

Pengoptimuman Prestasi

Elakkan operasi DOM yang tidak perlu

Memang mahal untuk penyemak imbas melintasi elemen DOM. Penyelesaian paling mudah untuk mengoptimumkan pertanyaan pepohon DOM ialah menyimpannya dalam pembolehubah apabila elemen muncul beberapa kali untuk mengelakkan pertanyaan pepohon DOM beberapa kali.

// 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>";
}

Panjang tatasusunan cache

Gelung sudah pasti merupakan bahagian yang sangat relevan dalam prestasi JavaScript. Dengan menyimpan panjang tatasusunan, anda boleh mengelak daripada mengira semula setiap gelung dengan berkesan.

Nota: Walaupun enjin penyemak imbas moden akan mengoptimumkan proses ini secara automatik, jangan lupa bahawa masih terdapat penyemak imbas yang lebih lama.

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++) {

}

Pemuatan tak segerak bagi kandungan pihak ketiga

Apabila anda tidak dapat menjamin bahawa membenamkan kandungan pihak ketiga seperti video Youtube atau butang suka/tweet akan berfungsi dengan betul, anda perlu mempertimbangkan untuk memuatkan kod ini secara tidak segerak untuk mengelak daripada menyekat keseluruhan halaman memuatkan.

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

}());

Elakkan menggunakan jQuery untuk melaksanakan animasi

1. Dilarang menggunakan slideUp/Down() fadeIn/fadeOut() dan kaedah lain

2