Petua lanjutan untuk pengoptimuman prestasi jquery_jquery

Kadang-kadang apabila kami menulis jQuery, untuk kemudahan menulis kod, kami sering mengabaikan tekanan yang dibawa kepada klien semasa pelaksanaan program. Bersama-sama dengan ini datang masalah seperti kelajuan berjalan perlahan atau bahkan ketidakupayaan untuk berjalan pada beberapa penyemak imbas rendah atau komputer rendah.

Oleh itu, adalah perlu bagi kami untuk mengoptimumkan kod jquery kami sendiri untuk mencapai operasi yang lebih pantas dan lancar.

Teknik lanjutan untuk pengoptimuman prestasi jquery yang berikut terutamanya memperkenalkan pengoptimuman prestasi jquery daripada tujuh aspek:

1. Memperkenalkan perpustakaan jQuery melalui CDN (Rangkaian Penghantaran Kandungan)

2. Kurangkan operasi DOM

3 Gunakan JS asli dengan sewajarnya

4. Pengoptimuman pemilih

5. Mencache objek jQuery

6. Tentukan fungsi boleh guna semula

7. Gunakan kaedah tatasusunan untuk melintasi koleksi objek jQuery

Arahan khusus untuk setiap kaedah diterangkan di bawah:

Memperkenalkan perpustakaan jQuery melalui CDN (Rangkaian Penghantaran Kandungan)

Langkah paling mudah untuk meningkatkan prestasi JavaScript dalam tapak web anda ialah memperkenalkan versi terkini pustaka jQuery Versi yang baru dikeluarkan biasanya mempunyai peningkatan prestasi yang lebih baik dan membetulkan beberapa pepijat. Atau memperkenalkannya melalui CDN juga merupakan pilihan yang baik Pengenalan melalui CDN boleh mengurangkan masa memuatkan laman web.

Berikut ialah beberapa perkhidmatan CDN:

<!-- Case 1 - jQuery CDN -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script>
<!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<!-- Case 3 - requesting the latest minor 1.10.x version (only cached for an hour) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js" ></script>
<!-- Case 4 - requesting the absolute latest jQuery version (use with caution) -->
<script src="http://code.jquery.com/jquery.min.js" ></script>

Sesetengah perkhidmatan CDN domestik:

http://www.bootcdn.cn/jquery/
<!--新浪 CDN-->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!--百度 CDN-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--Bootstrap CDN-->
http://www.bootcdn.cn/jquery/

Kurangkan operasi DOM

Walaupun prestasi JavaScript telah dipertingkatkan dengan baik, operasi DOM masih sangat intensif sumber dan operasi DOM perlu dikurangkan. Ini amat penting apabila memasukkan sejumlah besar elemen ke dalam halaman.

Contohnya:

<div id="elem" ></div>

// 不好的方式
//var elem = $('#elem');
//for(var i = 0; i < 100; i++){
// elem.append('<li>element '+i+'</li>');
//}
// 好的方式
var elem = $('#elem' ),
arr = [];
for(var i = 0; i < 100; i++){
arr. push('<li>element ' +i+'</li>' );
}
elem. append(arr. join('' ));

Caching semua elemen dan memasukkannya sekali akan meningkatkan prestasi kerana hanya satu lukisan semula halaman dicetuskan. Perkara yang sama berlaku untuk sifat gaya CSS.

Lagi bacaan: Halaman hujung hadapan tersekat? Ia mungkin disebabkan oleh operasi DOM, anda perlu mengoptimumkan kod

Gunakan JS asli dengan sewajarnya

Mencipta objek jQuery membawa sedikit overhed. Oleh itu, jika prestasi lebih penting, gunakan javascript asli sebanyak mungkin. Dalam beberapa cara, ia mungkin lebih mudah difahami dan memerlukan kurang kod untuk menulis. Contohnya:

// 打印list中的li的id
$('#colors li' ). each(function(){
//将$(this).attr('id')方法替换为直接通过ID属性访问
console. log(this. id);
})

Pengoptimuman Pemilih

Jika anda memerlukan prestasi yang lebih baik tetapi masih mahu menggunakan jQuery, anda boleh mencuba beberapa pengoptimuman pemilih jQuery. Berikut ialah program ujian yang merekodkan masa pelaksanaan pemilih berbeza melalui kaedah konsol konsol.masa dan konsol.timeEnd.

HTML:

<div id="peanutButter" >
<div id="jelly" class=".jellyTime" ></div>
</div>
JS:

//测试程序
var iterations = 10000,
  i;
//--------------------------------------------
//Case 1: 很慢
console.time('Fancy');
for (i = 0; i < iterations; i++) {
  $('#peanutButter div:first');
}
console.timeEnd('Fancy');
//--------------------------------------------
//Case 2: 比较好，但仍然很慢
console.time('Parent-child');
for (i = 0; i < iterations; i++) {
  $('#peanutButter div');
}
console.timeEnd('Parent-child');
//--------------------------------------------
//Case 3: 一些浏览器会比较快
console.time('Parent-child by class');
for (i = 0; i < iterations; i++) {
  // 通过后代Class选择器
  $('#peanutButter .jellyTime');
}
console.timeEnd('Parent-child by class');
//--------------------------------------------
//Case 4: 更好的方式 
console.time('By class name');
21
for (i = 0; i < iterations; i++) {
  // 直接通过Class选择器
  $('.jellyTime');
}
console.timeEnd('By class name');
//--------------------------------------------
//Case 5: 推荐的方式 ID选择器
console.time('By id');
for (i = 0; i < iterations; i++) {
  $('#jelly');
}
console.timeEnd('By id');

Hasil pelaksanaan:

Caching objek jQuery

Setiap kali objek jQuery baharu dibina melalui pemilih, enjin Sizzle pada teras jQuery akan merentasi DOM dan memadankan elemen dom sebenar melalui pemilih yang sepadan. Kaedah ini agak tidak cekap Dalam penyemak imbas moden, anda boleh menggunakan kaedah document.querySelector untuk memadankan elemen yang sepadan dengan menghantar parameter Kelas yang sepadan Walau bagaimanapun, versi di bawah IE8 tidak menyokong kaedah ini. Satu amalan untuk meningkatkan prestasi adalah untuk cache objek jQuery melalui pembolehubah. Contohnya:

<ul id="pancakes" >
     <li>first</li>
     <li>second</li>
     <li>third</li>
     <li>fourth</li>
     <li>fifth</li>
</ul>

JS:

// 不好的方式:
// $('#pancakes li').eq(0).remove();
// $('#pancakes li').eq(1).remove();
// $('#pancakes li').eq(2).remove();
// ------------------------------------
// 推荐的方式:
var pancakes = $('#pancakes li');
pancakes.eq(0).remove();
pancakes.eq(1).remove();
pancakes.eq(2).remove();
// ------------------------------------
// 或者:
// pancakes.eq(0).remove().end()
// .eq(1).remove().end()
// .eq(2).remove().end();

Tentukan fungsi boleh guna semula

Pergi terus ke contoh:

HTML：
<button id="menuButton" >Show Menu!</button>
<a href="#" id="menuLink" >Show Menu!</a>

JS:

//Bad: 
//这个会导致多个回调函数的副本占用内存
$('#menuButton, #menuLink' ). click(function(){
// ...
});
//----------------------------------------------
//Better
function showMenu(){
alert('Showing menu!' );
// Doing something complex here
}
$('#menuButton' ). click(showMenu);
$('#menuLink' ). click(showMenu);

Jika anda mentakrifkan fungsi panggil balik sebaris dengan objek jQuery yang mengandungi berbilang elemen (seperti dalam contoh pertama di atas), fungsi panggil balik akan disimpan dalam memori untuk setiap elemen dalam salinan.

Gunakan kaedah tatasusunan untuk melintasi koleksi objek jQuery

Anda mungkin tidak perasan, tetapi pelaksanaan jQuery yang elegan ini setiap kaedah dikenakan kos dari segi prestasi. Terdapat cara yang lebih pantas untuk melelaran ke atas objek jQuery. Ia dilaksanakan melalui tatasusunan Koleksi objek jQuery ialah objek seperti tatasusunan dengan atribut panjang dan nilai. Anda boleh menguji prestasi melalui program:

HTML:

<ul id="testList" >
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li> 
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <!-- add 50 more -->
</ul>

JS:

var arr = $('li'),
  iterations = 100000;
//------------------------------
// Array实现：  
console.time('Native Loop');
for (var z = 0; z < iterations; z++) {
  var length = arr.length;
  for (var i = 0; i < length; i++) {
    arr[i];
  }
}
console.timeEnd('Native Loop');
//------------------------------
// each实现：  
console.time('jQuery Each');
for (z = 0; z < iterations; z++) {
  arr.each(function(i, val) {
    this;
  });
}
console.timeEnd('jQuery Each');

Hasil:

Anda dapat melihat bahawa traversal melalui pelaksanaan tatasusunan mempunyai kecekapan pelaksanaan yang lebih tinggi.

//------------------------------------------------ -------Kemas kini berterusan...

Di atas adalah ringkasan beberapa pengetahuan yang dikumpul Jika anda mempunyai sebarang cadangan atau soalan, sila tinggalkan mesej untuk perbincangan.