博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery Tips(4)----一些关于提高JQuery性能的Tips
阅读量:4708 次
发布时间:2019-06-10

本文共 1526 字,大约阅读时间需要 5 分钟。

如今咱祖国已经崛起了..电脑的配置也是直线上升.可是js的性能问题依然不可小觑..尤其在万恶的IE中..js引擎速度本来就慢..如果JS如果再写不好,客户端多开几个窗口假死肯定是家常便饭了.废话不说了,下面说说js性能提升的一些小Tips.

在选择时,最好以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

转载于:https://www.cnblogs.com/toddzhang/p/3338120.html

你可能感兴趣的文章
使用rsync同步目录
查看>>
[读码时间] for循环遍历设置所有DIV块元素背景色为红色
查看>>
网页调用迅雷下载文件
查看>>
Python 调用 Shell命令
查看>>
POJ 1159 Palindrome(最长公共子序列)
查看>>
ubuntu下安装fcitx五笔输入法
查看>>
责任链模式(chain of responsibility)
查看>>
[转载]java多线程学习-java.util.concurrent详解(一) Latch/Barrier
查看>>
ionic - 运行起来
查看>>
Shell 输入/输出重定向
查看>>
数据结构与算法分析(C++)读书笔记
查看>>
(转)nginx应用总结(1)--基础认识和应用参数优化配置
查看>>
(转)关于sql和MySQL的语句执行顺序(必看!!!)
查看>>
UVALive 3668 A Funny Stone Game(博弈)
查看>>
信息论随笔2: 交叉熵、相对熵
查看>>
再学习之MyBatis.
查看>>
CodeWars题目筛选
查看>>
MySQL— 索引
查看>>
电子书下载:Professional Web Design: Techniques and Templates, 4th Edition
查看>>
10要点解决IE6兼容性问题
查看>>