全新极速CSS选择器引擎whiz

Posted on August 21, 2009 by Fdream

好不容易有些空余时间,便拿来写自己的CSS选择器引擎了,这个CSS选择器引擎的目标只有三个:

  • 速度要快
  • 代码要精简
  • 要支持CSS3的选择器。

希望通过这个,能够真正理解那些牛逼的框架中的一部分,比如jQuery,Mootools,YUI等等。花了接近三个星期的时间,大重构了三遍,从最开始的速度极低到现在的极速,每一次都是大换血。在这个过程中,我看到了那些大师写代码的境界,即使我完成了这样一个东西,代码依然很难看。要做一个CSS选择器并没有你想像的那么难,当然,也不是像玩德州扑克比赛或者是使用Word那么简单,当然也并不复杂。

大家可能看完性能测试才会有兴趣,下图是一个较全的性能测试结果,大家可以在这里测试,大家可以自己跑一跑看(由于加载的东西较多,请耐心等待一会儿再点start按钮)。

代码量目前还没达到我满意的程度,不过已经足够小了,Gzip之后仅仅只有2KB(YUICompressor压缩之后为8.61K(win NTFS)),另外,针对Firefox 3, Opera 9性能还有很大的提升空间,因为我没有使用document.getElementsByClassName。但是这些优化在我看来不再是必要的,因为Firefox的用户应该会很快升级到Firefox 3.5,Opera 10也会很快变成正式版,它们都有本地方法querySelectorAll,所以只要选择器引擎在IE6和IE7下的性能达到最高就可以了,其他的浏览器都有本地方法querySelectorAll了。

在写这个选择器引擎的过程中,更进一步了解了js性能优化的更多方法。

另外,人力有限,此选择器引擎未经过足够完整的案例测试,如果有谁有兴趣帮忙测试者,可以和我联系向我索要源代码,等稳定性达到一定程度后会全面开放源代码。

分享 |
Categories:
Ajax Web
Tags:
,
Comments:
22 Comments
Views:
6,235 Views

Related Posts

22 Responses to <全新极速CSS选择器引擎whiz>

  1. 巫山霏云 says:

    过来特意顶一下的哈,嘿嘿
    看起来还不错,回头测试下-,-

  2. 六BO says:

    呵呵~ 期待你的发布!

  3. terranc says:

    希望所要源码学习。谢谢了
    wuchaoboy%gmail.com

  4. terranc says:

    能更新一下sizzle.js到最新,以及加入yui进行测试一下吗?

  5. 六BO says:

    我也可以帮忙测试。
    341805@qq.com

  6. Fdream says:

    源码已发送到两位的邮箱,辛苦你们了,希望得到反馈^_^

  7. Fdream says:

    TO terranc: Sizzle的最新版本就是1.0

  8. 取水楼 says:

    希望能看到源码,对这个很有兴趣,帮助测试,我也学习下..

    fengpeng000@gmail.com

    感谢.

  9. 白菜 says:

    cisky6.com,请也发给我一份,谢谢!

  10. 白菜 says:

    cisky6.com,请也发给我一份,谢谢!

  11. 白菜 says:

    cisky#126.com,请也发给我一份,谢谢!

  12. 白菜 says:

    cisky6.com,请也发给我一份,谢谢!

  13. argb says:

    ddddddddddddddddddd

  14. argb says:

    argb@live.cn 希望学习源码 帮助测试

  15. ce says:

    cloudend@gmail.com
    麻烦发一份,研究下。

  16. infinte says:

    infinte@yahoo.cn

    谢啦~同时给自己的引擎platina吸收点养分。

  17. tangbin says:

    还可以进一步压缩到5.12KB.愿楼主分享源代码:admin[question]planeart.cn

    国外有个叫mini的选择器,只有1.5kb,后来国内有个人借鉴了把它弄成jquery式的框架——lhgcore.js

  18. mengdasheng says:

    也给我研究研究mengdasheng@126.com,谢谢。

  19. 51jsr says:

    51jsr@163.com 希望学习源码 帮助测试

  20. Pingback: 也谈JavaScript代码性能优化 | Fdream's Blog

  21. bujichong says:

    可否也发我一份研究一下,bujichong@163.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>