Mengukur fungsi JavaScript ' Prestasi

Prestasi aplikasi web sentiasa penting, terutamanya dalam pembangunan web. Sebagai pemaju front-end profesional, kita mesti memberi perhatian kepada pengoptimuman prestasi. Banyak kaedah pengoptimuman prestasi web tradisional, seperti mengurangkan permintaan, menggunakan CDN, dan mengelakkan penulisan penulisan menyekat, masih sah hari ini. Walau bagaimanapun, apabila semakin banyak aplikasi web menggunakan JavaScript, mengesahkan kecekapan kod telah menjadi penting.

Katakan anda mempunyai fungsi yang berfungsi tetapi mengesyaki ia tidak cekap dan merancang untuk membuat penambahbaikan. Bagaimana untuk membuktikan andaian ini? Apakah amalan terbaik untuk menguji prestasi fungsi JavaScript? Umumnya, cara terbaik ialah menggunakan fungsi terbina dalam

untuk mengukur masa sebelum dan selepas fungsi dilaksanakan. Artikel ini akan membincangkan cara mengukur masa dan cara pelaksanaan kod untuk mengelakkan beberapa perangkap biasa. performance.now()

mata utama

Prestasi dalam pembangunan web adalah kritikal dan boleh diperbaiki dengan mengesahkan kelajuan kod. Cara terbaik untuk menguji prestasi fungsi JavaScript adalah menggunakan fungsi terbina dalam
• untuk mengukur masa sebelum dan selepas fungsi dilaksanakan. performance.now() API Masa Resolusi Tinggi menyediakan fungsi yang dipanggil
yang mengembalikan objek
• . Ini memberikan gambaran yang tepat tentang masa yang berlalu, menjadikannya lebih tepat daripada objek terbina dalam now(). DOMHighResTimeStamp Date Apabila mengukur masa pelaksanaan fungsi, berhati -hatilah untuk tidak secara tidak sengaja mengukur kandungan yang tidak penting. Pastikan satu -satunya operasi untuk mengukur antara dua
adalah pelaksanaan fungsi yang dipersoalkan.
• performance.now() Ini adalah ralat biasa untuk mengukur masa pelaksanaan fungsi sekali sahaja. Masa pelaksanaan berbeza -beza berdasarkan pelbagai faktor, jadi disyorkan untuk mengulangi fungsi dan mengira masa purata atau median.
• Konteks adalah penting apabila membandingkan kelajuan fungsi yang berbeza. Kelajuan fungsi berbeza mengikut tugas tertentu yang dilakukannya. Oleh itu, untuk menulis aplikasi web yang lebih cepat, adalah penting untuk membuat pengukuran dan perbandingan.

present.now ()

API Masa Resolusi Tinggi menyediakan fungsi yang dipanggil

yang mengembalikan objek now(). Ini adalah nombor titik terapung yang mencerminkan masa semasa dalam milisaat, dan tepat hingga satu ribu milisaat. Individu, nombor ini tidak begitu berharga untuk analisis anda, tetapi perbezaan antara dua nombor tersebut dapat menggambarkan dengan tepat berapa banyak masa yang telah berlalu. Di samping menjadi lebih tepat daripada objek terbina dalam DOMHighResTimeStamp, ia juga "membosankan". Ini bermakna, hanya meletakkan, ia tidak dipengaruhi oleh sistem (seperti sistem operasi komputer riba anda) secara berkala membetulkan masa sistem. Untuk meletakkannya dengan mudah, menentukan dua contoh dan mengira perbezaan tidak mewakili masa berlalu. Takrif matematik "monotonik" ialah perubahan (untuk fungsi atau kuantiti) perubahan sedemikian rupa sehingga tidak pernah berkurangan atau tidak pernah meningkatkan Date. Satu lagi cara untuk menerangkannya ialah membayangkan menggunakannya dalam tempoh masa di mana jam itu bertukar ke hadapan atau ke belakang. Sebagai contoh, apabila jam negara anda bersetuju untuk melangkau satu jam untuk memaksimumkan cahaya matahari pada siang hari. Jika anda ingin membuat contoh Date satu jam sebelum jam dipanggil kembali, dan kemudian satu lagi contoh selepas itu, lihat perbezaannya, ia akan menunjukkan sesuatu seperti "1 jam 3 saat 123 milisaat". Menggunakan dua contoh , perbezaannya akan menjadi "3 saat 123 milisaat dan 456789 ribu milisaat". Dalam bahagian ini, saya tidak akan terperinci mengenai API ini. Jadi, jika anda ingin mengetahui lebih lanjut dan melihat beberapa contohnya menggunakannya, saya cadangkan anda membaca artikel yang menemui API Masa Resolusi Tinggi. Sekarang bahawa anda telah mempelajari apa API masa resolusi tinggi dan bagaimana untuk menggunakannya, mari kita menyelam ke dalam beberapa perangkap yang berpotensi. Tetapi sebelum melakukan ini, mari kita tentukan fungsi yang dipanggil Date, yang akan kita gunakan untuk seluruh artikel ini. Date performance.now() makeHash() Pelaksanaan fungsi ini dapat diukur seperti berikut:

function makeHash(source) {
  var hash = 0;
  if (source.length === 0) return hash;
  for (var i = 0; i < source.length; i++) {
    var char = source.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // Convert to 32bit integer
  }
  return hash;
}

Jika anda menjalankan kod ini dalam penyemak imbas anda, anda harus melihat sesuatu seperti yang berikut:

var t0 = performance.now();
var result = makeHash('Peter');
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result);

Berikut menunjukkan demonstrasi langsung kod ini:

<code>Took 0.2730 milliseconds to generate: 77005292</code>

[pautan codepen harus dimasukkan di sini, kerana saya tidak dapat mengakses laman web luaran, ia tidak dapat disediakan]

Dengan contoh ini, mari kita mulakan perbincangan.

jejak #1 - Kandungan yang tidak penting

Dalam contoh di atas, anda dapat melihat bahawa antara satu

dan yang lain

, satu -satunya perkara yang kita lakukan ialah memanggil fungsi

dan memberikan nilainya kepada pembolehubah performance.now(). Ini memberi kita masa yang diperlukan untuk melaksanakan fungsi tanpa apa -apa lagi. Pengukuran ini juga boleh dilakukan seperti berikut: performance.now() makeHash() result Terdapat demonstrasi langsung coretan kod ini di bawah:

var t0 = performance.now();
console.log(makeHash('Peter'));  // 不好的主意！
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds');

[pautan codepen harus dimasukkan di sini, kerana saya tidak dapat mengakses laman web luaran, ia tidak dapat disediakan]

Tetapi dalam kes ini, kami akan mengukur masa yang diperlukan untuk memanggil fungsi makeHash('Peter') dan masa yang diperlukan untuk menghantar dan mencetak output itu pada konsol. Kami tidak tahu berapa lama masa yang diperlukan untuk kedua -dua operasi ini. Anda hanya tahu masa gabungan. Selain itu, masa yang diperlukan untuk menghantar dan mencetak berbeza -beza sangat bergantung pada apa yang sedang berlaku dalam penyemak imbas atau bahkan dalam penyemak imbas pada masa itu. Mungkin anda tahu betapa lambatnya. Walau bagaimanapun, melaksanakan pelbagai fungsi adalah sama salah, walaupun setiap fungsi tidak melibatkan sebarang I/O. Contohnya:

Begitu juga, kita tidak tahu bagaimana masa pelaksanaan diperuntukkan. Adakah tugasan yang berubah -ubah, panggilan console.log atau panggilan

?

function makeHash(source) {
  var hash = 0;
  if (source.length === 0) return hash;
  for (var i = 0; i < source.length; i++) {
    var char = source.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // Convert to 32bit integer
  }
  return hash;
}

jejak #2 - mengukur hanya sekali toLowerCase() toString() Satu lagi kesilapan biasa adalah untuk membuat pengukuran hanya sekali, meringkaskan masa yang diambil, dan membuat kesimpulan berdasarkan masa itu. Pada masa yang berlainan, ini mungkin berbeza. Masa pelaksanaan bergantung pada pelbagai faktor:

masa pemanasan kompil (contohnya, masa apabila kod itu disusun menjadi bytecode)

benang utama sibuk berurusan dengan perkara lain yang kita tidak sedar akan berlaku

• CPU komputer anda sibuk dengan perkara -perkara tertentu yang akan melambatkan seluruh penyemak imbas
Kaedah penambahbaikan tambahan adalah untuk melaksanakan fungsi berulang kali, seperti berikut:

Berikut menunjukkan demonstrasi langsung contoh ini:

[pautan codepen harus dimasukkan di sini, kerana saya tidak dapat mengakses laman web luaran, ia tidak dapat disediakan]

var t0 = performance.now();
var result = makeHash('Peter');
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result);

Risiko pendekatan ini adalah bahawa enjin JavaScript pelayar kami boleh melakukan pengoptimuman sekunder, yang bermaksud bahawa kali kedua fungsi dipanggil dengan input yang sama, ia boleh mendapat manfaat daripada mengingati output pertama, dan hanya menggunakannya lagi. Untuk menyelesaikan masalah ini, anda boleh menggunakan banyak rentetan input yang berbeza dan bukannya berulang kali menghantar rentetan input yang sama (seperti "Peter"). Jelas sekali, masalah dengan ujian dengan input yang berbeza adalah bahawa fungsi yang kita ukur secara semulajadi memerlukan masa yang berlainan. Mungkin beberapa input akan menghasilkan masa pelaksanaan yang lebih lama daripada yang lain.

jejak #3-ketergantungan secara purata

Di bahagian sebelumnya, kami mengetahui bahawa ia adalah kebiasaan yang baik untuk mengulangi sesuatu dan menggunakan input yang berbeza. Walau bagaimanapun, kita harus ingat bahawa masalah dengan input yang berbeza adalah bahawa masa pelaksanaan mungkin lebih lama daripada semua input lain. Oleh itu, mari kita mundur dan hantar input yang sama. Katakan kami menghantar input yang sama sepuluh kali dan mencetak masa yang diperlukan setiap kali. Output mungkin kelihatan seperti ini:

function makeHash(source) {
  var hash = 0;
  if (source.length === 0) return hash;
  for (var i = 0; i < source.length; i++) {
    var char = source.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // Convert to 32bit integer
  }
  return hash;
}

Perhatikan bahawa kali pertama, nombor itu sama sekali berbeza dari sembilan kali yang lain. Ini kemungkinan besar kerana enjin JavaScript dalam penyemak imbas kami telah melakukan beberapa pengoptimuman dan memerlukan beberapa pemanasan. Kita tidak boleh mengelakkan ini, tetapi kita boleh mempertimbangkan beberapa ubat yang baik untuk mencegah kesimpulan palsu. Salah satu cara adalah untuk mengira purata masa untuk sembilan kali terakhir. Satu lagi pendekatan yang lebih praktikal adalah untuk mengumpul semua hasil dan mengira median. Pada asasnya, ini adalah semua hasil dalam rangka dan pilih yang tengah. Di sinilah performance.now() sangat berguna, kerana anda boleh mendapatkan nombor yang boleh anda gunakan seperti yang anda suka. Mari cuba lagi, tetapi kali ini kita akan menggunakan fungsi median:

var t0 = performance.now();
var result = makeHash('Peter');
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result);

jejak #4 - Bandingkan fungsi dalam urutan yang boleh diramal

Kami telah belajar bahawa ia sentiasa merupakan idea yang baik untuk mengukur sesuatu yang beberapa kali dan purata. Selain itu, contoh terakhir memberitahu kita bahawa lebih baik menggunakan median dan bukannya purata. Sekarang, sebenarnya, penggunaan yang baik untuk mengukur masa pelaksanaan fungsi adalah untuk memahami mana dari beberapa fungsi lebih cepat. Katakan kami mempunyai dua fungsi yang mengambil jenis input yang sama dan menghasilkan hasil yang sama, tetapi secara dalaman mereka bekerja dengan cara yang berbeza. Katakan kita mahu fungsi yang kembali benar atau palsu jika rentetan wujud dalam pelbagai rentetan lain, tetapi ini adalah kes-insensitif. Dalam erti kata lain, kita tidak boleh menggunakan Array.prototype.indexOf kerana ia tidak sensitif. Ini adalah pelaksanaan seperti ini:

<code>Took 0.2730 milliseconds to generate: 77005292</code>

kami segera menyedari bahawa ini dapat diperbaiki kerana gelung haystack.forEach selalu melintasi semua elemen, walaupun kami mempunyai perlawanan awal. Mari cuba tulis versi yang lebih baik menggunakan lama untuk gelung.

var t0 = performance.now();
console.log(makeHash('Peter'));  // 不好的主意！
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds');

mari kita lihat mana yang lebih cepat sekarang. Kami melakukan ini dengan menjalankan setiap fungsi 10 kali dan mengumpul semua pengukuran:

var t0 = performance.now();
var name = 'Peter';
var result = makeHash(name.toLowerCase()).toString();
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result);

kami menjalankannya dan mendapatkan output berikut:

var t0 = performance.now();
for (var i = 0; i < 10; i++) {
  makeHash('Peter');
}
var t1 = performance.now();
console.log('Took', ((t1 - t0) / 10).toFixed(4), 'milliseconds to generate');

Berikut menunjukkan demonstrasi langsung contoh ini:

[pautan codepen harus dimasukkan di sini, kerana saya tidak dapat mengakses laman web luaran, ia tidak dapat disediakan]

Apa sebenarnya yang berlaku? Fungsi pertama adalah tiga kali lebih cepat. Ini tidak sepatutnya berlaku!

Penjelasannya mudah, tetapi halus. Fungsi pertama menggunakan haystack.forEach manfaat dari beberapa pengoptimuman peringkat rendah dalam enjin JavaScript pelayar, dan kami tidak mendapat pengoptimuman ini apabila kami menggunakan teknik pengindeksan array. Ia membuktikan maksud kami: anda tidak akan tahu kecuali anda mengukurnya!

Kesimpulan

Semasa kami cuba menunjukkan bagaimana untuk mendapatkan masa pelaksanaan yang tepat di JavaScript menggunakan performance.now(), kami tersandung pada senario penanda aras di mana intuisi kami adalah bertentangan dengan kesimpulan yang kami datang dengan hasil empirikal kami. Intinya ialah jika anda ingin menulis aplikasi web yang lebih cepat, kod JavaScript anda perlu dioptimumkan. Kerana komputer adalah (hampir) makhluk hidup, mereka tidak dapat diramalkan dan mengejutkan. Cara yang paling boleh dipercayai untuk mengetahui bahawa penambahbaikan kod kami akan menghasilkan kelajuan pelaksanaan yang lebih cepat adalah pengukuran dan perbandingan. Kami tidak pernah tahu sekeping kod mana yang lebih cepat, dan jika kita mempunyai pelbagai cara untuk melakukan perkara yang sama, sebab lain ialah konteksnya penting. Dalam bahagian sebelumnya, kami melakukan carian rentetan kes-insensitif, mencari rentetan dalam 26 rentetan lain. Sekiranya kita terpaksa mencari rentetan dalam 100,000 rentetan lain, kesimpulannya kemungkinan besar akan berbeza. Senarai di atas tidak lengkap, kerana terdapat lebih banyak perangkap untuk mengetahui. Sebagai contoh, mengukur senario yang tidak praktikal atau hanya mengambil pengukuran pada enjin JavaScript. Tetapi pasti bahawa performance.now() adalah aset besar untuk pemaju JavaScript yang ingin menulis aplikasi web yang lebih cepat dan lebih baik. Akhir sekali, ingatlah bahawa mengukur masa pelaksanaan hanya menghasilkan satu dimensi "kod yang lebih baik". Memori dan kerumitan kod juga perlu dipertimbangkan. Bagaimana dengan anda? Adakah anda pernah menggunakan fungsi ini untuk menguji prestasi kod anda? Jika tidak, bagaimana anda meneruskan pada peringkat ini? Sila kongsi pendapat anda dalam komen di bawah. Mari mulakan perbincangan!

(bahagian Soalan Lazim ditinggalkan, kerana ia sangat diduplikasi dengan kandungan di atas, hanya menyimpan mata utama.)

Atas ialah kandungan terperinci Mengukur fungsi JavaScript ' Prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!