Heim Web-Frontend js-Tutorial JQuery Tips(4) 一些关于提高JQuery性能的Tips_jquery

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

May 16, 2016 pm 06:38 PM
jquery 性能

在选择时,最好以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
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Leistungsvergleich Windows 10 vs. Windows 11: Welches ist besser? Leistungsvergleich Windows 10 vs. Windows 11: Welches ist besser? Mar 28, 2024 am 09:00 AM

Leistungsvergleich Windows 10 vs. Windows 11: Welches ist besser? Aufgrund der kontinuierlichen Weiterentwicklung und Weiterentwicklung der Technologie werden Betriebssysteme ständig aktualisiert und aktualisiert. Als einer der weltweit größten Betriebssystementwickler hat Microsoft mit seinen Windows-Betriebssystemen schon immer große Aufmerksamkeit bei den Benutzern auf sich gezogen. Im Jahr 2021 veröffentlichte Microsoft das Betriebssystem Windows 11, was breite Diskussionen und Aufmerksamkeit auslöste. Was ist also der Leistungsunterschied zwischen Windows 10 und Windows 11?

Vergleicht man die Leistung von Win11- und Win10-Systemen: Welches ist besser? Vergleicht man die Leistung von Win11- und Win10-Systemen: Welches ist besser? Mar 27, 2024 pm 05:09 PM

Das Windows-Betriebssystem war schon immer eines der am weitesten verbreiteten Betriebssysteme auf PCs, und Windows 10 war lange Zeit das Flaggschiff-Betriebssystem von Microsoft, bis Microsoft vor kurzem das neue Windows 11-System auf den Markt brachte. Mit der Einführung des Windows 11-Systems haben sich die Menschen für die Leistungsunterschiede zwischen Windows 10 und Windows 11-Systemen interessiert. Welches ist besser? Werfen wir zunächst einen Blick auf W

Vergleich der PHP- und Go-Sprachen: großer Leistungsunterschied Vergleich der PHP- und Go-Sprachen: großer Leistungsunterschied Mar 26, 2024 am 10:48 AM

PHP und Go sind zwei häufig verwendete Programmiersprachen und weisen unterschiedliche Eigenschaften und Vorteile auf. Unter ihnen sind Leistungsunterschiede ein Problem, das im Allgemeinen allen Sorgen bereitet. In diesem Artikel werden PHP- und Go-Sprachen aus Leistungssicht verglichen und ihre Leistungsunterschiede anhand spezifischer Codebeispiele demonstriert. Lassen Sie uns zunächst kurz die Grundfunktionen von PHP und der Go-Sprache vorstellen. PHP ist eine Skriptsprache, die ursprünglich für die Webentwicklung entwickelt wurde. Sie ist einfach zu erlernen und zu verwenden und wird im Bereich der Webentwicklung häufig verwendet. Die Go-Sprache ist eine von Google entwickelte kompilierte Sprache.

Die lokale Ausführungsleistung des Embedding-Dienstes übertrifft die von OpenAI Text-Embedding-Ada-002, was sehr praktisch ist! Die lokale Ausführungsleistung des Embedding-Dienstes übertrifft die von OpenAI Text-Embedding-Ada-002, was sehr praktisch ist! Apr 15, 2024 am 09:01 AM

Ollama ist ein superpraktisches Tool, mit dem Sie Open-Source-Modelle wie Llama2, Mistral und Gemma problemlos lokal ausführen können. In diesem Artikel werde ich vorstellen, wie man Ollama zum Vektorisieren von Text verwendet. Wenn Sie Ollama nicht lokal installiert haben, können Sie diesen Artikel lesen. In diesem Artikel verwenden wir das Modell nomic-embed-text[2]. Es handelt sich um einen Text-Encoder, der OpenAI text-embedding-ada-002 und text-embedding-3-small bei kurzen und langen Kontextaufgaben übertrifft. Starten Sie den nomic-embed-text-Dienst, wenn Sie o erfolgreich installiert haben

PHP-Array-Schlüsselwertumdrehen: Vergleichende Leistungsanalyse verschiedener Methoden PHP-Array-Schlüsselwertumdrehen: Vergleichende Leistungsanalyse verschiedener Methoden May 03, 2024 pm 09:03 PM

Der Leistungsvergleich der PHP-Methoden zum Umdrehen von Array-Schlüsselwerten zeigt, dass die Funktion array_flip() in großen Arrays (mehr als 1 Million Elemente) eine bessere Leistung als die for-Schleife erbringt und weniger Zeit benötigt. Die for-Schleifenmethode zum manuellen Umdrehen von Schlüsselwerten dauert relativ lange.

Leistungsvergleich verschiedener Java-Frameworks Leistungsvergleich verschiedener Java-Frameworks Jun 05, 2024 pm 07:14 PM

Leistungsvergleich verschiedener Java-Frameworks: REST-API-Anforderungsverarbeitung: Vert.x ist am besten, mit einer Anforderungsrate von 2-mal SpringBoot und 3-mal Dropwizard. Datenbankabfrage: HibernateORM von SpringBoot ist besser als ORM von Vert.x und Dropwizard. Caching-Vorgänge: Der Hazelcast-Client von Vert.x ist den Caching-Mechanismen von SpringBoot und Dropwizard überlegen. Geeignetes Framework: Wählen Sie entsprechend den Anwendungsanforderungen. Vert.x eignet sich für leistungsstarke Webdienste, SpringBoot eignet sich für datenintensive Anwendungen und Dropwizard eignet sich für Microservice-Architekturen.

Welchen Einfluss haben C++-Funktionen auf die Programmleistung? Welchen Einfluss haben C++-Funktionen auf die Programmleistung? Apr 12, 2024 am 09:39 AM

Die Auswirkungen von Funktionen auf die Leistung von C++-Programmen umfassen den Overhead für Funktionsaufrufe sowie den Overhead für die Zuweisung lokaler Variablen und Objekte: Overhead für Funktionsaufrufe: einschließlich Stapelrahmenzuweisung, Parameterübertragung und Steuerungsübertragung, was erhebliche Auswirkungen auf kleine Funktionen hat. Overhead bei der Zuordnung lokaler Variablen und Objekte: Die Erstellung und Zerstörung einer großen Anzahl lokaler Variablen oder Objekte kann zu einem Stapelüberlauf und Leistungseinbußen führen.

Wie kann die Leistung von Multithread-Programmen in C++ optimiert werden? Wie kann die Leistung von Multithread-Programmen in C++ optimiert werden? Jun 05, 2024 pm 02:04 PM

Zu den wirksamen Techniken zur Optimierung der C++-Multithread-Leistung gehört die Begrenzung der Anzahl der Threads, um Ressourcenkonflikte zu vermeiden. Verwenden Sie leichte Mutex-Sperren, um Konflikte zu reduzieren. Optimieren Sie den Umfang der Sperre und minimieren Sie die Wartezeit. Verwenden Sie sperrenfreie Datenstrukturen, um die Parallelität zu verbessern. Vermeiden Sie geschäftiges Warten und benachrichtigen Sie Threads über Ereignisse über die Ressourcenverfügbarkeit.

See all articles