Performa merupakan hal yang sangat penting dalam sebuah aplikasi. Banyak yang fokus ke Time-to-interactive, dan memang itu juga sangat penting dalam membuat falling in love at the first sight.

Meskipun dibagian Frontend-end sangat bergantung kepada Back-end, tapi ada beberapa hal yang app-logic nya berada di Frontend. Misal seperti kasus ini:

Related by topic @ KelasKita

Related by topic sesungguhnya hanyalah data "array yang diacak", dan akan diacak setiap component tersebut berada di lifecycle "created", berikut kode nya (menggunakan Fisher-yates shuffle):

let d = [...state.categoryList]

for (var c = d.length - 1; c > 0; c--) {
  let b = Math.floor(Math.random() * (c + 1))
  let a = d[c]
  d[c] = d[b]
  d[b] = a
}

return d

Setiap fitur memiliki cost. Sebelum menggunakan loop, saya menggunakan .sort() dan Math.random(), lalu pakai .map() .sort() dan di .map() lagi, dll. Setelah melakukan measuring, ternyata yang paling cepat ter-eksekusi nya adalah menggunakan algoritma Fisher-yates shuffle ini.

Dan pilihan tersebut berdasarkan data, bukan berdasarkan asumsi belaka ya :)

Bagaimana cara measuring nya?

Mungkin kita bisa menggunakan Dev tools di browser, btw ada tulisan menarik tentang menggunakan Chrome Dev Tools yang ditulis oleh Alfred Crosby di WWWID. Baca disini.

Untuk cara ini, kita menggunakan cara programmatically. Ada dua cara untuk measuring simple ini, bisa menggunakan time() dan timeEnd() dari console, atau menggunakan performance.now().  Mari kita coba keduanya, dan silahkan pilih yang menurut kalian paling efektif.

Kita gunakan contoh yakni men-shuffle array, dan tampilkan 5 dari 21 data tersebut secara random.

function sA(d) {
  for (var c = d.length - 1; c > 0; c--) {
    let b = Math.floor(Math.random() * (c + 1))
    let a = d[c]
    d[c] = d[b]
    d[b] = a
   }
   return d.slice(0, 5)
}

Data (variable d) nya bisa diambil disini.

Lumayan sekitar  0.07ms. Intinya jika ingin menggunakan via console, hierarki nya seperti ini:

console.time('namespace yang ingin di measure')
// eksekusi code nya disini
console.timeEnd('namespace yang ingin di measure')

Sekarang, mari kita gunakan performance.now()

Menariknya, nilai nya beda dengan menggunakan console, tapi untuk performance.now(), hasil measuring nya tetap menampilkan nilai yang sama. Beda dengan console yang selalu menampilkan nilai yang berbeda (sama-sama menggunakan milisecond):

Namanya juga estimasi ya, jadi rata-rata di sekitar 0.5ms kalau menggunakan console dan sekitar 0.1ms kalau menggunakan performance

Untuk menggunakan performance.now(), hierarki nya seperti ini:

var startTime = performance.now()
// eksekusi code nya disini
console.log(performance.now() - startTime)

Cara lain?

Ini hanya contoh untuk measuring simple. Untuk "monitoring", kalian mungkin bisa menggunakan Datadog, Stackify Retrace, atau bahkan New Relic. Cara ini hanya saya gunakan ketika ingin mengetes execution code suatu methods, jika ternyata ada sesuatu yang salah (di execution time nya) di logic yang saya buat.