JavaScript adalah bahasa yang sangat fleksibel. Kita dapat menulis berbagai gaya kode sesuka kita. Gaya kode yang berbeda pasti akan menyebabkan perbedaan dalam efisiensi eksekusi. Selama proses pengembangan, kami terpapar banyak metode untuk meningkatkan kinerja kode. Mari kita selesaikan masalah yang umum dan mudah untuk menghindari masalah.
Efisiensi eksekusi Javascript sendiri
Rantai ruang lingkup, penutupan, pewarisan prototipe, eval dan fitur -fitur lain dalam JavaScript menyediakan berbagai fungsi magis sambil juga membawa berbagai masalah efisiensi. Jika Anda menggunakannya dengan ceroboh, Anda akan menyebabkan eksekusi yang tidak efisien.
1. Impor global
Kami akan menggunakan beberapa variabel global (jendela, dokumen, variabel global khusus, dll.) Selama proses pengkodean. Siapa pun yang mengetahui rantai ruang lingkup JavaScript tahu bahwa mengakses variabel global dalam ruang lingkup lokal memerlukan melintasi seluruh lapisan rantai lingkup persimpangan sampai ruang lingkup tingkat atas, dan efisiensi akses variabel lokal akan lebih cepat dan lebih tinggi. Oleh karena itu, saat menggunakan beberapa objek global pada frekuensi tinggi dalam ruang lingkup lokal, itu dapat diimpor ke ruang lingkup lokal, misalnya:
Salinan kode adalah sebagai berikut:
// 1. Masukkan ke dalam modul sebagai parameter
(function (window, $) {
var xxx = window.xxx;
$ ("#xxx1"). xxx ();
$ ("#xxx2"). xxx ();
}) (jendela, jQuery);
// 2. Menyimpan ke variabel lokal
fungsi(){
var doc = dokumen;
var global = window.global;
}
2. Masalah evaluasi dan evaluasi kelas
Kita semua tahu bahwa eval dapat menggunakan string sebagai kode JS untuk mengeksekusi dan memprosesnya. Dikatakan bahwa kode yang dieksekusi menggunakan eval lebih dari 100 kali lebih lambat dari kode yang tidak menggunakan eval (saya belum menguji efisiensi spesifik, dan mereka yang tertarik dapat mengujinya)
Kode JavaScript akan melakukan operasi "prekompilasi" yang serupa sebelum dieksekusi: Pertama, itu akan membuat objek aktif dalam lingkungan eksekusi saat ini, dan mengatur variabel yang dinyatakan dengan VAR sebagai properti dari objek aktif, tetapi pada saat ini penugasan variabel -variabel ini tidak terdefinisi, dan fungsi yang ditentukan dalam fungsi juga ditambahkan sebagai properti dari objek aktif, dan nilai -nilainya adalah definisi. Namun, jika Anda menggunakan "eval", kode dalam "eval" (sebenarnya string) tidak dapat mengidentifikasi konteksnya, tidak dapat diuraikan dan dioptimalkan sebelumnya, yaitu operasi yang telah dikompilasi sebelumnya tidak dapat dilakukan. Oleh karena itu, kinerjanya akan sangat berkurang
Bahkan, orang jarang menggunakan eval sekarang. Yang ingin saya bicarakan di sini adalah skenario dari dua jenis eval (fungsi baru {}, setTimeout, setInterver)
Salinan kode adalah sebagai berikut:
settimtout ("waspada (1)", 1000);
setInterver ("Peringatan (1)", 1000);
(fungsi baru ("peringatan (1)")) ();
Jenis -jenis efisiensi eksekusi kode di atas akan relatif rendah, sehingga disarankan untuk secara langsung meneruskan metode anonim atau referensi ke metode SetTimeout.
3. Setelah penutupan selesai, variabel yang tidak lagi dirujuk akan dirilis.
Salinan kode adalah sebagai berikut:
var f = (function () {
var a = {name: "var3"};
var b = ["var1", "var2"];
var c = document.getElementByTagname ("li");
// **** Variabel lain
// *** Beberapa operasi
var res = function () {
waspada (a.name);
}
Return Res;
}) ()
Nilai pengembalian variabel f dalam kode di atas adalah metode res yang dikembalikan dalam penutupan yang terdiri dari fungsi eksekusi langsung. Variabel ini mempertahankan referensi untuk semua variabel (a, b, c, dll.) Dalam penutupan ini. Oleh karena itu, kedua variabel ini akan selalu berada di ruang memori, terutama referensi ke elemen DOM akan mengkonsumsi banyak memori. Kami hanya menggunakan nilai variabel A dalam res. Oleh karena itu, kita dapat membebaskan variabel lain sebelum penutupan kembali.
Salinan kode adalah sebagai berikut:
var f = (function () {
var a = {name: "var3"};
var b = ["var1", "var2"];
var c = document.getElementByTagname ("li");
// **** Variabel lain
// *** Beberapa operasi
// Lepaskan variabel yang tidak lagi digunakan sebelum penutupan kembali
b = c = null;
var res = function () {
waspada (a.name);
}
Return Res;
}) ()
Efisiensi DOM operasi JS
Selama proses pengembangan web, hambatan efisiensi eksekusi front-end sering pada operasi DOM. Operasi DOM adalah hal yang sangat memakan kinerja. Bagaimana kita bisa mencoba menghemat kinerja selama operasi DOM?
1. Kurangi reflow
Apa itu reflow?
Ketika sifat -sifat perubahan elemen DOM (seperti warna), browser akan memberi tahu render untuk mendefinisikan kembali elemen yang sesuai. Proses ini disebut mengecat ulang.
Jika perubahan melibatkan tata letak elemen (seperti lebar), browser membuang atribut asli, menghitung ulang dan meneruskan hasilnya ke render untuk mengulangi elemen halaman. Proses ini disebut reflow.
Bagaimana mengurangi reflow
Pertama -tama hapus elemen dari dokumen, dan setelah menyelesaikan modifikasi, kemudian mengembalikan elemen ke posisi semula (ketika sejumlah besar operasi reflow dilakukan pada elemen tertentu dan elemen anaknya, efek dari metode 1 dan 2 akan lebih jelas)
Atur tampilan elemen ke "tidak ada", dan setelah menyelesaikan modifikasi, memodifikasi tampilan ke nilai asli
Tentukan kelas kelas saat memodifikasi beberapa atribut gaya alih -alih memodifikasi atribut gaya beberapa kali (direkomendasikan oleh siswa tertentu)
Gunakan DocumentFragment saat menambahkan sejumlah besar elemen ke halaman
Misalnya
Salinan kode adalah sebagai berikut:
untuk (var i = 0; i <100: i ++) {
var child = docuemnt.createelement ("li");
child.innerhtml = "anak";
document.getElementById ("Parent"). AppendChild (anak);
}
Ketika kode memerlukan beberapa akses ke informasi status elemen, kami dapat untuk sementara waktu menyimpannya dalam variabel ketika status tetap tidak berubah, yang dapat menghindari overhead memori yang disebabkan oleh beberapa akses ke DOM. Contoh khas adalah:
Saat mencari elemen DOM, cobalah untuk menghindari melintasi elemen halaman di area yang luas, cobalah menggunakan pemilih yang akurat, atau tentukan konteks untuk mempersempit rentang pencarian, mengambil jQuery sebagai contoh
Gunakan Selector Pencocokan Fuzzy yang Lebih Kurang: Misalnya $ ("[Nama*= '_ fix']"), lebih banyak menggunakan lebih banyak pemilih komposit seperti ID dan secara bertahap mempersempit ruang lingkup $ ("li.active"), dll.
Tentukan konteksnya: misalnya $ ("#Parent .class"), $ (". Kelas", $ el) dan sebagainya
4. Gunakan Delegasi Acara
Skenario Penggunaan: Daftar dengan sejumlah besar catatan. Setiap catatan harus terikat untuk mengklik acara. Beberapa fungsi diimplementasikan setelah mengklik mouse. Praktik kami yang biasa adalah mengikat untuk mendengarkan acara untuk setiap catatan. Praktik ini akan menyebabkan sejumlah besar pendengar acara di halaman, yang relatif tidak efisien.
Prinsip Dasar: Kita semua tahu bahwa peristiwa akan menggelembung dalam spesifikasi DOM, yaitu, peristiwa elemen apa pun akan menggelembung ke langkah demi langkah sesuai dengan struktur pohon DOM. Objek Acara juga menyediakan event.target (srcelement di bawah IE) untuk menunjuk ke sumber acara, sehingga kita dapat menemukan elemen paling orisinal yang memicu acara bahkan jika kita mendengarkan acara pada elemen induk. Ini adalah prinsip dasar delegasi. Tanpa basa -basi lagi, contoh di atas
Berdasarkan prinsip peristiwa pemantauan yang diperkenalkan di atas, mari kita tulis ulang.
Tentu saja, kami tidak perlu menilai sumber acara setiap saat, kami dapat mengabstraksikannya dan menyerahkannya ke kelas alat untuk menyelesaikannya. Metode delegasi () dalam jQuery mengimplementasikan fungsi ini
Sintaksnya seperti $ (pemilih) .delegate (anak -anak, peristiwa, data, fungsi), misalnya:
Salinan kode adalah sebagai berikut:
$ ("Div"). Delegasi ("tombol", "klik", function () {
$ ("p"). slidetoggle ();
});
Deskripsi Parameter (dikutip dari W3School)
Deskripsi parameter
Diperlukan anak -anak. Menentukan bahwa satu atau lebih elemen anak dari event handler untuk dilampirkan.
Acara diperlukan. Menentukan satu atau lebih peristiwa yang melekat pada elemen. Pisahkan beberapa nilai peristiwa berdasarkan spasi. Harus menjadi acara yang valid.
Data adalah opsional. Menentukan data tambahan yang diteruskan ke fungsi.
Fungsi diperlukan. Menentukan fungsi yang berjalan ketika suatu peristiwa terjadi.
Tips: Keuntungan lain dari delegasi acara adalah bahwa bahkan peristiwa yang dipicu pada elemen yang ditambahkan secara dinamis setelah pengikatan acara dapat didengar, sehingga Anda tidak perlu mengikat acara untuk setiap kali Anda secara dinamis menambahkan elemen ke halaman.