实用的jQuery代码性能优化
代码优化是一个很重要的开发态度,一点点的优化对于程序来讲可能是微乎其微的,但是把所有的一点都加起来就能够达到水滴石穿的效果,所以要在平时的开发过程中养成优化代码的好习惯。
1. 检测元素是否存在
避免对当前页面上不存在的元素执行操作
2. 使用id取代class
使用高效的选择器,jQuery是使用JavaScript自身的getElementById方法来按照id查找元素。而当使用class选择器来查找元素时,jQuery是使用自身的方法来获取元素(至少在部分老的浏览器中是如此)。
我们将使用不同的选择器来寻找第二个li元素。然后我们对每种选择器进行测试,看看他们在性能上的差异。第一种办法,也是最简单的,我们直接使用selected class来指向元素,然后我们看看Firebug profiler返回的结果。
接下来,我们从他的父元素的ID开始查找:
1. 检测元素是否存在
避免对当前页面上不存在的元素执行操作
- 1 var ele = $("#somethingThatisNotHere");
- 2 if ( ele[0] ) {
- 3 ele.text("Some text").slideUp(300).addClass("editing");
- 4
2. 使用id取代class
使用高效的选择器,jQuery是使用JavaScript自身的getElementById方法来按照id查找元素。而当使用class选择器来查找元素时,jQuery是使用自身的方法来获取元素(至少在部分老的浏览器中是如此)。
我们将使用不同的选择器来寻找第二个li元素。然后我们对每种选择器进行测试,看看他们在性能上的差异。第一种办法,也是最简单的,我们直接使用selected class来指向元素,然后我们看看Firebug profiler返回的结果。
- 1 console.profile() ;
- 2 $(".selected");
- 3 console.profileEnd();
返回的结果是0.30毫秒。接下来我们添加一个标签名,来缩小范围。这次我们通过使用document.getElementsByTagName来指定selected的DOM元素,以此缩小查找范围。
- 1 console.profile() ;
- 2 $("li.selected");
- 3 console.profileEnd();
接下来,我们从他的父元素的ID开始查找:
- 1 console.profile() ;
- 2 $("#someList .selected");
- 3 console.profileEnd();
成绩是:0.283毫秒。现在让我们声明更具详细点,我们在祖先元素ID后面指定元素类型。
- 1 console.profile() ;
- 2 $("#someList li.selected");
- 3 console.profileEnd();
成绩是:0.275毫秒。又减少了一点时间。最后让我们直接通过ID来指向元素:
- 1 console.profile() ;
- 2 $("#mainItem");
- 3 console.profileEnd();
成绩是:0.165毫秒。提高惊人!这个测试向你展示了使用JS自带方法的执行速度有多快。注意虽然许多新型的浏览器可以享受getElementsByClassName带来的好处,但是老的浏览器不行——这回会导致代码效率急剧下降。所以在写代码的时候,牢记这点。
3、避免查询浪费
- 1 $("#mainItem").hide().val("Hello").html("Oh, hey there!").show();
【实用的jQuery代码性能优化】相关文章
3. jQuery性能优化
10. 实用的jQuery日历插件推荐
本文来源:https://www.51html5.com/a1289.html
﹝实用的jQuery代码性能优化﹞相关内容
- 7款很实用的jQuery/CSS3插件及源码下载
- 超酷实用的jQuery焦点图赏析及源码
- 15个超级实用的jQuery插件
- 精美实用的jQuery插件精选
- 10个最好最实用的jQuery图像滑块插件
- 小巧实用的 jQuery 谷歌地图插件
- 18 个最新实用的 jQuery 插件
- 13款精彩实用的最新jQuery插件
- 小巧实用的 jQuery 谷歌地图插件
- 实用的 CSS3 参考手册和代码生成工具