最近一直在做网站的优化方面的工作,在实际优化的过程中逐渐发现yahoo的34条只能作为一个大的方向,除此之外还有很多地方值得前端工程师关注的。结合最近的优化体会及实地测试,现发出来一部分供大家批评指正:

看网上看过很多ID和class选择器的对比,其实没有经过自己的测试,一般来说很难在自己写代码的时候注意这些,所以希望各位前端大神在某些方面有疑问时,最好自己编代码测试。以下是本人的代码及测试结果:

一、只查找一层的选择器,即没有子元素的选择器上,设置的条件及得出的结果如下,比较可以得出ID选择器有很大的优势,查找时间基本上是Class选择器的1/5不到。

测试页面的行数大概为1000行,
需要查找的代码:<p id="iDTest" class="iDTest">sssss</p>
查找逻辑:
<script>
$(function(){
alert(findById()+"sss"+findByClass());
})
function findById(){
var time_before = new Date();
var second = time_before.getTime();
for(var i=0;i<10000;i++){
var ID_test = $("#iDTest");
}
var time_after = new Date();
var second_after = time_after.getTime();
return (second_after - second);
}
function findByClass(){
var time_before = new Date();
var second = time_before.getTime();
for(var i=0;i<10000;i++){
var class_test = $(".iDTest");
}
var time_after = new Date();
var second_after = time_after.getTime();
return (second_after - second);
}
</script>

测试结果:

浏览器                     ID选择器        class选择器

ff(21.0)                276ms           1375ms

chrome(27.0)       15ms             45ms

safari(5.1.7)         18ms             50ms

IE(7)                   550ms           52910ms

IE(8)                   553ms           2870ms

IE(9)                   285ms           1249ms

IE(10)                 288ms           1273ms

二、查找的当前元素是通过父元素查找时

代码行数为:1000行
需要查找的代码:<div class="test2">
<p class="test3"></p>
</div>
<div id="test2">
<p class="test3"></p>
</div> 查找逻辑:
<script>
$(function(){
alert(findById()+"sss"+findByClass());
})
function findById(){
var time_before = new Date();
var second = time_before.getTime();
for(var i=0;i<10000;i++){
//var ID_test = $("#test2").find(".test3");
var ID_test = $("#test2 .test3");
}
var time_after = new Date();
var second_after = time_after.getTime();
return (second_after - second);
}
function findByClass(){
var time_before = new Date();
var second = time_before.getTime();
for(var i=0;i<10000;i++){
//var class_test = $(".test2").find(".test3");
var class_test = $(".test2 .test3");
}
var time_after = new Date();
var second_after = time_after.getTime();
return (second_after - second);
}
</script>

具体的结果数据就不贴出来了,大体的结果是ie7-10、safari、chrome依次递减,并且除了ie7(3955ms/58196ms)之外,其他的差别id选择器和class选择器差别不大。

在代码中,注释了用find方法查找的代码,我用了find方法测试了下,结果这种方法在safari和chrome下的查找时间仅为不用find方法的1/10,但是其他的浏览器下,find方法的class选择器查找时间增加了50%左右,id选择器时间基本上没有什么变化;但是现在就PC

端来说,safari和chrome的市场占有率还不是很高,建议在涉及到此类查找时,最好不要用find这种链式写法。

总体比较,id选择器的查找时间较class选择的器的较少,因此建议在选择器的选择时,可以选择ID选择器,最好用ID选择器,对于这种简单的页面,可能在实际应用中使用id和class选择器时,很难发现其区别,但是在有些函数与scroll函数绑定时,就会很容易发现。

jQuery ID与Class性能对比之一的更多相关文章

  1. php+mysql预查询prepare 与普通查询的性能对比

    prepare可以解决大访问量的网站给数据库服务器所带来的负载和开销,本文章通过实例向大家介绍预查询prepare与普通查询的性能对比,需要的朋友可以参考一下. 实例代码如下: <?php cl ...

  2. list 、set 、map 粗浅性能对比分析

    list .set .map 粗浅性能对比分析   不知道有多少同学和我一样,工作五年了还没有仔细看过list.set的源码,一直停留在老师教导的:"LinkedList插入性能比Array ...

  3. SQL点滴10—使用with语句来写一个稍微复杂sql语句,附加和子查询的性能对比

    原文:SQL点滴10-使用with语句来写一个稍微复杂sql语句,附加和子查询的性能对比 今天偶尔看到sql中也有with关键字,好歹也写了几年的sql语句,居然第一次接触,无知啊.看了一位博主的文章 ...

  4. Net Core下多种ORM框架特性及性能对比

    在.NET Framework下有许多ORM框架,最著名的无外乎是Entity Framework,它拥有悠久的历史以及便捷的语法,在占有率上一路领先.但随着Dapper的出现,它的地位受到了威胁,本 ...

  5. BeetleX和Asp.net Core之webapi基础性能对比

    本文主要针对BeetleX和Asp.net Core在基础WebApi功能性能对比 测试环境描述 硬件配置:E1230V2 16G内存 10Gb带宽 操作系统:Windows server 2008 ...

  6. MyISAM与InnoDB两者之间区别与选择,详细总结,性能对比

    1.MyISAM:默认表类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.不 ...

  7. Hadoop vs Spark性能对比

    http://www.cnblogs.com/jerrylead/archive/2012/08/13/2636149.html Hadoop vs Spark性能对比 基于Spark-0.4和Had ...

  8. python性能对比

    python性能对比之items #1 #-*- coding:utf8-*- import datetime road_nodes = {} for i in range(5000000): roa ...

  9. kafka基本版与kafka acl版性能对比(单机版)

    一.场景 线上已经有kafka集群,服务运行稳定.但是因为产品升级,需要对kakfa做安全测试,也就是权限验证. 但是增加权限验证,会不会对性能有影响呢?影响大吗?不知道呀! 因此,本文就此来做一下对 ...

随机推荐

  1. [JavaEE] Hibernate ORM

    一. Hibernate的简要介绍 Hibernate是轻量级Java EE应用的持久层解决方案,Hibernate不仅管理者Java类到数据库表的映射(包括Java 数据类型到SQL数据类型的映射) ...

  2. 关于URLEncoder的编码和URLDecode解码

    在我们开发中,很多时候会遇见各种编码乱码的问题,其实这都是编码不一致的问题,如果你懂得了关于URLEncoder的编码和URLDecode解码,那么问题就会随之消失! 下面我们看看关于编码的代码: [ ...

  3. Precompile Prefix file(.pch文件)

    参考资料: http://blog.csdn.net/lwjok2007/article/details/46385595 http://www.tuicool.com/articles/beURbe ...

  4. (转)MySql开启远程连接权限

    命令行登陆: mysql -u root -p 不行的话可以从MySql.exe进入,找到Mysql根目录中路径类似:"MySQL\bin\mysql.exe",这样: D:\We ...

  5. 【前端JS、后台C#】编码解码。

    最近做项目,出现中文乱码的问题,特地研究一下. GB2312,指的是中文 UTF8,指的是国标,包含中文.英文. 但是通过JQuery.ajax的Get.Post,如果直接传递中文或者特殊字符的特使字 ...

  6. easyui window自动居中(修复了iframe弹窗被遮盖问题)

    $.extend($.fn.window.defaults, { onOpen:function(left, top){ var iframeWidth = $(this).parent().pare ...

  7. Oracle10GODP连接11G数据库,出现ORA - 1017用户名/口令无效; 登录被拒绝 的问题

    一.出现症状 1.使用sqlplus连接正常 2.C#使用10g的ODP.NET连接时,报上面的错误 二.原因 1.Oracle11G之前密码是不区分大小写的,从11G开始默认密码区分大小写 2.使用 ...

  8. js继承关系

    跟传统面向对象语言比起来,js在继承关系方面比较特别,如果第一次看恐怕会有些抓狂,偶就是这样(又透露小白本质#=_=),从哪里说起好呢?函数调用? js中函数的调用方式大致可分以下几种: 1. 普通函 ...

  9. java使用POI jar包读写xls文件

    主要使用poi jar来操作excel文件.代码中用到的数据库表信息见ORACLE之表.使用public ArrayList<Person> getPersonAllRecords()获得 ...

  10. 调用WCF接口的方法

    通过对接口调用可能出现的异常作出判断和处理,避免资源的浪费和占用~ public class SvcHelper { public static void Using(T client, Action ...