Analisis teknik pengoptimuman prestasi jQuery_jquery

Artikel ini menganalisis teknik pengoptimuman prestasi jQuery dengan lebih terperinci. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. Gunakan versi terkini perpustakaan kelas jQuery

Versi baharu jQuery akan mempunyai pembetulan pepijat dan beberapa pengoptimuman berbanding versi sebelumnya Walau bagaimanapun, perlu diingat bahawa selepas menukar versi, jangan lupa untuk menguji kod anda serasi ke belakang.

2. Gunakan pemilih yang sesuai

Prestasi pemilih jQuery yang terbaik hingga terburuk adalah seperti berikut:

pemilih id, seperti $('#id', konteks)
Pemilih teg, seperti $('p', konteks)
pemilih kelas, seperti $('.class', konteks)
Pemilih atribut, seperti $('[attribute=value]', konteks)
Pemilih kelas pseudo, seperti $(':hidden', konteks)

Tambahan dan Nota:

Cuba tentukan konteks untuk pemilih untuk mengecilkan skop elemen kedudukan
Elakkan pengubahsuaian berulang kod ralat: var $el = $('#list #item1')
Elakkan teg atau kelas mengubah suai id, kod ralat: var $el = $('ul #item1')
Jika anda menggunakan pemilih atribut, cuba tentukan pemilih teg untuk mempercepatkan akses Kod yang betul: var $el = $('a[title="link"]')

3. Objek cache

Berikut ialah cara untuk berprestasi buruk:

$('#home').css(...);
$('#home').bind('click', function() {});
$('#home').addClass(...);

Nota: jQuery akan mencari DOM semasa proses mencipta setiap pemilih, memakan masa dan prestasi.

Cara yang lebih baik:

var $homeLink = $('#home', context);
$homeLink.css(...);
$homeLink.bind('click', function() {});
$homelink.addClass(...);

Nota: Jangan biarkan pemilih yang sama muncul beberapa kali dalam kod anda.

4. Operasi DOM semasa gelung

Menggunakan jQuery, anda boleh menambah, memadam atau mengubah suai nod DOM dengan mudah, tetapi apabila memproses nod dalam beberapa gelung, seperti for(), while() atau $.each(), terdapat contoh di bawah yang patut anda perhatikan :

var $list = $('#list');
for(var i = 0; i < 100; i++) {
  $list.append('<li>' + i + '</li>');
}

Nota: Tambahkan li nod 100 kali dalam satu gelung Operasi ini menggunakan banyak prestasi, jadi cara yang lebih baik ialah mencipta semua nod yang akan ditambahkan sebelum memasukkannya ke dalam pepohon DOM, dan kemudian menambahnya pada DOM. pokok sekali gus. Cara yang lebih baik:

var $list = $('#list'),
  fragment = '';
for(var i = 0; i < 100; i++) {
  fragment += '<li>' + i + '</li>';
}
$list.append(fragment);

5. Menggunakan objek jQuery dalam tatasusunan

Gunakan pemilih jQuery untuk mendapatkan hasil yang merupakan objek jQuery. Dari segi prestasi, adalah disyorkan untuk menggunakan gelung mudah untuk atau sementara dan bukannya $.each(), yang boleh menjadikan kod anda lebih pantas.

Juga ambil perhatian: Semakan panjang ialah cara untuk menyemak sama ada objek jQuery wujud.

var $list = $('#list');
if($list) {  //总是true
  //do something
}
if($list.length) { //拥有元素才返回true
  //do something
}

6. Ejen Acara

Setiap acara JavaScript (seperti klik, tetikus) akan menggelembung ke nod induk. Ini berguna apabila kita perlu memanggil fungsi yang sama pada berbilang elemen.

...
<ul id="list">
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  ...
</ul>
...

var $item1 = $('#item1'),
  $item2 = $('#item2'),
  $item3 = $('#item3');
  ...

$item1.click(function() {...});
$item2.click(function() {...});
$item3.click(function() {...});
...

Nota: Dengan cara ini, jika terdapat 100 li, 100 acara akan terikat. Jelas sekali, ia tidak saintifik dan menyebabkan banyak kehilangan prestasi.

Cara yang lebih baik ialah: hanya ikat peristiwa pada nod induk ul li sekali, kemudian dapatkan elemen semasa yang diklik melalui event.target.

var $list = $('#list');
$list.click(function(e) {
  var $currentItem = $(e.target);  //e.target捕捉到当前触发事件的目标元素
  ...
});

7. Tukar kod anda kepada pemalam jQuery

Jika anda menghabiskan masa menulis kod jQuery yang serupa setiap kali, anda boleh mempertimbangkan untuk menukar kod serupa ini menjadi pemalam, yang boleh menjadikan kod anda lebih boleh digunakan semula dan boleh membantu anda menyusun kod anda dengan berkesan.

8 Gunakan tatasusunan Javascript join() untuk menyambung rentetan

Apabila memproses rentetan panjang, menggunakan kaedah join() membantu mengoptimumkan prestasi.

var arr = [];
for(var i = 0; i < 100; i++){
  arr[i] = '<li>' + i + '</li>';
}
$list.html(arr.join(''));

9. Penggunaan atribut data HTML5 yang munasabah

Atribut data HTML5 boleh membantu kami memasukkan data, terutamanya pertukaran data antara bahagian depan dan belakang. Kaedah data() jQuery menggunakan atribut HTML5 untuk mendapatkan data secara automatik.

...
<a id="info" data-info-index="23" data-role="linkInfo"></a>
...

var $infoLink = $('#info');
var infoIndex = $infoLink.data('info-index');
var type = $infoLink.data('linkInfo');

10 Cuba gunakan kaedah JavaScript asli

Contohnya:

$(this).css('color': 'blue');

Dioptimumkan kepada:

this.style.color = 'blue';

Contohnya:

$('<p></p>');

Dioptimumkan kepada:

$(document.createElement('p'));

11. Memampatkan JavaScript

Mampatkan fail JavaScript menggunakan alat pemampatan.
Apabila menerbitkan projek anda, anda harus menggunakan versi "diperkecilkan" fail JavaScript anda.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.