使用prototype特性编程中的效率问题 (转)
2010-09-24 17:52
411 查看
前几天有位网友询问了我一个问题,主要是关于JavaScript的prototype特性的效率。因为作为一个如此强大并且灵活的东西,难免会让人觉得效率上可能有较大的损失。但是实际上prototype特性的效率怎么样呢?我们下面来详细说说这个问题。
之前我曾经写过两篇随笔介绍JavaScript语言的prototype特性,"JScript中的prototype(原型)属性研究(1)"和"JScript中的prototype(原型)属性研究(2)"。第一篇非常基础,只是说明了prototype的用途和用法,第二篇基本上算是深入说明了JavaScript的prototype的实现机制,不过当时没有对prototype的效率作任何讨论,真是遗憾。
先看一个prototype属性和方法效率比较的示例:
<html>
<head>
<title>Prototype Performancetitle>
<meta name="author" content="birdshome@cnblogs" />
</head>
<body>
<script language="javascript">
function fnMethod(i)
{
var tmp = i+3;
}
Object.prototype.i = 0;
Object.prototype.fnMethod = function()
{
var tmp = this.i+3;
}
</script>
<script language="javascript">
function Test_fnMethod()
{
var dt = new Date();
for ( var i=0 ; i < 100 ; ++i )
{
for ( var j=0 ; j < 10000 ; ++j )
{
fnMethod(i);
}
}
alert(new Date() - dt);
}
function Test_prototype_fnMethod()
{
var obj = {};
var dt = new Date();
for ( var i=0 ; i < 100 ; ++i )
{
for ( var j=0 ; j < 10000 ; ++j )
{
obj.fnMethod();
}
}
alert(new Date() - dt);
}
</script>
<button onclick="Test_fnMethod()">
fnMethod</button>
<button onclick="Test_prototype_fnMethod()">
prototype.fnMethod</button>
</body>
</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就会串到一个很高的占用峰值。
之前我曾经写过两篇随笔介绍JavaScript语言的prototype特性,"JScript中的prototype(原型)属性研究(1)"和"JScript中的prototype(原型)属性研究(2)"。第一篇非常基础,只是说明了prototype的用途和用法,第二篇基本上算是深入说明了JavaScript的prototype的实现机制,不过当时没有对prototype的效率作任何讨论,真是遗憾。
先看一个prototype属性和方法效率比较的示例:
<html>
<head>
<title>Prototype Performancetitle>
<meta name="author" content="birdshome@cnblogs" />
</head>
<body>
<script language="javascript">
function fnMethod(i)
{
var tmp = i+3;
}
Object.prototype.i = 0;
Object.prototype.fnMethod = function()
{
var tmp = this.i+3;
}
</script>
<script language="javascript">
function Test_fnMethod()
{
var dt = new Date();
for ( var i=0 ; i < 100 ; ++i )
{
for ( var j=0 ; j < 10000 ; ++j )
{
fnMethod(i);
}
}
alert(new Date() - dt);
}
function Test_prototype_fnMethod()
{
var obj = {};
var dt = new Date();
for ( var i=0 ; i < 100 ; ++i )
{
for ( var j=0 ; j < 10000 ; ++j )
{
obj.fnMethod();
}
}
alert(new Date() - dt);
}
</script>
<button onclick="Test_fnMethod()">
fnMethod</button>
<button onclick="Test_prototype_fnMethod()">
prototype.fnMethod</button>
</body>
</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就会串到一个很高的占用峰值。
相关文章推荐
- 使用prototype特性编程中的效率问题
- IronRuby:元编程特性【method_missing】的使用
- 使用pcap_findalldevs_ex 编程出现问题
- Android 编程下 ListView 和 CheckBox 混合使用时的常见问题
- Android网络编程之使用get方式向服务端提交数据和乱码问题的解决
- 笔记:使用对象数组提高效率的问题
- html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
- 在jboss4.x.x中解决jsp不能使用泛型等jdk5新语法特性的问题
- WCF热门问题编程示例(3):WCF是否使用或者支持IOCP完成端口(整理补充)
- 提升Delphi编程效率必须使用的快捷键(Delphi2007版本)
- 单独使用jdbc编程问题
- android新特性:使用CollapsingToolbarLayout实现折叠效果及问题解决
- socket编程小问题:地址已经被使用——Address already in use
- 单独使用jdbc编程问题总结(一)
- 关于Android JNI 编程如何定位段错误的问题(addr2line的使用)
- 使用servlet编程,解决输出到页面的中文显示乱码问题。
- 在C#中使用ASV封装编程实践中遇到的问题总结
- Java编程long数据类型的使用问题
- 关于STL模板的使用效率与控制输出时最后不加空格问题