[Ringkasan] Pelbagai kaedah untuk mengoptimumkan prestasi jQuery

Bagaimana untuk mengoptimumkan prestasi jQuery? Artikel berikut akan memperkenalkan anda kepada beberapa kaedah pengoptimuman untuk prestasi jQuery saya harap ia akan membantu anda!

Saya telah mencari petua tentang pengoptimuman prestasi jQuery untuk menjadikan aplikasi web dinamik saya yang kembung lebih ringan. Selepas mencari banyak artikel, saya memutuskan untuk menyenaraikan beberapa cadangan terbaik dan paling biasa digunakan untuk mengoptimumkan prestasi. [Pembelajaran yang disyorkan: Tutorial video jQuery]

Cadangan pengoptimuman prestasi pemilih

1 warisi daripada #id pemilih

Ini ialah peraturan emas untuk pemilih jQuery. Cara terpantas untuk memilih elemen dalam jQuery ialah memilihnya mengikut ID.

2. Gunakan teg di hadapan kelas

Pemilih kedua terpantas dalam jQuery ialah pemilih teg (seperti $('head')), kerana ia adalah sama seperti Terus daripada kaedah Javascript asli getElementByTagName(). Oleh itu, sebaiknya sentiasa menggunakan teg untuk mengubah suai kelas (dan jangan lupa ID terdekat)

Pemilih kelas dalam jQuery adalah yang paling perlahan, kerana ia akan merentasi semua nod DOM di bawah pelayar IE. Cuba elakkan menggunakan pemilih kelas. Jangan gunakan teg untuk mengubah suai ID sama ada.

3 Gunakan subquery

untuk cache objek induk untuk kegunaan masa hadapan

4. to-left" model

Sejak versi 1.3, jQuery menggunakan perpustakaan Sizzle, yang sangat berbeza daripada perwakilan versi sebelumnya pada enjin pemilih. Ia menggantikan model "kanan ke kiri" dengan model "kiri ke kanan".

5 Gunakan find() dan bukannya carian konteks

Fungsi find() sememangnya lebih pantas. Walau bagaimanapun, jika halaman mempunyai banyak nod DOM, ia mungkin mengambil lebih banyak masa untuk mencari berulang-alik:

6. Gunakan operasi rantai yang berkuasa

Menggunakan operasi Berantai jQuery adalah lebih cekap daripada caching pemilih

7 Tulis pemilih anda sendiri

Jika anda sering menggunakan pemilih dalam kod anda, lanjutkan objek $ .expr[':'] jQuery dan. tulis pemilih anda sendiri.

2 Cadangan untuk mengoptimumkan operasi DOM

8 Caching objek jQuery

akan anda selalunya Cache elemen yang digunakan

9 Apabila memasukkan ke dalam DOM, masukkan semua elemen ke dalam satu elemen

Idea asas di sini adalah untuk mencipta sesuatu yang anda inginkan dan kemudian. kemas kini DOM. Ini bukan amalan terbaik jQuery, tetapi diperlukan untuk operasi JavaScript yang sah. Operasi Direct DOM sangat perlahan. Tukar struktur HTML sesedikit mungkin.

10 Walaupun jQuery tidak akan membuang pengecualian, pembangun juga harus menyemak objek

Walaupun jQuery tidak akan membuang sejumlah besar pengecualian kepada pengguna, pembangun Jangan bergantung pada itu sama ada. jQuery biasanya melaksanakan sekumpulan fungsi yang tidak berguna sebelum menentukan sama ada objek wujud. Oleh itu, sebelum membuat satu siri rujukan kepada objek, anda harus terlebih dahulu menyemak sama ada objek itu wujud.

11. Gunakan fungsi langsung dan bukannya fungsi yang setara

Untuk prestasi yang lebih baik, anda harus menggunakan fungsi langsung seperti a j a x ( ) , jangan gunakan .ajax() , jangan gunakan .ajax(), jangan gunakan .get(),.g e t J S O N ( ), .getJSON(),.getJSON(),.post(), kerana beberapa berikut akan memanggil $.ajax().

12. Cache hasil jQuery untuk kegunaan kemudian

Anda selalunya akan mendapat objek aplikasi javasript - anda boleh menggunakan App untuk menyimpan objek yang sering anda pilih, untuk masa hadapan gunakan

13 Gunakan fungsi dalaman jQuery data() untuk menyimpan status

Jangan lupa gunakan fungsi .data() untuk menyimpan maklumat

14. Gunakan fungsi utiliti jQuery

Jangan lupa fungsi utiliti jQuery yang mudah dan praktikal. Kegemaran saya ialah $.isFunction(), i s A r r a y ( ) dan isArray() dan isArray() dan .each().

15 Tambahkan kelas "JS" pada blok HTML

Apabila jQuery dimuatkan, mula-mula tambah kelas yang dipanggil "JS" pada HTML $('HTML. ').addClass('JS');Anda boleh menambah gaya CSS hanya apabila pengguna telah mendayakan JavaScript.

3. Cadangan untuk mengoptimumkan prestasi acara

16 🎜>Kadang-kadang menggunakan (window).load Kadang-kadang menggunakan (window).load Kadang-kadang menggunakan (window).load() adalah lebih pantas daripada $(document).ready() kerana yang terakhir tidak menunggu semua elemen DOM Dilaksanakan sebelum semua muat turun selesai. Anda harus mengujinya sebelum menggunakannya.

17. Gunakan Delegasi Acara

Apabila anda mempunyai banyak nod dalam bekas dan anda ingin mengikat acara kepada semua nod, delegasi sangat sesuai untuk senario aplikasi sedemikian. Menggunakan Perwakilan, kita hanya perlu mengikat acara pada induk dan kemudian melihat nod anak (nod sasaran) yang mencetuskan peristiwa. Ini menjadi sangat mudah apabila anda mempunyai jadual dengan banyak data dan anda ingin menetapkan acara pada nod td.

18 Gunakan singkatan acara sedia

Jika anda ingin memampatkan pemalam js dan menyimpan setiap bait, anda harus mengelak daripada menggunakan $(document). onready()

4 Menguji jQuery

19. Ujian unit jQuery

Ia adalah terbaik untuk menguji kod JavaScript Cara terbaik ialah mengujinya dengan orang ramai. Tetapi anda boleh menggunakan beberapa alatan automatik seperti Selenium, Funcunit, QUit, QMock untuk menguji kod anda (terutamanya pemalam). Saya ingin membincangkan topik ini dalam topik lain kerana banyak perkara yang perlu diperkatakan.

20 Seragamkan kod jQuery anda

Piawaikan kod anda dengan kerap untuk melihat pertanyaan yang lambat dan gantikannya. Anda boleh menggunakan konsol Firebug. Anda juga boleh menggunakan fungsi pintasan jQuery untuk memudahkan ujian

5 Cadangan pengoptimuman prestasi jQuery biasa yang lain

21 versi terkini jQuery

Versi terkini selalunya yang terbaik. Selepas menukar versi, jangan lupa untuk menguji kod anda. Kadang-kadang ia tidak sepenuhnya serasi ke belakang.

22 Gunakan HMTL5

Standard HTML5 baharu membawakan struktur DOM yang lebih ringan. Struktur yang lebih ringan bermakna lebih sedikit traversal diperlukan apabila menggunakan jQuery, dan prestasi pemuatan yang lebih baik. Jadi sila gunakan HTML5 jika boleh.

23 Jika anda ingin menambah gaya kepada lebih daripada 15 elemen, terus tambah teg gaya pada elemen DOM

Cara terbaik untuk menambah gaya pada beberapa elemen Hanya. gunakan fungsi css() jQuey. Walau bagaimanapun, apabila menambah gaya kepada lebih daripada 15 elemen, adalah lebih berkesan untuk menambah teg gaya terus ke DOM. Kaedah ini mengelakkan penggunaan kod keras dalam kod.

24 Elakkan memuatkan kod berlebihan

Adalah idea yang baik untuk meletakkan kod Javascript dalam fail yang berbeza dan memuatkannya hanya apabila diperlukan. Dengan cara ini anda tidak akan memuatkan kod dan pemilih yang tidak diperlukan. Ia juga mudah untuk menguruskan kod.

25 Mampatkannya ke dalam satu fail JS utama dan pastikan bilangan muat turun sekurang-kurangnya

Apabila anda telah menentukan fail mana yang perlu dimuatkan, kemudian mampatkannya. ke dalam fail. Gunakan beberapa alatan sumber terbuka untuk melakukannya untuk anda secara automatik, seperti menggunakan Minify (diintegrasikan dengan kod belakang anda) atau menggunakan alatan dalam talian seperti JSCompressor, YUI Compressor atau Dean Edwards JS packer untuk memampatkan fail untuk anda. Kegemaran saya ialah JSCompressor.

26 Gunakan Javascript asli apabila diperlukan

Menggunakan jQuery adalah perkara yang bagus, tetapi jangan lupa bahawa ia juga merupakan rangka kerja untuk Javascript. Jadi anda boleh menggunakan fungsi Javascript asli apabila perlu dalam kod jQuery, yang boleh mencapai prestasi yang lebih baik.

27 Muatkan rangka kerja jQuery daripada Google

Apabila aplikasi anda dilancarkan secara rasmi, sila muatkan jQuery daripada Google CDN, kerana pengguna boleh memuatkannya dari tempat terdekat Dapatkan kod. Dengan cara ini anda boleh mengurangkan permintaan pelayan, dan jika pengguna menyemak imbas ke tapak web lain yang turut menggunakan jQuery Google CDN, penyemak imbas akan segera memanggil kod jQuery daripada cache.

28 Memuatkan kandungan secara perlahan bukan sahaja meningkatkan kelajuan pemuatan, tetapi juga meningkatkan pengoptimuman SEO Gunakan Ajax untuk memuatkan tapak web anda, yang boleh menjimatkan masa memuatkan bahagian pelayan. Anda boleh bermula dengan widget bar sisi biasa.

[Pembelajaran yang disyorkan: video jQuery, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci [Ringkasan] Pelbagai kaedah untuk mengoptimumkan prestasi jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!