Enam Amalan Terbaik jQuery untuk Peningkatan Prestasi

jQuery adalah salah satu daripada yang Perpustakaan JavaScript paling popular hari ini. APInya sangat mudah digunakan untuk membawa kepada keluk pembelajaran yang tidak begitu curam. Banyak projek menggunakan kod jQuery dan bukan langsung menggunakan JavaScript vanila untuk membawa fungsi yang dinamik.

Tetapi jQuery mempunyai kekurangannya juga. Ia boleh membawa kepada beberapa masalah prestasi jika digunakan dengan sembarangan seperti bahasa yang berasaskannya. Jawatan ini akan menyenaraikan beberapa amalan terbaik dalam menggunakan jQuery yang akan membantu kami mengelakkan sebarang masalah prestasi.

1. Skrip beban malas apabila diperlukan

Pelayar menjalankan JavaScript sebelum membuat pokok DOM dan melukis piksel pada skrin, kerana skrip boleh menambah elemen baru ke halaman atau menukar susun atur atau gaya beberapa nod DOM. Oleh itu, oleh memberikan penyemak imbas kurang skrip untuk dilaksanakan semasa beban halaman, kita boleh mengurangkan masa yang diperlukan untuk penciptaan dan lukisan pokok DOM akhir, selepas itu pengguna akan berada dapat melihat halaman tersebut.

Salah satu cara untuk melakukan ini dalam jQuery adalah dengan menggunakan $ .getScript untuk memuatkan mana-mana fail skrip pada masa keperluannya daripada semasa muat halaman.

$ .getScript ("skrip / gallery.js", panggil balik); 

Ini adalah fungsi ajax yang akan mendapat satu fail skrip tunggal apabila anda menginginkannya, tetapi perhatikan bahawa fail yang diambil tidak di cache. Untuk membolehkan caching untuk getScript anda perlu mendayakan yang sama untuk semua permintaan ajax. Anda boleh melakukannya dengan menggunakan kod di bawah:

$ .ajaxSetup (cache: true); 

2. Elakkan $ (window) .load () jika skrip anda tidak memerlukan sebarang sub-sumber halaman

The $ (dokumen) .ready () bersamaan dengan DOMContentLoaded (di mana DOMContentLoaded terdapat) dan $ (window) .load () kepada Muatkan. Yang pertama dipecat apabila DOM sendiri halaman dimuatkan, tetapi bukan aset luaran seperti imej dan stylesheet. Yang kedua dipecat apabila semua halaman dibuat, termasuk kandungannya sendiri dan sub-sumbernya dimuatkan.

Jadi, jika anda menulis skrip yang bergantung pada sub-sumber halaman, seperti mengubah warna latar belakang a div yang digayakan oleh stylesheet luaran, yang terbaik untuk digunakan $ (window) .load ().

Tetapi, jika tidak demikian, lebih baik untuk berpegang teguh $ (dokumen) .ready () kerana, jQuery memanggilnya sedia pengendali acara sama ada anda gunakan $ (dokumen) .ready () atau tidak, jadi gunakannya apabila anda boleh.

3. Gunakan lepaskan untuk mengalih keluar elemen dari DOM yang perlu diubah.

“Reflow” adalah istilah yang merujuk kepada perubahan susunatur dalam laman web, ketika pelayar menyusun elemen halaman untuk menampung elemen baru, menyesuaikan dengan perubahan struktur elemen, mengisi jurang yang ditinggalkan oleh elemen yang dihapus, atau tindakan lain yang memerlukan perubahan susun atur dalam halaman. reflow adalah mahal proses penyemak imbas.

Kita boleh mengurangkan tidak. daripada reflows yang disebabkan oleh perubahan struktur kepada elemen dengan melaksanakan perubahan di atasnya selepas mengambilnya dari aliran halaman dan meletakkannya kembali apabila ia selesai. Jika anda menambah berbilang baris ke meja satu demi satu ia akan menyebabkan banyak reflows. Jadi lebih baik ambil jadual DOM itu, tambah baris kepadanya dan letakkan semula ke DOM; ini akan mengurangkan reflows.

jQuery's lepaskan () membolehkan kami mengeluarkan elemen dari halaman, ia berbeza daripada keluarkan () kerana ia akan menyimpan data yang dikaitkan dengan elemen untuk apabila ia perlu ditambahkan pada halaman kemudian. Unsur yang terpisah boleh dimasukkan semula ke halaman apabila ia telah diubah suai.

4. Gunakan css () untuk menetapkan ketinggian atau lebar bukan ketinggian () dan lebar ()

Jika anda menetapkan ketinggian atau lebar unsur dalam jQuery, saya cadangkan anda menggunakannya css () berfungsi kerana menetapkan nilai tersebut menggunakan ketinggian () dan lebar () akan menyebabkan reflows tambahan disebabkan oleh mengakses beberapa ciri susun atur dalam fungsi tersebut computeStyleTests dalam jQuery (diuji dalam ver terbaru)..

Untuk kod p.height ("300px"); Berikut adalah reflows.

Untuk p.css ("height": "300px");

computeStyleTests digunakan untuk melakukan beberapa ujian sokongan. Ia juga dipanggil sementara mendapat ketinggian & lebar menggunakan kedua-duanya css () dan ketinggian kelebaran() , tetapi untuk menetapkan ia hanya dipanggil ketinggian kelebaran() yang mungkin tidak diperlukan, jadi gunakan css () sebaliknya.

5. Jangan mengakses sifat susun atur yang tidak perlu

Mengakses sifat susun atur seperti ketinggian, lebar, margin, dan sebagainya akan mencetuskan reflow dalam halaman. Alasannya apabila anda meminta penyemak imbas bagi mana-mana sifat susun atur, ia pastikan anda mendapat nilai yang dikemas kini (sekiranya nilai telah dibatalkan sebelumnya) oleh menghitung semula nilai-nilai dan menerapkan perubahan susun atur.

Jadi sama ada anda menggunakan jQuery atau JavaScript vanila, berhati-hati untuk mengakses sifat susun atur yang tidak perlu terutamanya dalam gelung atau akibatnya membuat perubahan gaya.

6. Menggunakan caching di mana anda boleh

Beberapa fungsi jQuery datang dengan mekanisme caching yang dapat digunakan dengan baik. Permintaan Ajax melakukan cache sumber, tetapi tidak tersedia skrip dan jsonp, jadi jika anda mahu caching merentas semua permintaan ajax anda, anda mungkin mahu menetapkannya secara global seperti di bawah.

Juga ambil perhatian bahawa jika anda mengambil sumber menggunakan jawatan ia tidak akan di-cache walaupun anda mengaktifkan caching dengan persediaan di atas.

Seperti yang saya nyatakan sebelum ini, lepaskan () cache data yang dikaitkan dengan elemen yang akan dibuang tidak seperti keluarkan ();sembunyikan () cache CSS awal paparan nilai elemen sebelum menyembunyikannya supaya ia dapat dipulihkan kemudian tanpa kehilangan data.

Kesimpulannya

Salah satu cara anda boleh memastikan bahawa anda menggunakan kod jQuery yang paling berkesan untuk keperluan anda adalah menunggu sehingga anda sebenarnya menjalankan kod anda dan perhatikan jika terdapat sebarang masalah prestasi atau tidak. Sekiranya ada, gunakan alat-alat prestasi dan debugger untuk mengesan akar masalah.

Oleh kerana jQuery adalah seperti kepompong untuk JavaScript dengan fungsi tambahan untuk keserasian dan ciri penyemak imbas, sukar untuk mendiagnosis masalah tanpa alat ini.