Cara cepat memulai dengan VUE3.0: Mulai belajar.
Saya telah mencari tip tentang optimasi kinerja jQuery untuk membuat aplikasi web dinamis saya yang membengkak menjadi lebih ringan. Setelah mencari banyak artikel, saya memutuskan untuk membuat daftar beberapa saran terbaik dan paling umum digunakan untuk mengoptimalkan kinerja. [Pembelajaran yang disarankan: tutorial video jQuery]
1. Saran pengoptimalan kinerja pemilih
1. Selalu mewarisi dari #id selector
. Cara tercepat untuk memilih elemen di jQuery adalah dengan memilihnya berdasarkan ID.
2. Gunakan tag di depan kelas
Pemilih tercepat kedua di jQuery adalah pemilih tag (seperti $('head')), karena berasal langsung dari metode Javascript asli getElementByTagName(). Jadi sebaiknya selalu gunakan tag untuk memodifikasi kelas (dan jangan lupa ID terdekat).
Pemilih kelas di jQuery adalah yang paling lambat, karena akan melintasi semua node DOM di browser IE. Cobalah untuk menghindari penggunaan penyeleksi kelas. Jangan gunakan tag untuk mengubah ID juga.
3. Gunakan subquery
untuk menyimpan cache objek induk untuk digunakan di masa mendatang
4. Optimalkan penyeleksi untuk beradaptasi dengan model "kanan-ke-kiri" Sizzle
Sejak versi 1.3, jQuery menggunakan perpustakaan Sizzle, yang sama dengan versi sebelumnya di mesin pemilih ekspresi sangat berbeda. Ini menggantikan model "kanan ke kiri" dengan model "kiri ke kanan".
5.
Memang lebih cepat menggunakan find() daripada menggunakan konteks untuk menemukan fungsi find(). Namun jika halaman memiliki banyak node DOM, mungkin memerlukan lebih banyak waktu untuk mencari bolak-balik:
6.
Gunakan operasi rantai yang kuat. Menggunakan
operasi rantai jQuery lebih efektif daripada penyeleksi
cache kode Anda, jadi perluas objek $.expr[':'] jQuery untuk menulis penyeleksi Anda sendiri.
2. Saran untuk mengoptimalkan operasi DOM
8. Cache objek jQuery dan
elemen cache yang sering Anda gunakan.
9. Saat memasukkan ke dalam DOM, rangkum semua elemen menjadi satu elemen.
Ide dasarnya di sini adalah untuk membuat apa yang benar-benar Anda inginkan dalam memori, dan lalu perbarui DOM. Ini bukan praktik terbaik jQuery, tetapi diperlukan untuk operasi JavaScript yang valid. Operasi DOM langsung sangat lambat. Ubah struktur HTML sesedikit mungkin.
10. Meskipun jQuery tidak memberikan pengecualian, pengembang juga harus memeriksa objek.
Meskipun jQuery tidak memberikan banyak pengecualian kepada pengguna, pengembang tidak boleh mengandalkan ini. jQuery biasanya menjalankan banyak fungsi yang tidak berguna sebelum menentukan apakah suatu objek ada. Jadi sebelum membuat serangkaian referensi terhadap suatu objek, sebaiknya periksa terlebih dahulu apakah objek tersebut ada.
11. Gunakan fungsi langsung daripada fungsi yang setara.
Untuk kinerja yang lebih baik, Anda harus menggunakan fungsi langsung seperti .ajax() daripada .ajax() daripada .ajax(). .getJSON(),.getJSON(),.post(), karena yang terakhir akan memanggil $.ajax().
12. Cache hasil jQuery untuk digunakan nanti.
Anda akan sering mendapatkan objek aplikasi javascript - Anda dapat menggunakan App. untuk menyimpan objek yang sering Anda pilih untuk digunakan di
masa
mendatang lupa menggunakan fungsi .data() untuk menyimpan informasi.
14. Gunakan fungsi utilitas jQuery
. Jangan lupakan fungsi utilitas jQuery yang sederhana dan praktis. Favorit saya adalah $.isFunction(), isA rray() dan isArray() dan isArray() dan .each().
15. Tambahkan kelas "JS" ke blok HTML
. Setelah jQuery dimuat, pertama-tama tambahkan kelas bernama "JS" ke HTML $('HTML').addClass('JS'); Anda dapat menambahkan gaya CSS.
3. Saran untuk mengoptimalkan kinerja acara
16. Tunda (window).Load
terkadang menggunakan (window).load.Kadang-kadang menggunakan (window).load.Kadang-kadang menggunakan (window).load() daripada $(document).ready .() lebih cepat karena yang terakhir tidak menunggu hingga semua elemen DOM diunduh. Anda harus mengujinya sebelum menggunakannya.
17. Gunakan Delegasi Acara.
Ketika Anda memiliki banyak node dalam sebuah wadah dan Anda ingin mengikat suatu acara ke semua node, delegasi sangat cocok untuk skenario aplikasi seperti itu. Dengan menggunakan Delegasi, kita hanya perlu mengikat event di induknya dan kemudian melihat node anak mana (node target) yang memicu event tersebut. Ini menjadi sangat nyaman ketika Anda memiliki tabel dengan banyak data dan Anda ingin mengatur kejadian pada node td.
18. Gunakan singkatan dari ready event.
Jika Anda ingin mengompresi plugin js dan menyimpan setiap byte, sebaiknya hindari penggunaan $(document).onready()
4. Uji jQuery
19. uji unit jQuery
Cara terbaik untuk menguji Kode JavaScript digunakan oleh orang-orang. Datang dan uji. Namun Anda dapat menggunakan beberapa alat otomatis seperti Selenium, Funcunit, QUit, QMock untuk menguji kode Anda (terutama plug-in). Saya ingin membahas topik ini di topik lain karena banyak sekali yang ingin saya sampaikan.
20. Standarisasi kode jQuery Anda.
Standarisasi kode Anda sesering mungkin, lihat kueri mana yang lebih lambat, dan gantilah. Anda dapat menggunakan konsol Firebug. Anda juga dapat menggunakan fungsi pintasan jQuery untuk mempermudah pengujian.
5. Saran optimasi kinerja jQuery umum lainnya
21. Gunakan jQuery versi terbaru.
Versi terbaru sering kali merupakan yang terbaik. Setelah mengubah versi, jangan lupa untuk menguji kode Anda. Terkadang itu tidak sepenuhnya kompatibel.
22. Menggunakan HMTL5
Standar HTML5 baru menghadirkan struktur DOM yang lebih ringan. Struktur yang lebih ringan berarti lebih sedikit traversal yang diperlukan saat menggunakan jQuery, dan performa pemuatan yang lebih baik. Jadi silakan gunakan HTML5 jika memungkinkan.
23. Jika Anda ingin menambahkan gaya ke lebih dari 15 elemen,
cara terbaik untuk menambahkan tag gaya langsung ke elemen DOM adalah dengan menggunakan fungsi jQuey css() untuk memberi gaya pada beberapa elemen. Namun, saat menambahkan gaya ke lebih dari 15 elemen, akan lebih efektif jika menambahkan tag gaya langsung ke DOM. Metode ini menghindari penggunaan kode keras dalam kode.
24. Hindari memuat kode yang berlebihan.
Sebaiknya letakkan kode Javascript di file yang berbeda dan muat hanya jika diperlukan. Dengan cara ini Anda tidak akan memuat kode dan penyeleksi yang tidak perlu. Juga mudah untuk mengelola kode.
25. Kompres menjadi satu file JS utama untuk meminimalkan jumlah download.
Ketika Anda sudah menentukan file mana yang harus dimuat, paketkan ke dalam satu file. Gunakan beberapa alat sumber terbuka untuk melakukannya secara otomatis, seperti menggunakan Minify (terintegrasi dengan kode back-end Anda) atau menggunakan alat online seperti JSCompressor, YUI Compressor, atau Dean Edwards JS packer untuk mengompresi file untuk Anda. Favorit saya adalah JSCompressor.
26. Sangat bagus menggunakan Javascript asli bila diperlukan.
Menggunakan jQuery adalah hal yang hebat, tapi jangan lupa bahwa ini juga merupakan kerangka kerja untuk Javascript. Jadi Anda dapat menggunakan fungsi Javascript asli bila diperlukan dalam kode jQuery, yang dapat mencapai kinerja lebih baik.
27. Load jQuery framework dari Google
Saat aplikasi Anda resmi diluncurkan, silahkan load jQuery dari Google CDN, karena pengguna bisa mendapatkan kodenya dari tempat terdekat. Dengan cara ini Anda dapat mengurangi permintaan server, dan jika pengguna menelusuri situs web lain yang juga menggunakan jQuery Google CDN, browser akan segera memanggil kode jQuery dari cache.
28. Memuat konten secara perlahan tidak hanya dapat meningkatkan kecepatan pemuatan, tetapi juga meningkatkan optimasi SEO. Gunakan Ajax untuk memuat situs web Anda, yang dapat menghemat waktu pemuatan di sisi server. Anda bisa memulai dengan widget sidebar umum.
[Pembelajaran yang disarankan: video jQuery, pengembangan front-end web]
Di atas adalah bagaimana cara mengoptimalkan kinerja jQuery? Untuk detail ringkasan metode optimasi, harap perhatikan artikel terkait lainnya di situs web PHP Mandarin untuk informasi lebih lanjut!
