Meneroka isu kecekapan pelaksanaan Javascript_Pengetahuan asas

Javascript ialah bahasa yang sangat fleksibel. Kami boleh menulis pelbagai gaya kod mengikut kesukaan kami , selesaikan masalah biasa dan mudah dielakkan

　Kecekapan pelaksanaan JavaScript sendiri
Rantaian skop, penutupan, warisan prototaip, eval dan ciri-ciri lain dalam Javascript bukan sahaja menyediakan pelbagai fungsi ajaib, tetapi juga membawa pelbagai masalah kecekapan Jika digunakan secara sembarangan, ia akan membawa kepada kecekapan pelaksanaan yang rendah.

　1. Import global
Kami akan menggunakan beberapa pembolehubah global (tetingkap, dokumen, pembolehubah global tersuai, dsb.) lebih kurang semasa proses pengekodan Sesiapa sahaja yang memahami rantaian skop JavaScript mengetahui bahawa mengakses pembolehubah global dalam skop tempatan memerlukan Keseluruhan skop. rantaian dilalui lapisan demi lapisan sehingga skop peringkat atas, dan kecekapan capaian pembolehubah tempatan akan menjadi lebih pantas dan lebih tinggi Oleh itu, apabila beberapa objek global kerap digunakan dalam skop tempatan, ia boleh diimport ke dalam skop tempatan, untuk. contoh:

Salin kod Kod adalah seperti berikut:

//1. Lulus dalam modul sebagai parameter
(fungsi(tetingkap,$){
var xxx = window.xxx; $("#xxx1").xxx();
$("#xxx2").xxx();
})(tetingkap,jQuery);
//2. Simpan sementara dalam pembolehubah tempatan
fungsi(){
var doc = dokumen; var global = window.global; }



　
2

Kita semua tahu bahawa eval boleh memproses rentetan sebagai kod js Dikatakan bahawa kod yang dilaksanakan menggunakan eval adalah lebih daripada 100 kali lebih perlahan daripada kod tanpa eval (saya belum menguji kecekapan khusus, pelajar yang berminat boleh mengujinya)

Kod JavaScript akan melakukan operasi "pra-penyusun" yang serupa sebelum pelaksanaan: ia mula-mula akan mencipta objek aktif dalam persekitaran pelaksanaan semasa dan menetapkan pembolehubah tersebut yang diisytiharkan dengan var sebagai atribut objek aktif, tetapi pada masa ini ini pembolehubah Nilai tugasan semuanya tidak ditentukan, dan fungsi yang ditakrifkan dengan fungsi juga ditambah sebagai sifat objek aktif, dan nilainya adalah betul-betul takrifan fungsi tersebut. Walau bagaimanapun, jika anda menggunakan "eval", kod dalam "eval" (sebenarnya rentetan) tidak dapat mengecam konteksnya terlebih dahulu dan tidak boleh dihuraikan dan dioptimumkan terlebih dahulu, iaitu, operasi yang telah dikompilasi tidak boleh dilakukan. Oleh itu, prestasinya juga akan sangat berkurangan
Sebenarnya, orang jarang menggunakan eval pada masa kini Apa yang saya ingin bincangkan di sini ialah dua senario seperti eval (Fungsi baharu{}, setTimeout, setInterver)

Salin kod

Kod adalah seperti berikut: setTimtout("makluman(1)",1000); setInterver("alert(1)",1000); (Fungsi baharu("makluman(1)"))();

Kecekapan pelaksanaan jenis kod di atas akan menjadi agak rendah, jadi adalah disyorkan untuk terus menghantar kaedah tanpa nama atau rujukan kaedah kepada kaedah setTimeout

　
3 Selepas penutupan tamat, lepaskan pembolehubah yang tidak lagi dirujuk

Salin kod

Kod adalah seperti berikut:

var f = (fungsi(){ var a = {nama:"var3"}; var b = ["var1","var2"]; var c = document.getElementByTagName("li"); //****Pembolehubah lain //***Beberapa operasi var res = function(){ makluman(a.name);

}

Kembalikan semula
})()



Nilai pulangan pembolehubah f dalam kod di atas ialah kaedah yang dikembalikan dalam penutupan yang terdiri daripada fungsi yang dilaksanakan serta-merta Pembolehubah ini mengekalkan rujukan kepada semua pembolehubah (a, b, c, dsb.) dalam penutupan ini, jadi Kedua-dua pembolehubah ini akan sentiasa berada dalam ruang memori, terutamanya rujukan kepada elemen dom, yang akan menggunakan banyak memori Walau bagaimanapun, kami hanya menggunakan nilai pembolehubah dalam res, jadi sebelum penutupan kembali, kami boleh Lepaskan pembolehubah lain





Salin kod

Kod adalah seperti berikut:

var f = (fungsi(){
var a = {nama:"var3"}; var b = ["var1","var2"]; var c = document.getElementByTagName("li"); //****Pembolehubah lain
//***Beberapa operasi
//Lepaskan pembolehubah yang tidak lagi digunakan sebelum penutupan kembali
b = c = null; var res = function(){
makluman(a.name);
           }
Kembalikan semula
})()




Kecekapan Js mengendalikan dom

Dalam proses pembangunan web, kesesakan kecekapan pelaksanaan bahagian hadapan selalunya dalam operasi DOM adalah perkara yang sangat memakan prestasi. Bagaimana kita boleh menjimatkan prestasi sebanyak mungkin semasa operasi DOM.

1. Kurangkan aliran semula Apakah reflow?
Apabila sifat elemen DOM berubah (seperti warna), penyemak imbas akan memberitahu pemaparan untuk melukis semula elemen yang sepadan Proses ini dipanggil mengecat semula.

Jika perubahan melibatkan reka letak elemen (seperti lebar), penyemak imbas membuang atribut asal, mengira semula dan menghantar keputusan untuk membuat lukis semula elemen halaman Proses ini dipanggil aliran semula.

Kaedah untuk mengurangkan aliran semula

Mula-mula padamkan elemen daripada dokumen, dan kemudian letakkan semula elemen itu ke kedudukan asalnya selepas melengkapkan pengubahsuaian (apabila sejumlah besar operasi aliran semula dilakukan pada elemen dan sub-elemennya, kesan kaedah 1 dan 2 akan menjadi lebih jelas)

Tetapkan paparan elemen kepada "tiada", dan kemudian tukar paparan kepada nilai asal selepas melengkapkan pengubahsuaian

Apabila mengubah suai berbilang atribut gaya, tentukan kelas kelas dan bukannya mengubah suai atribut gaya berbilang kali (disyorkan untuk pelajar tertentu)

Gunakan documentFragment
apabila menambahkan sejumlah besar elemen pada halaman Contohnya

Salin kod

Kod adalah seperti berikut: untuk(var i=0;i<100:i ){

var child = docuemnt.createElement("li");

child.innerHtml = "kanak-kanak";

document.getElementById("parent").appendChild(anak);

}

Apabila kod perlu mengakses maklumat status elemen beberapa kali, kami boleh menyimpannya buat sementara waktu dalam pembolehubah jika status kekal tidak berubah Ini boleh mengelakkan overhed memori yang disebabkan oleh berbilang akses kepada DOM. Contoh biasa ialah:

Apabila mencari elemen DOM, cuba elakkan merentasi kawasan besar elemen halaman, cuba gunakan pemilih yang tepat atau tentukan konteks untuk mengecilkan skop carian, ambil jquery sebagai contoh

Gunakan pemilih padanan yang kurang kabur: seperti $("[name*='_fix']") dan lebih banyak lagi gunakan pemilih kompaun seperti id dan secara beransur-ansur mengecilkan julat $("li.active"), dsb. Tentukan konteks: seperti $("#parent .class"), $(".class",$el), dsb.

4. Gunakan delegasi acara

Senario penggunaan: Senarai dengan bilangan rekod yang besar Setiap rekod perlu diikat pada peristiwa klik untuk melaksanakan fungsi tertentu selepas tetikus diklik halaman Terdapat sejumlah besar pendengar acara, yang akan menjadi tidak cekap.

Prinsip asas: Kita semua tahu bahawa peristiwa dalam spesifikasi DOM akan menggelembung, yang bermaksud bahawa tanpa menghalang peristiwa menggelegak secara aktif, peristiwa mana-mana elemen akan menggelembung ke atas langkah demi langkah mengikut struktur pepohon DOM . Objek acara juga menyediakan event.target (srcElement di bawah IE) untuk menunjuk ke sumber acara, jadi walaupun kita mendengar acara pada elemen induk, kita boleh mencari elemen asal yang mencetuskan peristiwa Ini adalah prinsip asas delegasi. Tanpa berlengah lagi, berikut ialah contoh

Berdasarkan prinsip pemantauan acara yang diperkenalkan di atas, mari kita tulis semula

Sudah tentu, kita tidak perlu menilai sumber acara setiap kali Kita boleh mengabstrakkannya dan menyerahkannya kepada kelas alat untuk diselesaikan. Kaedah delegate() dalam jquery melaksanakan fungsi ini

Sintaksnya seperti ini $(selector).delegate(childSelector, event, data, function), contohnya:

Salin kod

Kod adalah seperti berikut: $("div").delegate("butang","klik",function(){ $("p").slideToggle();

});

Perihalan parameter (dipetik daripada w3school)
Perihalan Parameter
childSelector diperlukan. Menentukan satu atau lebih elemen anak yang mana pengendali acara dilampirkan.
acara diperlukan. Menentukan satu atau lebih acara untuk dilampirkan pada elemen. Berbilang nilai acara dipisahkan oleh ruang. Mesti acara yang sah.
data adalah pilihan. Menentukan data tambahan untuk dihantar ke fungsi.
fungsi yang diperlukan. Menentukan fungsi untuk dijalankan apabila peristiwa berlaku.
Petua: Satu lagi faedah perwakilan acara ialah walaupun peristiwa yang dicetuskan pada elemen ditambah secara dinamik selepas pengikatan acara juga boleh dipantau, jadi tidak perlu untuk mengikat acara kepada elemen setiap kali ia ditambahkan secara dinamik pada halaman