Artikel ini menjelaskan teknik umum untuk JavaScript untuk meningkatkan kinerja. Bagikan untuk referensi Anda, sebagai berikut:
1. Perhatikan ruang lingkup
Ketika jumlah ruang lingkup dalam rantai lingkup meningkat, waktu untuk mengakses variabel di luar ruang lingkup saat ini juga meningkat. Mengakses variabel global selalu lebih lambat daripada mengakses variabel lokal karena Anda perlu melintasi rantai ruang lingkup.
1). Selalu benar untuk menghindari pencarian global untuk menyimpan objek global yang akan digunakan beberapa kali dalam fungsi sebagai variabel lokal.
2). Hindari dengan pernyataan dengan menciptakan ruang lingkupnya sendiri, sehingga meningkatkan panjang rantai lingkup di mana kode dieksekusi.
2. Pilih metode yang tepat
Bagian dari masalah kinerja terkait dengan algoritma atau metode yang digunakan untuk menyelesaikan masalah.
1). Hindari pencarian atribut yang tidak perlu
Dalam ilmu komputer, kompleksitas suatu algoritma diwakili oleh simbol O. Algoritma paling sederhana dan tercepat adalah nilai konstan, yaitu O (1). Setelah itu, algoritma menjadi lebih dan lebih kompleks dan membutuhkan waktu lebih lama untuk dieksekusi. Jenis algoritma JavaScript Umum adalah:
Konstan: Tidak peduli berapa banyak nilai yang ada, waktu eksekusi konstan. Secara umum, itu mewakili nilai sederhana dan nilai yang disimpan dalam variabel.
Logaritma: Total waktu eksekusi terkait dengan jumlah nilai, tetapi tidak perlu mendapatkan setiap nilai untuk menyelesaikan algoritma. Misalnya: pencarian biner
Linear: Total waktu eksekusi terkait langsung dengan jumlah nilai. Misalnya: Iterasi melalui semua elemen dalam array
Kotak: Total waktu eksekusi terkait dengan jumlah nilai, dan setiap nilai harus diperoleh setidaknya N kali. Misalnya: masukkan sortir
Kubus: Total waktu eksekusi terkait dengan jumlah nilai, dan setiap nilai harus memperoleh setidaknya kotak n.
Menggunakan variabel dan array lebih efisien daripada mengakses properti pada objek. Pencarian untuk setiap atribut pada suatu objek membutuhkan waktu lebih lama daripada mengakses variabel atau array, karena properti dengan nama itu harus dicari dalam rantai prototipe.
Secara umum, selama kompleksitas algoritma dapat dikurangi, itu harus diminimalkan sebanyak mungkin. Gunakan sebanyak mungkin variabel lokal untuk mengganti pencarian properti dengan pencarian nilai. Selain itu, jika Anda dapat mengaksesnya dengan posisi array digital, atau menggunakan atribut bernama (seperti objek nodelist), kemudian gunakan posisi array.
2). Optimalkan Loop
A. Iterasi penurunan nilai dalam banyak kasus, iterator yang mulai dari nilai maksimum dan terus menerus merusak dalam loop lebih efisien.
B. Kondisi terminasi yang disederhanakan karena setiap proses siklus menghitung kondisi penghentian, itu harus dipastikan secepat mungkin.
C. Badan loop yang disederhanakan Badan loop adalah yang paling banyak dilakukan, jadi pastikan itu dioptimalkan hingga tingkat maksimum. Pastikan tidak ada perhitungan intensif yang dapat dengan mudah dihapus dari loop.
D. Yang paling umum digunakan untuk dan sementara loop di loop post-test adalah loop pra-tes. Loop post-test seperti Do-While dapat menghindari penghentian awal perhitungan kondisi dan karenanya lebih cepat.
3). Perluas loop ketika jumlah loop ditentukan, menghilangkan loop dan menggunakan beberapa panggilan fungsi seringkali lebih cepat. Misalnya, perangkat Duff yang terkenal
4). Hindari penjelasan ganda
Ketika JavaScript Code ingin mengurai JavaScript, akan ada penalti interpretasi ganda. Contoh berikut:
eval ("waspada ('halo dunia!')"); // Beberapa kode mengevaluasi nilaiTetap:
waspada ('halo dunia'); var sayshi = fungsi baru ("peringatan ('halo dunia!')");Tetap:
var wayshi = function () {alert ("hellow world! ');}; setTimeout ("waspada ('hellow world!')", 500);Tetap:
setTimeOut (fungsi) ({alert ('hellow world!');}, 500);5). Metode lain
Metode asli lebih cepat - bila memungkinkan, gunakan metode asli alih -alih menulis ulang di JavaScript sendiri. Metode asli ditulis dalam bahasa yang dikompilasi seperti C/C ++, sehingga mereka jauh lebih cepat daripada JavaScript. Hal yang paling mudah dilupakan dalam JavaScript adalah operasi matematika yang kompleks yang dapat ditemukan dalam objek matematika; Metode -metode ini jauh lebih cepat daripada metode lain yang ditulis dalam JavaScript, seperti sinus dan cosinus.
Pernyataan sakelar lebih cepat - jika ada pernyataan IF -Else yang kompleks yang dapat dikonversi menjadi satu pernyataan sakelar, Anda bisa mendapatkan kode yang lebih cepat. Anda juga dapat mengatur pernyataan kasus dalam urutan yang paling mungkin untuk pesanan yang paling tidak mungkin untuk lebih mengoptimalkan pernyataan sakelar.
Operator bit lebih cepat - ketika operasi matematika dilakukan, operasi bit lebih cepat daripada operasi boolean atau aritmatika. Konversi selektif operasi bit dapat sangat meningkatkan kinerja perhitungan yang kompleks. Misalnya, Modulo, Logika, dan Jumlah Logika, Anda dapat mempertimbangkan menggunakan operasi bit untuk menggantinya.
3. Minimalkan jumlah pernyataan
1). Beberapa deklarasi variabel
menyukai:
// 4 pernyataan --- Ini adalah pemborosan jumlah var = 5; var warna = "biru"; var values = [1,2,3]; var sekarang = tanggal baru ();
Optimalisasi:
var count = 5, warna = "biru", nilai = [1,2,3], noiw = tanggal baru ();
Optimalisasi ini sangat mudah dilakukan dalam banyak kasus dan jauh lebih cepat daripada deklarasi variabel tunggal secara terpisah.
2). Masukkan nilai iteratif
menyukai:
var name = nilai [i]; i ++;
Optimalisasi:
var name = nilai [i ++];
3). Gunakan array dan literal objek
menyukai:
var nilai = array baru (); ---> var values = [];
var obj = objek baru (); ---> var obj = {};
4. Mengoptimalkan interaksi DOM
1). Minimalkan pembaruan di tempat
Setelah Anda perlu mengakses bagian DOM adalah bagian dari halaman yang telah ditampilkan, Anda melakukan pembaruan langsung. Alasan mengapa itu disebut pembaruan langsung adalah bahwa halaman perlu segera diperbarui (di tempat) ke tampilan pengguna. Apakah itu memasukkan satu karakter atau menghapus seluruh klip, ada penalti kinerja karena browser harus menghitung ulang ukuran yang tak terhitung jumlahnya untuk diperbarui.
contoh:
var list = document.getElementById ("mylist"); untuk (var i = 0; i <10; i ++) {var item = document.createElement ("li"); list.appendChild (item); item.appendChild (document.createTextNode ("item"+i));}Ini menambah 10 proyek, dan operasi ini membutuhkan total 20 pembaruan di tempat. Berikut ini adalah untuk meningkatkan metode pembuatan fragmen dokumen berikut:
var list = document.geteLementById ("mylist"); var fragment = document.createedocumentfragment (); untuk (var i = 0; i <10; i ++) {fragment.appendChild (item); item.appendChild (document.createTextNode ("item"+i));} list.appendchlid (fragment);Dalam contoh ini, hanya ada satu pembaruan langsung, yang terjadi setelah semua proyek dibuat. Fragmen dokumen digunakan sebagai placeholder sementara untuk menempatkan proyek yang baru dibuat. Kemudian gunakan AppendChild () untuk menambahkan semua item ke daftar. Ingatlah bahwa ketika AppendChild () dilewatkan dalam fragmen dokumen, hanya node anak dalam fragmen yang ditambahkan ke target, dan fragmen itu sendiri tidak akan ditambahkan.
Setelah Anda perlu memperbarui DOM, pertimbangkan untuk menggunakan fragmentasi dokumen untuk membangun struktur DOM dan kemudian menambahkannya ke dokumen yang ada.
2). Gunakan innerHTML
Ada dua cara untuk membuat node DOM pada halaman: menggunakan metode DOM seperti createElement (), AppendChild (), dan menggunakan InnerHTML untuk perubahan DOM kecil, kedua metode ini serupa dalam efisiensi. Untuk perubahan DOM besar, menggunakan InnerHTML jauh lebih cepat daripada menggunakan metode DOM standar untuk membuat struktur DOM yang sama. Demikian pula, menggunakan bagian dalam HTML pada satu waktu jauh lebih cepat daripada menggunakan bagian dalam beberapa kali.
3). Gunakan proxy acara (sederhana, dihilangkan)
4). Perhatikan Nodelist
Meminimalkan jumlah akses ke nodelist dapat sangat meningkatkan kinerja skrip.
Objek nodelist dikembalikan ketika hal berikut terjadi:
A. Panggilan ke GetElementsByTagname () dibuat
B. Dapatkan properti Childnodes dari elemen
C. Dapatkan atribut atribut elemen
D. Diakses koleksi khusus, seperti Document.Forms, Document.Images, dll.
Penting untuk memahami bahwa ketika menggunakan objek nodel, penggunaan yang wajar akan sangat meningkatkan kecepatan eksekusi kode.
Fungsi throttling yang diperkenalkan sebelumnya juga merupakan aspek yang sangat penting. Terutama ketika beberapa loop sangat memakan kinerja, metode ini sangat berguna.
PS: Untuk kompresi JavaScript, mengurangi ukuran kode juga merupakan cara yang efektif untuk meningkatkan kinerja JavaScript. Berikut adalah dua alat kompresi yang sangat praktis:
Alat kompresi/format/enkripsi JavaScript:
http://tools.vevb.com/code/jscompress
JSMIN ONLINE JS Compression Tool:
http://tools.vevb.com/code/jsmincompress
Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.