前幾天有位網友詢問了我一個問題，主要是關於JavaScript的prototype特性的效率。因爲作爲一個如此強大並且靈活的東西，難免會讓人覺得效率上可能有較大的損失。但是實際上prototype特性的效率怎麼樣呢？我們下面來詳細說說這個問題。
之前我曾經寫過兩篇隨筆介紹JavaScript語言的prototype特性，"JScript中的prototype(原型)屬性研究(1)"和"JScript中的prototype(原型)屬性研究(2)"。第一篇非常基礎，只是說明了prototype的用途和用法，第二篇基本上算是深入說明了JavaScript的prototype的實現機制，不過當時沒有對prototype的效率作任何討論，真是遺憾。
先看一個prototype屬性和方法效率比較的示例：
<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就會串到一個很高的佔用峯值。