Kesalahan Javascript umum yang sangat memengaruhi kinerja? [Tutup]

Pada pertemuan UI / UX baru-baru ini yang saya hadiri, saya memberikan umpan balik pada situs web yang menggunakan Javascript (jQuery) untuk interaksi dan UI-nya - itu adalah animasi dan manipulasi yang cukup sederhana, tetapi kinerja pada komputer yang layak mengerikan.

Ini benar-benar mengingatkan saya pada banyak situs / program yang pernah saya lihat dengan masalah yang sama, di mana tindakan tertentu benar-benar menghancurkan kinerja. Ini sebagian besar dalam (atau setidaknya lebih terlihat dalam) situasi di mana Javascript hampir berfungsi sebagai pengganti Flash. Ini sangat kontras dengan beberapa aplikasi web yang saya gunakan yang memiliki lebih banyak Javascript dan fungsionalitas tetapi berjalan sangat lancar (COGNOS oleh IBM adalah salah satu yang dapat saya pikirkan dari atas kepala saya).

Saya ingin mengetahui beberapa masalah umum yang tidak dipertimbangkan saat mengembangkan JS yang akan mematikan kinerja situs.

Seorang pembunuh kinerja umum memanggil .lengthHTMLCollection di dalam forloop:

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

Anti-pola itu menyebabkan ukuran koleksi dihitung pada setiap melewati loop. Pendekatan yang lebih baik adalah menghitung panjang di luar loop:

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

Tidak, masalahnya bukan berasal dari JS yang digunakan sebagai pengganti flash. Jika Anda tidak yakin dengan hal itu, dokumentasikan diri Anda tentang skrip tindakan: sangat dekat dengan JS.

Sebagai pembunuh kinerja, Anda dapat menemukan beberapa praktik buruk:

• Lampirkan event handler pada acara yang terus-menerus, seperti menggulir, merapikan mouse atau hal serupa. Ini memiliki 2 kelemahan: jika acara tidak cukup dipicu, aplikasi Anda tidak akan reaktif. Jika dipicu terlalu banyak, Anda akan memiliki beban CPU yang sangat besar tanpa biaya.
• Melakukan panggilan AJAX yang sinkron. Javascript tidak multithreaded, maka, ketika sebagian JS sedang menunggu sesuatu, aplikasi Anda dibekukan. Anda lebih baik menggunakan panggilan AJAX asinkron, dan cara yang sama menggunakan setTimeout / setInterval untuk membagi fase perhitungan yang panjang dan menjaga aplikasi Anda reaktif.
• Kompleksitas algoritme tinggi seperti dalam bahasa lain.

Saya memberikan umpan balik pada situs web yang menggunakan Javascript (jQuery) untuk interaksinya dan UI - itu adalah animasi dan manipulasi yang cukup sederhana, tetapi kinerja pada komputer yang layak mengerikan.

Masalah terbesar dengan kinerja adalah menggunakan abstraksi tingkat tinggi (seperti jQuery) tanpa memahami model DOM yang mendasari dan model animasi CSS3 (atau kanvas, atau svg).

Jika Anda tidak tahu bagaimana melakukannya tanpa abstraksi maka Anda memiliki pengetahuan nol mutlak tentang teknik apa yang cepat atau lambat.

Pelajari JavaScript, Pelajari DOM. Setelah Anda mengetahui keduanya dan Anda tahu apa yang dilakukan abstraksi di bawah tenda, maka Anda dapat menggunakannya secara efisien. Tentu saja sebagian besar waktu Anda menyadari abstraksi lambat dan lakukan secara manual tanpa perpustakaan.

Keindahan dan kelemahan Javascript adalah sangat fleksibel. Yang sedang berkata, itu sebenarnya memungkinkan Anda untuk melakukan hal-hal yang mungkin tidak boleh Anda lakukan dalam banyak kasus.

Dari ulasan kode yang saya ikuti, kekhawatiran utama cenderung terkait dengan rendering CSS. Untuk pengembang JS yang lebih baru, kami cenderung melihat terlalu banyak variabel yang digunakan dalam lingkup global.

Juga, penutupan yang tidak tepat sering dapat menyebabkan kebocoran memori. Namun, sebagian besar kerangka kerja Javascript modern mencegah masalah seperti ini selama kode Anda mengikuti kerangka tersebut.

Berikut ini adalah tautan cepat yang saya temukan sekitar setahun lalu tentang penulisan kode jquery yang lebih baik: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance /

Satu hal yang saya temukan dalam kode rekan kerja yang mematikan kinerja adalah caching data yang tidak perlu di-cache.

Contoh:

var table = $("#data").dataTable(.....);

DataTables adalah plug-in jQuery yang kami gunakan untuk membuat kisi yang bagus. Bagaimanapun, tabel memiliki hampir 5k baris di dalamnya, menerapkan plug-in DataTables dan kemudian menyimpannya dalam variabel tabel sebenarnya menyebabkan FireFox dan IE untuk memperingatkan bahwa skrip terlalu lama. Moral dari cerita, hanya cache data jika Anda perlu.

Dari apa yang saya dengar forloop secara komputasi lebih cepat daripada jQuery $.each().