Tujuh perkara yang perlu anda lakukan untuk meningkatkan prestasi jQuery_jquery

Lakukan tujuh perkara untuk membantu anda meningkatkan prestasi jQuery Adakah anda ingin tahu yang mana?

1. Tambah Di Luar Gelung

Apa-apa sahaja yang melibatkan DOM mempunyai harga. Jika anda menambahkan banyak elemen pada DOM, anda perlu menambahkan kesemuanya sekali gus daripada melakukannya beberapa kali. Masalah biasa timbul apabila menambahkan elemen pada gelung.

$.each( myArray, function( i, item ) {

  var newListItem = "<li>" + item + "</li>";
 
 $( "#ballers" ).append( newListItem );
 });

Teknik biasa ialah menggunakan serpihan dokumen. Pada setiap lelaran gelung, tambahkan elemen pada serpihan dan bukannya elemen DOM. Apabila gelung tamat, tambahkan serpihan pada elemen DOM.

var frag = document.createDocumentFragment();

$.each( myArray, function( i, item ) {

  var newListItem = document.createElement( "li" );
  var itemText = document.createTextNode( item );

  newListItem.appendChild( itemText );

  frag.appendChild( newListItem );

});

$( "#ballers" )[ 0 ].appendChild( frag );

Satu lagi helah mudah ialah membina rentetan secara berterusan pada setiap lelaran gelung. Apabila gelung tamat, tetapkan HTML elemen DOM kepada rentetan ini.

var myHtml = "";

$.each( myArray, function( i, item ) {

  myHtml += "<li>" + item + "</li>";

});

$( "#ballers" ).html( myHtml );

Sudah tentu ada teknik lain yang anda boleh cuba. Tapak yang dipanggil jsperf menyediakan saluran yang baik untuk menguji sifat ini. Tapak ini membolehkan anda menanda aras setiap teknik dan memvisualisasikan hasil prestasi merentas platformnya.

2. Panjang Cache Semasa Gelung

Dalam gelung untuk, jangan akses sifat kepanjangan tatasusunan setiap kali ia harus dicache terlebih dahulu.

var myLength = myArray.length;

for ( var i = 0; i < myLength; i++ ) {

  // do stuff

}

3. Tanggalkan Elemen untuk Bekerja dengannya

Memanipulasi DOM adalah perlahan, jadi anda mahu melakukannya dengan penjajaran sesedikit mungkin. jQuery memperkenalkan kaedah yang dipanggil detach() dalam versi 1.4 untuk membantu menyelesaikan masalah ini, yang membolehkan anda menanggalkan elemen daripada DOM apabila beroperasi padanya.

var $table = $( "#myTable" );
var $parent = $table.parent();

$table.detach();

// ... add lots and lots of rows to table

$parent.append( $table );

4. Jangan Bertindak Atas Elemen Tidak Hadir

Jika anda merancang untuk menjalankan banyak kod pada pemilih kosong, jQuery tidak akan memberi anda sebarang petunjuk - ia akan terus melaksanakan seolah-olah tiada ralat berlaku. Terpulang kepada anda untuk mengesahkan berapa banyak elemen yang terkandung dalam pemilih.

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();

// Better:
var $mySelection = $( "#nosuchthing" );

if ( $mySelection.length ) {

  $mySelection.slideUp();

}

// Best: Add a doOnce plugin.
jQuery.fn.doOnce = function( func ) {

  this.length && func.apply( this );

  return this;

}

$( "li.cartitems" ).doOnce(function() {


  // make it ajax! \o/


});

Panduan ini amat berguna untuk widget UI jQuery yang memerlukan banyak overhed apabila pemilih tidak mengandungi elemen.

5. Pemilih Optimumkan

Pengoptimuman pemilih tidak begitu penting seperti pada masa lalu, kerana banyak penyemak imbas melaksanakan kaedah document.querySelectorAll() dan jQuery mengalihkan beban pemilih kepada penyemak imbas. Tetapi masih ada beberapa petua yang perlu diingat.

Pemilih berasaskan ID

Adalah yang terbaik untuk memulakan pemilih anda dengan ID.

// Fast:
 $( "#container div.robotarm" );
 
 // Super-fast:
 $( "#container" ).find( "div.robotarm" );

Menggunakan kaedah .find() akan menjadi lebih pantas kerana pemilih pertama telah diproses tanpa melalui enjin pemilih yang bising--ID-Only pemilih sudah menggunakan kaedah document.getElementById() Pemprosesan adalah pantas kerana ia berasal dari pelayar.

Kekhususan

Terangkan bahagian kanan pemilih dengan seberapa terperinci yang mungkin, dan lakukan sebaliknya untuk bahagian kiri.

// Unoptimized:
$( "div.data .gonzalez" );
 
// Optimized:
 $( ".data td.gonzalez" );

Cuba gunakan bentuk tag.class untuk menerangkan pemilih di sebelah kanan pemilih dan cuba gunakan hanya tag atau .class di sebelah kiri.

Elakkan penggunaan kekhususan yang berlebihan

 $( ".data table.attendees td.gonzalez" );
 
 // Better: Drop the middle if possible.
 $( ".data td.gonzalez" );

Mendapatkan "DOM" sentiasa membantu meningkatkan prestasi pemilih kerana enjin pemilih tidak perlu melakukan banyak lelaran semasa mencari elemen.

Elakkan menggunakan pemilih generik

Prestasi akan sangat terjejas jika pemilih padan secara eksplisit atau tersirat dalam julat yang tidak ditentukan.

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
 
 $( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.
复制代码
6. Use Stylesheets for Changing CSS on Many Elements

Jika anda menggunakan kaedah .css() untuk menukar CSS lebih daripada 20 elemen, anda harus mempertimbangkan untuk menambah teg gaya pada halaman sebagai alternatif. Tindakan sedemikian boleh meningkatkan kelajuan hampir 60%.

// Fine for up to 20 elements, slow after that:
$( "a.swedberg" ).css( "color", "#0769ad" );

// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
  .appendTo( "head" );

7. Jangan Anggap jQuery sebagai Kotak Hitam

Di atas ialah tujuh perkara yang perlu anda lakukan untuk meningkatkan prestasi jQuery.