Cara menulis kod jQuery berkualiti tinggi (isu prestasi menggunakan jquery)

Cara menulis kod jQuery berkualiti tinggi (isu prestasi menggunakan jquery)_jquery

WBOY

Lepaskan： 2016-05-16 16:42:56

asal

1254 orang telah melayarinya

1. Petikan jQuery dengan betul

1. Cuba perkenalkan jQuery sebelum hujung badan, bukan di kepala.
2. Gunakan CDN yang disediakan oleh pihak ketiga untuk memperkenalkan jQuery Pada masa yang sama, berhati-hati untuk memperkenalkan fail jQuery tempatan apabila masalah timbul apabila menggunakan CDN pihak ketiga. (Ini boleh diabaikan untuk tapak web yang telah menggunakan CDN. Sekarang setelah lebar jalur pengguna telah dinaik taraf, ini boleh diabaikan. Meletakkannya pada mesin orang lain mungkin tidak stabil)
3. Jika fail skrip diperkenalkan sebelum , tidak perlu menulis document.ready, kerana DOM telah dimuatkan apabila kod js dilaksanakan.

<body>
 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="jquery1.8.min.js">\x3C/script>')</script>
</body>

Salin selepas log masuk

2. Pemilih Optimize jQuery

Penggunaan pemilih jQuery yang cekap dan betul adalah asas untuk menggunakan pemilih jQuery dengan mahir Menguasai pemilih jQuery memerlukan masa tertentu.

<div id="nav" class="nav">
 <a class="home" href="http://www.jb51.net">脚本之家</a>
 <a class="articles" href="http://www.jb51.net/list/list_172_1.htm">jQuery教程</a>
</div>

Salin selepas log masuk

Jika kita memilih elemen dengan kelas sebagai rumah, kita boleh menggunakan kod berikut:

$('.home'); //1
$('#nav a.home'); //2
$('#nav').find('a.home'); //3

Salin selepas log masuk

1. Kaedah 1 akan menyebabkan jQuery mencari elemen dengan rumah kelas dalam keseluruhan DOM, dan prestasi boleh dibayangkan.
2. Kaedah 2 menambah konteks pada elemen yang akan dicari Di sini ia ditukar untuk mencari sub-elemen dengan id nav Prestasi carian telah dipertingkatkan.
3. Kaedah 3 menggunakan kaedah cari, yang lebih cepat, jadi kaedah 3 adalah yang terbaik.

Mengenai keutamaan prestasi pemilih jQuery, pemilih ID lebih pantas daripada pemilih elemen dan pemilih elemen lebih pantas daripada pemilih kelas. Oleh kerana pemilih ID dan pemilih elemen ialah operasi JavaScript asli, tetapi pemilih kelas tidak, anda boleh melihat perbezaan antara konteks cari dan kanak-kanak find().

3. Mencache objek jQuery

Caching objek jQuery boleh mengurangkan carian DOM yang tidak perlu Mengenai perkara ini, anda boleh merujuk kepada caching objek jQuery untuk meningkatkan prestasi.

4. Penggunaan delegasi acara yang betul
Delegasi acara boleh menjadikan acara dilaksanakan dengan lebih baik Mengikat acara pada elemen yang ditambah secara dinamik juga memerlukan perwakilan Dalam versi baharu jQuery, anda disyorkan untuk menggunakan untuk mengikat satu atau lebih pemprosesan acara kepada elemen.

<table id="t">
 <tr>
  <td>我是单元格</td>
 </tr>
</table>

Salin selepas log masuk

Sebagai contoh, jika kita ingin mengikat acara klik ke sel atas, rakan kasual boleh menulisnya seperti berikut:

$('#t').find('td').on('click', function () {
 $(this).css({ 'color': 'red', 'background': 'yellow' });
});

Salin selepas log masuk

Ini akan mengikat peristiwa pada setiap td Dalam ujian mengikat peristiwa klik kepada 100 sel, perbezaan prestasi antara kedua-duanya adalah sebanyak 7 kali Amalan yang baik adalah untuk menulis seperti berikut:

$('#t').on('click', 'td', function () {
 $(this).css({ 'color': 'red', 'background': 'yellow' });
});

Salin selepas log masuk

5. Perkemas kod jQuery
Sebagai contoh, dalam kod di atas, kami telah menggabungkan kod jQuery dengan sewajarnya, dan begitu juga kaedah .attr() dan lain-lain, tetapi kami tidak menulisnya dengan cara berikut:

$('#t').on('click', 'td', function () {
 $(this).css('color', 'red').css('background', 'yellow');
});

Salin selepas log masuk

6. Kurangkan operasi DOM
Apabila anda mula menggunakan jQuery, anda mungkin kerap mengendalikan DOM, yang agak memakan prestasi. Jika kita ingin mengeluarkan jadual dalam badan secara dinamik, sesetengah rakan akan menulis seperti ini:

var $t = $('body');
$t.append('<table>');
$t.append('<tr><td>1</td></tr>');
$t.append('</table>');

Salin selepas log masuk

Amalan baik:

$('body').append('<table><tr><td>1</td></tr></table>');

Salin selepas log masuk

Dengan cara ini, selepas rentetan jadual disambung dan kemudian ditambahkan pada badan, operasi DOM hanya perlu dilakukan sekali. Seorang rakan dalam kumpulan pernah mengalami masalah semasa mengeluarkan di bawah IE kerana ini mengenai penyambungan rentetan, anda boleh merujuk kepada cara terpantas untuk mencipta rentetan.

7. Jangan gunakan jQuery

Fungsi asli sentiasa terpantas Ini tidak sukar untuk difahami.

Mari kita ringkaskan cadangan ini dahulu Setiap cadangan tidak sukar difahami, tetapi ia masih akan mengambil banyak masa untuk meringkaskan secara menyeluruh. Contohnya, dalam segmen kod yang dikurangkan, jika anda perlu mendapatkan tatasusunan baharu daripada tatasusunan berdasarkan syarat, anda boleh menggunakan kaedah $.grep() Jika anda mempunyai petua anda sendiri apabila menggunakan jQuery , sila tinggalkan komen Kongsi dengan semua orang!

Berikut adalah tambahan daripada netizen lain:

Berhati-hati untuk menambah kata kunci var apabila mentakrifkan pembolehubah jQuery
Ini bukan sahaja jQuery, tetapi juga perlu diberi perhatian dalam semua proses pembangunan javascript. Tolong jangan takrifkannya seperti berikut:

$loading = $('#loading'); //Ini ialah definisi global jika anda secara tidak sengaja merujuk nama pembolehubah yang sama di suatu tempat, anda akan tertekan hingga mati

Sila gunakan var untuk mentakrifkan pembolehubah
Jika anda menggunakan berbilang pembolehubah, sila takrifkannya seperti berikut:

Salin kod Kod adalah seperti berikut:

halaman var = 0,

$loading = $('#loading'),

$badan = $('badan');

Jangan tambahkan kata kunci var pada setiap pembolehubah melainkan anda mengalami gangguan obsesif-kompulsif yang teruk
Tentukan pembolehubah jQuery
Apabila mengisytiharkan atau mentakrifkan pembolehubah, sila ingat bahawa jika anda mentakrifkan pembolehubah jQuery, sila tambah simbol $ di hadapan pembolehubah, seperti berikut:

var$loading = $('#loading');

Kelebihan mentakrifkannya seperti ini ialah anda boleh secara berkesan mengingatkan diri anda atau pengguna lain yang membaca kod anda bahawa ini adalah pembolehubah jQuery.

Sila ingat untuk cache semasa mengendalikan DOM

Dalam pembangunan kod jQuery, kami selalunya perlu mengendalikan operasi DOM ialah proses yang sangat memakan sumber, dan ramai orang sering suka menggunakan jQuery seperti ini:

Salin kod Kod adalah seperti berikut:

$('#loading').html('Complete');

$('#loading').fadeOut();

Tiada apa-apa yang salah dengan kod dan anda boleh menjalankannya seperti biasa dan mendapatkan hasil, tetapi sila ambil perhatian bahawa setiap kali anda mentakrifkan dan memanggil $('#loading'), anda sebenarnya membuat pembolehubah baharu jika perlu gunakan semula, Ingat untuk mentakrifkannya dalam pembolehubah, supaya kandungan pembolehubah boleh dicache dengan berkesan, seperti berikut:

Salin kod Kod adalah seperti berikut:

var $loading = $('#loading');

$loading.html('Finished');$loading.fadeOut();

Prestasi akan menjadi lebih baik dengan cara ini.

Gunakan operasi rantai

Kita boleh menulis contoh di atas dengan lebih ringkas:

Salin kod Kod adalah seperti berikut:

var $loading = $('#loading');

$loading.html('Selesai').fadeOut();

Peringkat kod jQuery

Cuba integrasikan beberapa kod bersama-sama, sila jangan kod seperti ini:

Salin kod Kod adalah seperti berikut:

//! ! Penjahat $button.click(function(){

$target.css('lebar','50%');

$target.css('sempadan','1px pepejal #202020');

$target.css('color','#fff');

});

hendaklah ditulis seperti ini:

Salin kod Kod adalah seperti berikut:

$button.click(function(){

$target.css({'lebar':'50%','sempadan':'1px pepejal #202020','warna':'#fff'});

});

Elakkan menggunakan pemilih jenis global

Tolong jangan tulis dengan cara berikut: $('.something > *');
Lebih baik menulis seperti ini: $('.something').children();

Jangan bertindih berbilang ID

Tolong jangan tulis seperti berikut: $('#something #children');
Ini sudah memadai: $('#kanak-kanak');

Gunakan pertimbangan logik || atau && untuk mempercepatkan

Tolong jangan tulis seperti berikut:

Salin kod Kod adalah seperti berikut:

jika(!$sesuatu) {

$sesuatu = $('#sesuatu ');

}

Prestasi penulisan adalah lebih baik dengan cara ini:

$sesuatu= $sesuatu|| $('#sesuatu');

Gunakan kod sesedikit mungkin

Daripada menulis seperti ini: if(string.length > 0){..}

Lebih baik menulisnya seperti ini: if(string.length){..}

Cuba gunakan kaedah .on
Jika anda menggunakan versi pustaka kelas jQuery yang lebih baharu, sila gunakan .on. Sebarang kaedah lain akhirnya dilaksanakan menggunakan .on.

Cuba gunakan versi terkini jQuery
Versi terkini jQuery mempunyai prestasi yang lebih baik, tetapi versi terkini mungkin tidak menyokong ie6/7/8, jadi anda perlu memilih mengikut situasi sebenar.

Cuba gunakan Javascript asli
Jika fungsi yang disediakan oleh jQuery juga boleh dilaksanakan menggunakan Javascript asli, adalah disyorkan untuk menggunakan JavaScript asli untuk melaksanakannya.