Enam Praktik Terbaik jQuery untuk Peningkatan Kinerja
jQuery adalah salah satunya itu perpustakaan JavaScript paling populer saat ini. API-nya sangat mudah digunakan yang mengarah ke kurva belajar yang tidak terlalu curam. Banyak proyek menggunakan kode jQuery alih-alih langsung menggunakan JavaScript vanilla untuk menghadirkan fungsionalitas dinamis.
Tetapi jQuery juga memiliki kekurangannya. Ini dapat menyebabkan beberapa masalah kinerja jika digunakan secara sembarangan sama seperti bahasa yang digunakannya. Posting ini akan mencantumkan beberapa praktik terbaik dalam menggunakan jQuery yang akan membantu kami menghindari masalah kinerja.
1. Muat skrip saat dibutuhkan
Browser menjalankan JavaScript sebelum membuat pohon DOM dan mengecat piksel pada layar, karena skrip dapat menambahkan elemen baru ke halaman atau mengubah tata letak atau gaya beberapa node DOM. Jadi, oleh memberikan skrip yang lebih sedikit pada browser untuk dieksekusi saat memuat halaman, kita dapat kurangi waktu yang dibutuhkan untuk pembuatan dan lukisan pohon DOM terakhir, setelah itu pengguna akan dapat melihat halaman.
Salah satu cara untuk melakukan ini di jQuery adalah dengan menggunakan $ .getScript untuk memuat file skrip apa pun pada saat dibutuhkan alih-alih saat memuat halaman.
$ .getScript ("script / gallery.js", callback); Ini adalah fungsi ajax yang akan mendapatkan file skrip tunggal saat Anda menginginkannya, tetapi perhatikan bahwa file yang diambil tidak di-cache. Untuk mengaktifkan caching getScript Anda harus mengaktifkan yang sama untuk semua permintaan ajax. Anda dapat melakukannya dengan menggunakan kode di bawah ini:
$ .ajaxSetup (cache: true);
2. Hindari $ (jendela) .load () jika skrip Anda tidak memerlukan sub-sumber halaman
Itu $ (dokumen) .ready () setara dengan DOMContentLoaded (dimana DOMContentLoaded tersedia) dan $ (jendela) .load () untuk Beban. Yang pertama dipecat ketika DOM halaman sendiri dimuat, tetapi tidak aset eksternal seperti gambar dan stylesheet. Yang kedua dipecat ketika semua halaman dibuat, termasuk kontennya sendiri dan sub-sumber dayanya dimuat.
Jadi, jika Anda menulis skrip yang bergantung pada sub-sumber halaman, seperti mengubah warna latar belakang a div itu ditata oleh stylesheet eksternal, yang terbaik untuk digunakan $ (jendela) .load ().
Tetapi, jika bukan itu masalahnya, lebih baik berpegang teguh pada itu $ (dokumen) .ready () karena, jQuery memanggilnya siap pengendali acara apakah Anda gunakan $ (dokumen) .ready () atau tidak, jadi gunakan kapan saja.
3. Gunakan melepaskan untuk menghapus elemen dari DOM yang perlu diubah.
“Reflow” adalah istilah yang merujuk pada perubahan tata letak di halaman web, ini saat browser mengatur ulang elemen halaman untuk mengakomodasi elemen baru, menyesuaikan dengan perubahan struktural suatu elemen, mengisi celah yang ditinggalkan oleh elemen yang dihapus, atau tindakan lain yang membutuhkan perubahan tata letak di halaman. reflow adalah sebuah mahal proses browser.
Kita bisa mengurangi no. reflows yang disebabkan oleh perubahan struktural pada suatu elemen dengan melakukan perubahan pada elemen tersebut setelah mengeluarkannya dari aliran halaman dan memasukkannya kembali setelah selesai. Jika Anda menambahkan beberapa baris ke tabel satu per satu, itu akan menyebabkan banyak reflow. Jadi lebih baik ambil tabel keluar dari pohon DOM, tambahkan baris ke sana dan kembalikan ke DOM; ini akan mengurangi reflows.
jQuery's melepaskan() memungkinkan kami menghapus elemen dari halaman, berbeda dari menghapus() karena itu akan menyimpan data yang terkait dengan elemen ketika perlu ditambahkan ke halaman nanti. Elemen yang terlepas kemudian dapat dimasukkan kembali ke halaman ketika telah dimodifikasi.
4. Gunakan css () untuk mengatur tinggi atau lebar, bukan tinggi() dan lebar()
Jika Anda mengatur tinggi atau lebar elemen dalam jQuery, saya sarankan Anda menggunakan css () berfungsi karena mengatur nilai-nilai tersebut menggunakan tinggi() dan lebar() akan menyebabkan reflows tambahan karena mengakses beberapa properti tata letak pada fungsi computeStyleTests di jQuery (diuji dalam ver terbaru.).
Untuk kodenya p.tinggi ("300px"); di sini adalah reflows.
Untuk p.css ("height": "300px");
computeStyleTests digunakan untuk melakukan beberapa tes dukungan. Ini juga disebut saat mendapatkan tinggi & lebar menggunakan kedua css () dan tinggi lebar() , tapi untuk pengaturan hanya dipanggil untuk tinggi lebar() yang mungkin tidak diperlukan, jadi gunakan css () sebagai gantinya.
5. Jangan mengakses properti tata letak yang tidak perlu
Mengakses properti tata letak seperti tinggi, lebar, margin, dll. Akan memicu reflow di halaman. Alasannya adalah setiap kali Anda meminta browser untuk salah satu properti tata letak, itu memastikan Anda mendapatkan nilai yang diperbarui (dalam kasus nilai telah dibatalkan sebelumnya) oleh menghitung ulang nilai-nilai dan menerapkan perubahan tata letak apa pun.
Jadi apakah Anda menggunakan jQuery atau JavaScript vanilla, berhati-hatilah dalam mengakses properti tata letak yang tidak perlu terutama dalam satu lingkaran atau akibatnya setelah membuat perubahan gaya.
6. Manfaatkan caching di mana Anda bisa
Beberapa fungsi jQuery hadir dengan mekanisme caching yang dapat dimanfaatkan dengan baik. Permintaan Ajax melakukan cache sumber daya, tetapi tidak tersedia untuk naskah dan jsonp, jadi jika Anda ingin caching di semua permintaan ajax Anda, Anda mungkin ingin atur secara global seperti di bawah ini.
Perhatikan juga bahwa jika Anda mengambil sumber daya menggunakan pos itu tidak akan di-cache bahkan jika Anda mengaktifkan caching dengan pengaturan di atas.
Seperti yang saya sebutkan sebelumnya, melepaskan() cache data yang terkait dengan elemen yang akan dihapus tidak seperti menghapus();menyembunyikan() cache CSS awal tampilan nilai elemen sebelum menyembunyikannya sehingga dapat dikembalikan lagi nanti tanpa kehilangan data.
Kesimpulan
Salah satu cara Anda dapat memastikan bahwa Anda menggunakan kode jQuery paling efektif untuk kebutuhan Anda adalah menunggu sampai Anda benar-benar menjalankan kode Anda dan perhatikan apakah ada masalah kinerja atau tidak. Jika ada, gunakan alat kinerja dan debugger untuk mendeteksi akar masalah.
Karena jQuery seperti kepompong untuk JavaScript dengan fungsi tambahan untuk kompatibilitas dan fitur browser, mungkin sulit untuk mendiagnosis masalah tanpa alat ini.
