Rumah hujung hadapan web tutorial js JQuery Tips(4) 一些关于提高JQuery性能的Tips_jquery

JQuery Tips(4) 一些关于提高JQuery性能的Tips_jquery

May 16, 2016 pm 06:38 PM
jquery prestasi

在选择时,最好以ID选择符作为开头

我想这个很好理解,因为JQuery内部使用document.getElementByID方法进行ID选择,这种方法比其他所有对DOM选择的方法更快,所以以$("#")开头是最好的,比如:

复制代码 代码如下:










提供$()的上下文
在使用$()选择页面元素时,提供选择的范围可以减少选择的时间,换句话说,让选择器只在页面的一小片范围内筛选而不是整个页面当然会减少筛选时间,通过在$()函数内提供第二个参数作为上下文可以实现这一点
复制代码 代码如下:


hi




当然,在jquery定义(或者js函数)事件内,可以通过this来指代上下文:
复制代码 代码如下:


hi




当然,上面的例子也可以写成下面两种方式:
复制代码 代码如下:


hi




其中利用find方法是所有方法中效率最高的

当然,如果你是通过id选择符,也就是$("#..")来选择,不需要提供上下文参数.这对速度没有影响

将经常用的JQuery包装好的元素进行保存
如题,这点比较重要,因为使用$()对页面元素进行选择是需要耗费时间的.而保存为变量进行使用时,可以避免这种浪费,比如:
复制代码 代码如下:


  • one

  • two

  • three

  • four

  • five




从代码可以看到,避免多次重复选择可以提高性能:-)



尽量少用选择符
JQuery的选择器是面向数组的,所以在条件允许的情况下尽量少用选择器,比如:
复制代码 代码如下:






可以看出,使用选择器并用逗号将被选择的元素分开,并选择多个元素不仅让代码更加简洁,并且通过减少创建JQuery的实例所以在性能上也稍胜一筹!



在循环次数很多时避免使用$().each,而使用for循环
使用$().each方法让在进行循环时,会让编程更加轻松,少量的循环在使用$().each时对性能的影响可以忽略不计,但是当这个数字很大的时候,对性能的影响便开始变得可观了.

这个数字,我查了下资料,据说是1000以下可以使用$().each方法,而这个数字如果继续增加,则应该使用for循环语句。



尽量减少对DOM的操作
在页面中对DOM操作是比较消耗的(比如在页面插入或删除一段文字),把这个改动降至最小是保持性能的最佳实践!比如:
复制代码 代码如下:





可以看出,第一个例子对DOM修改100次,而第二个只对DOM修改1次,这上面的性能差距是显而易见的。



可以屏蔽JQuery的动画效果
在某些情况下,如果,可以关闭JQuery动画,能对性能进行一定提升,屏蔽的方法是:
复制代码 代码如下:



如果参数可以是JS对象,尽量使用对象
很对JQuery插件,或者JQuery的css和attr方法都接受键/值 或 js键/值对象 对作为参数,传递键值对象可以减少JQuery对象的创建,比如:
复制代码 代码如下:




当然也可以使用连缀的方式:
复制代码 代码如下:




但是这种方式的性能不如上面那种.需要使用两个方法,并且需要多生成临时对象.

以上都是一些对JQuery性能提升的小Tips
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Perbandingan prestasi Windows 10 vs. Windows 11: Mana satu yang lebih baik? Perbandingan prestasi Windows 10 vs. Windows 11: Mana satu yang lebih baik? Mar 28, 2024 am 09:00 AM

Perbandingan prestasi Windows 10 vs. Windows 11: Mana satu yang lebih baik? Dengan pembangunan dan kemajuan teknologi yang berterusan, sistem pengendalian sentiasa dikemas kini dan dinaik taraf. Sebagai salah satu pembangun sistem pengendalian terbesar di dunia, siri sistem pengendalian Microsoft Windows sentiasa menarik perhatian ramai pengguna. Pada tahun 2021, Microsoft mengeluarkan sistem pengendalian Windows 11, yang mencetuskan perbincangan dan perhatian yang meluas. Jadi, apakah perbezaan prestasi antara Windows 10 dan Windows 11?

Membandingkan prestasi sistem Win11 dan Win10, yang manakah lebih baik? Membandingkan prestasi sistem Win11 dan Win10, yang manakah lebih baik? Mar 27, 2024 pm 05:09 PM

Sistem pengendalian Windows sentiasa menjadi salah satu sistem pengendalian yang paling banyak digunakan pada komputer peribadi, dan Windows 10 telah lama menjadi sistem pengendalian perdana Microsoft sehingga baru-baru ini apabila Microsoft melancarkan sistem Windows 11 baharu. Dengan pelancaran sistem Windows 11, orang ramai mula berminat dengan perbezaan prestasi antara sistem Windows 10 dan Windows 11 yang mana satu yang lebih baik antara kedua-duanya? Pertama, mari kita lihat W

Pemproses Kirin 8000 bersaing dengan siri Snapdragon: Siapa yang boleh menjadi raja? Pemproses Kirin 8000 bersaing dengan siri Snapdragon: Siapa yang boleh menjadi raja? Mar 25, 2024 am 09:03 AM

Dalam era Internet mudah alih, telefon pintar telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian manusia. Prestasi telefon pintar selalunya secara langsung menentukan kualiti pengalaman pengguna. Sebagai "otak" telefon pintar, prestasi pemproses amat penting. Di pasaran, siri Qualcomm Snapdragon sentiasa mewakili prestasi kukuh, kestabilan dan kebolehpercayaan, dan baru-baru ini Huawei turut melancarkan pemproses Kirin 8000 sendiri, yang dikatakan mempunyai prestasi cemerlang. Bagi pengguna biasa, cara memilih telefon bimbit dengan prestasi yang kukuh telah menjadi isu utama. Hari ini kita akan

Prestasi larian tempatan perkhidmatan Embedding melebihi OpenAI Text-Embedding-Ada-002, yang sangat mudah! Prestasi larian tempatan perkhidmatan Embedding melebihi OpenAI Text-Embedding-Ada-002, yang sangat mudah! Apr 15, 2024 am 09:01 AM

Ollama ialah alat super praktikal yang membolehkan anda menjalankan model sumber terbuka dengan mudah seperti Llama2, Mistral dan Gemma secara tempatan. Dalam artikel ini, saya akan memperkenalkan cara menggunakan Ollama untuk mengvektorkan teks. Jika anda belum memasang Ollama secara tempatan, anda boleh membaca artikel ini. Dalam artikel ini kita akan menggunakan model nomic-embed-text[2]. Ia ialah pengekod teks yang mengatasi prestasi OpenAI text-embedding-ada-002 dan text-embedding-3-small pada konteks pendek dan tugas konteks panjang. Mulakan perkhidmatan nomic-embed-text apabila anda telah berjaya memasang o

Perbandingan prestasi rangka kerja Java yang berbeza Perbandingan prestasi rangka kerja Java yang berbeza Jun 05, 2024 pm 07:14 PM

Perbandingan prestasi rangka kerja Java yang berbeza: Pemprosesan permintaan REST API: Vert.x adalah yang terbaik, dengan kadar permintaan 2 kali SpringBoot dan 3 kali Dropwizard. Pertanyaan pangkalan data: HibernateORM SpringBoot adalah lebih baik daripada Vert.x dan ORM Dropwizard. Operasi caching: Pelanggan Hazelcast Vert.x lebih unggul daripada mekanisme caching SpringBoot dan Dropwizard. Rangka kerja yang sesuai: Pilih mengikut keperluan aplikasi Vert.x sesuai untuk perkhidmatan web berprestasi tinggi, SpringBoot sesuai untuk aplikasi intensif data, dan Dropwizard sesuai untuk seni bina perkhidmatan mikro.

Perbandingan bahasa PHP dan Go: perbezaan prestasi yang besar Perbandingan bahasa PHP dan Go: perbezaan prestasi yang besar Mar 26, 2024 am 10:48 AM

PHP dan Go ialah dua bahasa pengaturcaraan yang biasa digunakan, dan ia mempunyai ciri dan kelebihan yang berbeza. Antaranya, perbezaan prestasi merupakan isu yang dibimbangkan oleh semua orang. Artikel ini akan membandingkan bahasa PHP dan Go dari perspektif prestasi, dan menunjukkan perbezaan prestasi mereka melalui contoh kod tertentu. Mula-mula, mari kita perkenalkan secara ringkas ciri asas PHP dan bahasa Go. PHP ialah bahasa skrip yang pada asalnya direka untuk pembangunan web Ia mudah dipelajari dan digunakan dan digunakan secara meluas dalam bidang pembangunan web. Bahasa Go ialah bahasa tersusun yang dibangunkan oleh Google.

Pembalikan nilai kunci tatasusunan PHP: analisis perbandingan prestasi kaedah yang berbeza Pembalikan nilai kunci tatasusunan PHP: analisis perbandingan prestasi kaedah yang berbeza May 03, 2024 pm 09:03 PM

Perbandingan prestasi kaedah membalik nilai kunci tatasusunan PHP menunjukkan bahawa fungsi array_flip() berprestasi lebih baik daripada gelung for dalam tatasusunan besar (lebih daripada 1 juta elemen) dan mengambil masa yang lebih singkat. Kaedah gelung untuk membalikkan nilai kunci secara manual mengambil masa yang agak lama.

Apakah kesan fungsi C++ terhadap prestasi program? Apakah kesan fungsi C++ terhadap prestasi program? Apr 12, 2024 am 09:39 AM

Kesan fungsi pada prestasi program C++ termasuk overhed panggilan fungsi, pembolehubah tempatan dan overhed peruntukan objek: Overhed panggilan fungsi: termasuk peruntukan bingkai tindanan, pemindahan parameter dan pemindahan kawalan, yang mempunyai kesan ketara pada fungsi kecil. Overhed pembolehubah tempatan dan peruntukan objek: Sebilangan besar pembolehubah tempatan atau penciptaan objek dan pemusnahan boleh menyebabkan limpahan tindanan dan kemerosotan prestasi.

See all articles