效率让数据说话

    一直不是很喜欢用JS框架内的方法，一直持有能不用就不用的原则，于是类似于如document.getElementById的JS内置方法就用内置，或者自己简单封装一个，尽量避免使用开源框架内的大封装去取。

    理由很简单，从性能上讲，封装得越多调用执行的过程就越长，而我们只是简单的去执行某一句语句的时候，有没有必要一下全部取出来吗？

    前两天上级让我今后都改用Ext.get(id).dom去获取，虽然顺从执行，但心里终究不是很平衡，所以做了如下测试。

    用Ext框架的获取Dom的方法Ext.get(id).dom和内置的方法document.getElementById(id)各跑10000次做比较，各取5条数据。

    测试所用的代码如下：

<span id="getId">被获取对象getId</span>
    <div style="width: 50%;border: #606066 1px solid; float: left">
        <p><a href="javascript: getByExt()">Ext获取Dom</a></p>
        <p>用时(毫秒)：<span id="times1"></span></p>
    </div>
    <div style="width: 50%;border: #606066 1px solid; float:left">
        <p><a href="javascript: getByJs()">原型获取Dom</a></p>
        <p>用时(毫秒)：<span id="times2"></span></p> 
    </div>
<script type="text/javascript">
    function getByExt()
    ...{
        var getDom;
        var beginDate = new Date();
        for (var i = 0; i < 10000; i ++)
        ...{
            getDom = Ext.get("getId").dom;
        }
        var endDate = new Date();
        document.getElementById("times1").innerHTML = endDate - beginDate;
    }
    
    function getByJs()
    ...{
        var getDom;
        var beginDate = new Date();
        for (var i = 0; i < 10000; i ++)
        ...{
            getDom = document.getElementById("getId");
        }
        var endDate = new Date();
        document.getElementById("times2").innerHTML = endDate - beginDate;
    }
</script>

 

Ext获取DOM执行时间	内置方法获取DOM执行时间
250	140
234	156
250	157
234	156
250	156

    结果很明显，性能上内置的方法大大领先。

    原理也好理解，执行Ext.get(id).dom首先需要执行Ext.get(id)，而Ext.get(id)获取的并不止dom一个，而就算获取dom时也是去执行document.getElementById(id)方法，效率上当然大大降低了。

    而获取DOM元素的方法是很常使用的。

    我的想法是，为了方便书写和管理用方法封装一个太长的内置方法是可行的，比如广泛使用的$(id)封装，虽然效率上同样有点影响，但影响不大，用上面的测试方法，用时大概在180左右。

    这种大容量封装在框架内并不少见。

    好吧，我承认，对框架一直有想法，框架固然很强大，但也正因为它太强大了。。。