时间:2021-05-26
有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题。
因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷、更流畅的运行效果。
jquery性能优化高级技巧,下面主要从七个方面对jquery性能优化做介绍:
1.通过CDN(Content Delivery Network)引入jQuery库
2.减少DOM操作
3.适当使用原生JS
4.选择器优化
5.缓存jQuery对象
6.定义一个可以复用的函数
7.用数组方式来遍历jQuery 对象集合
下面详解每一个方法的具体说明:
通过CDN(Content Delivery Network)引入jQuery库
要提升网站中javascript的性能的最简单的一步就是引入最新版本的jQuery库,新发布的版本通常在性能上会有更好的提升而且也修复了一下bug。或者通过CDN引入也是很好的选择,通过CDN引入能够减少网站的加载时间。
以下是一些CDN服务:
<!-- Case 1 - jQuery CDN --><script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script><!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script><!-- Case 3 - requesting the latest minor 1.10.x version (only cached for an hour) --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js" ></script><!-- Case 4 - requesting the absolute latest jQuery version (use with caution) --><script src="http://code.jquery.com/jquery.min.js" ></script>一些国内的CDN服务:
http://plex here}$('#menuButton' ). click(showMenu);$('#menuLink' ). click(showMenu);如果定义一个内联(inline)回调函数同时这个包含多个元素的jQuery对象(正如上面所说的第一个例子),对于这个集合中的每个元素都会在内存中保存一个回调函数的副本。
用数组方式来遍历jQuery 对象集合
你或许没有注意到,但是在性能方面,对于jQuery each方法这种优雅实现是有代价的。有一个办法能够更快地遍历一个jQuery对象。就是通过数组来实现,jQuery对象集合就是一个类数组,具有length和value属性。可以通过程序来测试一下性能:
HTML:
<ul id="testList" > <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <!-- add 50 more --></ul>JS:
var arr = $('li'), iterations = 100000;//------------------------------// Array实现: console.time('Native Loop');for (var z = 0; z < iterations; z++) { var length = arr.length; for (var i = 0; i < length; i++) { arr[i]; }}console.timeEnd('Native Loop');//------------------------------// each实现: console.time('jQuery Each');for (z = 0; z < iterations; z++) { arr.each(function(i, val) { this; });}console.timeEnd('jQuery Each');结果:
可以看到通过数组实现方式遍历,执行效率更高。
//-------------------------------------------------------持续更新...
以上是一些搜集知识的总结,如有任何建议或疑问,欢迎留言讨论。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文较为详细分析了jQuery性能优化技巧。分享给大家供大家参考。具体分析如下:一、使用最新版本的jQuery类库jQuery新版本会较上个版本进行Bug修复和
MySQL性能优化在互联网公司MySQL的使用非常广泛,大家经常会有MySQL性能优化方面的需求。整理了一些在MySQL优化方面的实用技巧。Schema与数据类
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在《JavaScript高级程序
SEO高级搜索指令你用过吗?搜索引擎官方所支持的高级搜索指令,可以方便诊断网站、分析竞争对手、寻找外链资源、区分原创伪原创等技巧。如果您想成为一个真正的优化师,
我们知道,通过一些技巧来对数据库进行优化,可以提高MySQL数据库的性能,那么通常有哪些技巧呢? 第一,设计优化 一般来说,我们可能会希望数据库中每一个