天天看点

使用prototype特性编程中的效率问题

    前几天有位网友询问了我一个问题,主要是关于JavaScript的prototype特性的效率。因为作为一个如此强大并且灵活的东西,难免会让人觉得效率上可能有较大的损失。但是实际上prototype特性的效率怎么样呢?我们下面来详细说说这个问题。

先看一个prototype属性和方法效率比较的示例:

使用prototype特性编程中的效率问题

<html>

使用prototype特性编程中的效率问题

<head>

使用prototype特性编程中的效率问题

    <title>Prototype Performancetitle>

使用prototype特性编程中的效率问题

    <meta name="author" content="birdshome@cnblogs" />

使用prototype特性编程中的效率问题

</head>

使用prototype特性编程中的效率问题

<body>

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

    <script language="javascript">

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

    function fnMethod(i)

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

{

使用prototype特性编程中的效率问题

        var tmp = i+3;

使用prototype特性编程中的效率问题

    }

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

    Object.prototype.i = 0;

使用prototype特性编程中的效率问题

    Object.prototype.fnMethod = function()

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

        var tmp = this.i+3;

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

    </script>

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

    function Test_fnMethod()

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

        var dt = new Date();

使用prototype特性编程中的效率问题

        for ( var i=0 ; i < 100 ; ++i )

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

            for ( var j=0 ; j < 10000 ; ++j )

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

                fnMethod(i);

使用prototype特性编程中的效率问题

            }

使用prototype特性编程中的效率问题

        }

使用prototype特性编程中的效率问题

        alert(new Date() - dt);

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

    function Test_prototype_fnMethod()

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

        var obj = 

使用prototype特性编程中的效率问题

{};

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

                obj.fnMethod();

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

    }    

使用prototype特性编程中的效率问题
使用prototype特性编程中的效率问题

    <button onclick="Test_fnMethod()">

使用prototype特性编程中的效率问题

        fnMethod</button>

使用prototype特性编程中的效率问题

    <button onclick="Test_prototype_fnMethod()">

使用prototype特性编程中的效率问题

        prototype.fnMethod</button>

使用prototype特性编程中的效率问题

</body>

使用prototype特性编程中的效率问题

</html>

    上面示例的测试结果分别是:4,046ms和4,719ms!(P4 2.4G IE6 SV1

en)。普通方法和原型方法之间的每一次调用效率差别为:663/1,000,000 毫秒(实际上是一次原型属性和一次原型方法调用共同消耗的时间周期,var tmp = this.i+3;)。

这个结果看起来挺不错的,似乎使用prototype也就不存在什么效率问题了。但是如果我们在一个页面中使用了大量的自定义对象,同时对象又和表现层的HTML元素对象建立了较密切的引用联系后,我们常常会觉的整个页面对脚本的执行都慢了下来,这是怎么回事呢?是谁在吞噬CPU资源?!

这是由于JavaScript这种脚本语言不需要用户管理内存使用,所以它自身需要管理自己的资源开销,也就是说JavaScript的运行引擎要负责GC。但是JavaScript使用的"简单标记清除"算法,对于复杂的环状引用的标记不是很有效(我在IE的Memory

Leak相关文章中有详细介绍),加之IE对于DHTML

DOM象生存期策略等问题。当页面内的DOM和脚本对象越来越多,并不能及时释放后,IE的脚本执行效率就非常明显的降下来了。严重到我们刚打开IE时很简单的一个脚本操作,都会变得很缓慢,一执行CPU就会串到一个很高的占用峰值。

本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。