Maison interface Web js tutoriel 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
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comparaison des performances de Windows 10 et Windows 11 : lequel est le meilleur ? Comparaison des performances de Windows 10 et Windows 11 : lequel est le meilleur ? Mar 28, 2024 am 09:00 AM

Comparaison des performances de Windows 10 et Windows 11 : lequel est le meilleur ? Avec le développement et les progrès continus de la technologie, les systèmes d’exploitation sont constamment mis à jour et mis à niveau. En tant que l'un des plus grands développeurs de systèmes d'exploitation au monde, la série de systèmes d'exploitation Windows de Microsoft a toujours attiré beaucoup d'attention de la part des utilisateurs. En 2021, Microsoft a lancé le système d’exploitation Windows 11, ce qui a suscité de nombreuses discussions et attentions. Alors, quelle est la différence de performances entre Windows 10 et Windows 11 ?

En comparant les performances des systèmes Win11 et Win10, lequel est le meilleur ? En comparant les performances des systèmes Win11 et Win10, lequel est le meilleur ? Mar 27, 2024 pm 05:09 PM

Le système d'exploitation Windows a toujours été l'un des systèmes d'exploitation les plus utilisés sur les ordinateurs personnels, et Windows 10 a longtemps été le système d'exploitation phare de Microsoft jusqu'à récemment, lorsque Microsoft a lancé le nouveau système Windows 11. Avec le lancement du système Windows 11, les gens se sont intéressés aux différences de performances entre les systèmes Windows 10 et Windows 11. Lequel est le meilleur entre les deux ? Jetons d’abord un coup d’œil à W

Le processeur Kirin 8000 rivalise avec la série Snapdragon : qui peut être roi ? Le processeur Kirin 8000 rivalise avec la série Snapdragon : qui peut être roi ? Mar 25, 2024 am 09:03 AM

À l’ère de l’Internet mobile, les smartphones sont devenus un élément indispensable de la vie quotidienne des gens. Les performances des smartphones déterminent souvent directement la qualité de l’expérience utilisateur. En tant que « cerveau » d’un smartphone, les performances du processeur sont particulièrement importantes. Sur le marché, la série Qualcomm Snapdragon a toujours été représentative de performances, de stabilité et de fiabilité élevées, et récemment Huawei a également lancé son propre processeur Kirin 8000, qui aurait d'excellentes performances. Pour les utilisateurs ordinaires, comment choisir un téléphone mobile doté de performances élevées est devenu une question clé. Aujourd'hui, nous allons

Les performances d'exécution locale du service Embedding dépassent celles d'OpenAI Text-Embedding-Ada-002, ce qui est très pratique ! Les performances d'exécution locale du service Embedding dépassent celles d'OpenAI Text-Embedding-Ada-002, ce qui est très pratique ! Apr 15, 2024 am 09:01 AM

Ollama est un outil super pratique qui vous permet d'exécuter facilement des modèles open source tels que Llama2, Mistral et Gemma localement. Dans cet article, je vais vous présenter comment utiliser Ollama pour vectoriser du texte. Si vous n'avez pas installé Ollama localement, vous pouvez lire cet article. Dans cet article, nous utiliserons le modèle nomic-embed-text[2]. Il s'agit d'un encodeur de texte qui surpasse OpenAI text-embedding-ada-002 et text-embedding-3-small sur les tâches à contexte court et à contexte long. Démarrez le service nomic-embed-text lorsque vous avez installé avec succès o

Comparaison des langages PHP et Go : grosse différence de performances Comparaison des langages PHP et Go : grosse différence de performances Mar 26, 2024 am 10:48 AM

PHP et Go sont deux langages de programmation couramment utilisés et présentent des caractéristiques et des avantages différents. Parmi eux, la différence de performances est un problème qui préoccupe généralement tout le monde. Cet article comparera les langages PHP et Go du point de vue des performances et démontrera leurs différences de performances à travers des exemples de code spécifiques. Tout d’abord, présentons brièvement les fonctionnalités de base du langage PHP et Go. PHP est un langage de script initialement conçu pour le développement Web. Il est facile à apprendre et à utiliser et est largement utilisé dans le domaine du développement Web. Le langage Go est un langage compilé développé par Google.

Comparaison des performances de différents frameworks Java Comparaison des performances de différents frameworks Java Jun 05, 2024 pm 07:14 PM

Comparaison des performances de différents frameworks Java : Traitement des requêtes API REST : Vert.x est le meilleur, avec un taux de requêtes de 2 fois SpringBoot et 3 fois Dropwizard. Requête de base de données : HibernateORM de SpringBoot est meilleur que l'ORM de Vert.x et Dropwizard. Opérations de mise en cache : le client Hazelcast de Vert.x est supérieur aux mécanismes de mise en cache de SpringBoot et Dropwizard. Cadre approprié : choisissez en fonction des exigences de l'application. Vert.x convient aux services Web hautes performances, SpringBoot convient aux applications gourmandes en données et Dropwizard convient à l'architecture de microservices.

Inversion des valeurs clés du tableau PHP : analyse comparative des performances de différentes méthodes Inversion des valeurs clés du tableau PHP : analyse comparative des performances de différentes méthodes May 03, 2024 pm 09:03 PM

La comparaison des performances des méthodes de retournement des valeurs de clé de tableau PHP montre que la fonction array_flip() fonctionne mieux que la boucle for dans les grands tableaux (plus d'un million d'éléments) et prend moins de temps. La méthode de la boucle for consistant à retourner manuellement les valeurs clés prend un temps relativement long.

Quel impact les fonctions C++ ont-elles sur les performances du programme ? Quel impact les fonctions C++ ont-elles sur les performances du programme ? Apr 12, 2024 am 09:39 AM

L'impact des fonctions sur les performances du programme C++ comprend la surcharge des appels de fonction, la surcharge des variables locales et de l'allocation d'objets : La surcharge des appels de fonction : y compris l'allocation de trame de pile, le transfert de paramètres et le transfert de contrôle, ce qui a un impact significatif sur les petites fonctions. Surcharge d'allocation de variables locales et d'objets : un grand nombre de créations et de destructions de variables locales ou d'objets peuvent entraîner un débordement de pile et une dégradation des performances.

See all articles