位置: 编程技术 - 正文

jQuery代码性能优化的10种方法(jquery代码实例)

编辑:rootadmin

推荐整理分享jQuery代码性能优化的10种方法(jquery代码实例),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery常用代码,jquery有用吗,jquery性能优化,jquery代码在哪里运行,jquery技术,jquery性能优化,jquery优点,jquery性能优化,内容如对您有帮助,希望把文章链接给更多的朋友!

1、总是使用#id去寻找element.

在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。选择单个元素

选择button的性能不好的一种方式:

取而代之的是直接选择button:

选择多个元素

在我们讨论选择多个元素的时候,我们真正需要知道的是DOM的遍历和循环才是性能低下的原因。为了尽量减少性能损失, 总是使用最近的父ID去寻找。

2、在Classes前面使用Tags

在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。

总是在一个Class前面加上一个tag名字(记得从一个ID传下来)

注意:在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面 加Tags。例如,它会因为去循环所有的<div>元素去寻找ID为content的<div>,而导致很慢。

按照同样的思路,从多个ID传下来是冗余的。

3、缓存jQuery对象

养成保存jQuery对象到一个变量上(就像上面的例子)的习惯。例如,不要这样做:

取而代之,首现保存jQuery变量到一个本地变量后,再继续你的操作。

提示:使用$前辍表示我们的本地变量是一个jQuery包集。记住,不要在你的应该程序里出现一次以上的jQuery重复的选择操作。 额外提示:延迟存储jQuery对象结果。

如果你想在你的程序的其它地方使用jQuery结果对象(result object(s)),或者你的函数要执行多次,要把它缓存在一个全局范围的对象里。通过定义一个全局容器保存jQuery结果对象,就可以在其它的函数里引用它。

4、更好的利用链

前面的例子也可以这样写:

这样可以让我们写更少的代码,使JavaScript更轻量。

5、使用子查询

jQuery代码性能优化的10种方法(jquery代码实例)

jQuery允许我们在一个包集上附加其它的选择器。因为我们已经在本地变量里保存了父对象这样会减少以后在选择器上的性能开销。

例如,我们可以利用子查询缓存active和inactive lights以便后面的操作。

提示:可以用逗号隔开一次定义多个本地变量,这样可以节省一些字节。

6、限制直接对DOM操作

DOM操作的基本做法是在内存中创建DOM结构,然后再更新DOM结构。这不是jQuery最好的做法,但对JavaScript来讲是高效的。直接操作DOM结构性能是低下的。 例如,如果你需要动态创建一列元素,不要这样做:

取而代之,我们希望在插入DOM结构之前先在一个字符串里创建一套元素。代码

更快的做法,在插入DOM结构之前我们应该总是在一个父节点里包含许多元素

如是你照着上面的做了还是对性能有些迷惑的话,可以参考以下内容:

* 试一下jQuery提供的Clone()方法。Clone()方法创建节点数的拷贝,随后你可以在这个副本中进行操作。

* 使用DOM DocumentFragments. As the creator of jQuery points out, 比直接操作DOM性能上更好. 先创建你需要的结构(就像我们上面用一个字符串做的一样), 然后使用jQuery的 insert or replace methods.

7、事件委托(又名:冒泡事件)

除非特别说明,每一个JavaScript事件(如click, mouseover 等)在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是 你可以只对它们的父级绑定一次,而且可以计算出是哪一个节点触发了事件,而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如,假如我们要开发 一个包含很多input的大型form,当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的:

反而,我们应该在父级侦听click事件。

父节点担当着发报机的工作,可以在触发了事件的目标element上做一些工作。如果你发现自己把一个event listener帮定到很多个element上,那么你这种做法是不正确的。

8、消除查询浪费

虽然jQuery对没有找到任何匹配的elements处理的很好,但是它还是需要花费时间去查找的。如果你的站点有一个全局的JavaScript,你可能会把每个jQuery function都放在 $(document).ready(function(){ // all my glorious code })里。 不要这样做。只去放一些页面上适合用到的function。这样做最有效的方式是你的模板可以完全控制任何时候或者地方执行JavaScript以内联脚 本的方式初始化function。例如,在你的“article”页面模板里,你可能在body标签关闭之前包含以下代码

<script type="text/javascript>mylib.article.init();</script></body& gt;如果你的页面模板包含多种有可能在页面或者不在页面上的模块,或者为了可视化效果你需要它们稍后再初如化,你应该在这些模块之后立即放置初如化函数。

你的全局JavaScript库看起来应该是这样的:

9、遵从$(windows).load

有 一种诱惑会使jQuery开发者hook所有事情到 $(document).ready 这个虚伪的事件里。毕竟在大多数例子里都可以看到这样使用。虽然$(document).ready 非常有用,它在页面呈现时发生,虽然其它对象还在下载中。如果你发现你的页面在下载中停顿,就有可能是$(document).ready 引起的。你可以通过把jQuery functions帮定到$(window).load事件来减少下面下载时的CPU使用率,它是在所有HTML(包括iframe内容)都下载完以后才 去调用所有对象的。

多余的功能,如拖拽、帮定可视化效果和动画、预读取图片等,使用这种方法比较好。

、压缩JS

虽然和jQuery无关,但在这里也要提一下。使JavaScript函数和变量变得可读是一个趋势,这对开发者来讲是必不可少的,但对普通用户来 讲没有任何关系。不用什么借口,是时候把JS压缩纳入我们的工作流程中来了。注释你的代码,在投放到生产环境之前找一个压缩工具进行压缩。使用 YUICompressor 压缩你代码中多余的浪费的字节。根据我们的经验,它可以安全的把JavaScript压缩的尽可能小,而不会多占用CPU。小提示:为了在 YUICompressor里最大化压缩,应该这样这样定义变量(例如:var my_long_variable_name;)

学习和最有效的使用jQuery,最好的方法就是去查jQuery的文档和手册了。

标签: jquery代码实例

本文链接地址:https://www.jiuchutong.com/biancheng/385870.html 转载请保留说明!

上一篇:jQuery实现的网格线绘制方法(jquery网页)

下一篇:jQuery AJAX timeout 超时问题详解

  • 应交税费转出未交增值税借贷方表示什么
  • 纯外贸企业出口到运费可以抵扣吗
  • 税务师考试科目搭配
  • 应交税费是什么科目
  • 备用金可以不要发票吗
  • 出库单上面的单位写谁的
  • 车船税在备注栏怎么报表
  • 缴纳房产税的计税依据
  • 如何进行无形资产核算
  • 软件著作权销售好做吗
  • 自建的固定资产入账价值具体包括哪些
  • 固定资产的资本化后续支出
  • 核定征收的企业所得税怎么算
  • 收到违约金需要缴纳所得税吗
  • 一个月计提2个月工资
  • 一般纳税人简易征收3%
  • 个体户没有三证合一,年检
  • 农产品收购发票使用范围
  • 办税人员需要会计证吗
  • 增值税扣税凭证包括增值税专用发票
  • 汽车销售服务费话术
  • 购买办公桌椅属于什么费用
  • 企业处理二手车增值税没交,有什么影响
  • 公司党支部的费用入账
  • 出口退免税的类型
  • 亏损的结转分录
  • 计提本月城市维护建设税,教育费附加500元
  • windows10如何开启夜间模式
  • 主合同变更对保险的影响
  • 个体工商户需要年审吗
  • PasSrv.exe - PasSrv是什么进程 有什么用
  • vue多模块多项目集成
  • 办公大楼装修费怎么算
  • vue导出word文档打开报错,内容有问题
  • 其他综合收益与营业外收入的区别
  • 资产负债表利润表的勾稽关系
  • 哪些费用报销可以不用发票
  • 付检测费会计分录
  • php实现导出带样本的方法
  • 持续ping ip的命令
  • unlinkhist.dat怎么删除
  • 劳务费过账
  • 机器维修费属于什么会计科目
  • 环保税的算法
  • 磁盘监控命令
  • 公司两个股东变更为一个股东,需要交税么
  • 私车公用的汽油费计入哪个科目
  • 利润分配会计处理例题
  • 移动平均加权法怎么算
  • 小微企业减免的增值税账务处理
  • 个体工商户开普票需要进项票吗
  • 小型微利企业是小微企业吗
  • 一般纳税人已交税金账务处理
  • 企业所得税汇算清缴时间
  • 一般纳税人劳务税率是多少?
  • 出口免税进项税怎么处理
  • 如何理解递延所得税资产和负债
  • 以前期间留抵税额是什么意思
  • 机械租赁公司挂牌流程
  • 以自营方式建造固定资产
  • 工厂加工费的账务怎么做
  • 材料会计实务操作题答案
  • linux内核模块编译步骤
  • 在windows七中
  • windows 安装源
  • 虚拟机的ubuntu
  • macbookair numbers
  • 使用linux常用命令
  • alg.exe是什么程序
  • windows7壁纸怎么恢复
  • win7旗舰版系统重装
  • macappstore下载软件一直要密码
  • ubuntu系统如何设置永不休眠
  • win7系统怎么设置锁屏密码怎么设置
  • Win10 Mobile 10586.306提前上手视频评测
  • bat批处理命令大全
  • unity设置窗口位置
  • python 解析
  • 外地户口在绍兴读小学
  • 南京市国家税务局溧水分局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设