首页 web前端 js教程 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
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Windows10与Windows11性能对比:哪个更胜一筹? Windows10与Windows11性能对比:哪个更胜一筹? Mar 28, 2024 am 09:00 AM

Windows10与Windows11性能对比:哪个更胜一筹?随着科技的不断发展和进步,操作系统也在不断更新和升级。微软公司作为全球最大的操作系统开发商之一,其发布的Windows系列操作系统一直备受用户关注。在2021年,微软发布了Windows11操作系统,这引发了广泛的讨论和关注。那么,究竟Windows10与Windows11在性能方面有何不同,哪个

Win11和Win10系统性能对比,究竟哪一个更胜一筹? Win11和Win10系统性能对比,究竟哪一个更胜一筹? Mar 27, 2024 pm 05:09 PM

一直以来,Windows操作系统一直是人们在个人电脑上使用最为广泛的操作系统之一,而Windows10长期以来一直是微软公司的旗舰操作系统,直到最近微软推出了全新的Windows11系统。随着Windows11系统的推出,人们对于Windows10和Windows11系统之间的性能差异开始感兴趣,究竟两者之间哪一个更胜一筹呢?首先,让我们来看一下W

PHP与Go语言对比:性能差异大 PHP与Go语言对比:性能差异大 Mar 26, 2024 am 10:48 AM

PHP与Go语言是两种常用的编程语言,它们有着不同的特点和优势。其中,性能差异是大家普遍关注的一个问题。本文将从性能角度对比PHP和Go语言,并通过具体的代码示例来展示它们的性能差异。首先,让我们简要介绍一下PHP和Go语言的基本特点。PHP是一种脚本语言,最初设计用于Web开发,易学易用,广泛应用于Web开发领域。而Go语言是由Google开发的一种编译型

本地运行性能超越 OpenAI Text-Embedding-Ada-002 的 Embedding 服务,太方便了! 本地运行性能超越 OpenAI Text-Embedding-Ada-002 的 Embedding 服务,太方便了! Apr 15, 2024 am 09:01 AM

Ollama是一款超级实用的工具,让你能够在本地轻松运行Llama2、Mistral、Gemma等开源模型。本文我将介绍如何使用Ollama实现对文本的向量化处理。如果你本地还没有安装Ollama,可以阅读这篇文章。本文我们将使用nomic-embed-text[2]模型。它是一种文本编码器,在短的上下文和长的上下文任务上,性能超越了OpenAItext-embedding-ada-002和text-embedding-3-small。启动nomic-embed-text服务当你已经成功安装好o

不同Java框架的性能对比 不同Java框架的性能对比 Jun 05, 2024 pm 07:14 PM

不同Java框架的性能对比:RESTAPI请求处理:Vert.x最佳,请求速率达SpringBoot2倍,Dropwizard3倍。数据库查询:SpringBoot的HibernateORM优于Vert.x及Dropwizard的ORM。缓存操作:Vert.x的Hazelcast客户机优于SpringBoot及Dropwizard的缓存机制。合适框架:根据应用需求选择,Vert.x适用于高性能Web服务,SpringBoot适用于数据密集型应用,Dropwizard适用于微服务架构。

PHP 数组键值翻转:不同方法的性能对比分析 PHP 数组键值翻转:不同方法的性能对比分析 May 03, 2024 pm 09:03 PM

PHP数组键值翻转方法性能对比表明:array_flip()函数在大型数组(超过100万个元素)下比for循环性能更优,耗时更短。手动翻转键值的for循环方法耗时相对较长。

C++ 函数对程序性能有哪些影响? C++ 函数对程序性能有哪些影响? Apr 12, 2024 am 09:39 AM

函数对C++程序性能的影响包括函数调用开销、局部变量和对象分配开销:函数调用开销:包括堆栈帧分配、参数传递和控制权转移,对小函数影响显着。局部变量和对象分配开销:大量局部变量或对象创建和销毁会导致堆栈溢出和性能下降。

C++中如何优化多线程程序的性能? C++中如何优化多线程程序的性能? Jun 05, 2024 pm 02:04 PM

优化C++多线程性能的有效技术包括:限制线程数量,避免争用资源。使用轻量级互斥锁,减少争用。优化锁的范围,最小化等待时间。采用无锁数据结构,提高并发性。避免忙等,通过事件通知线程资源可用性。

See all articles