首頁 > 其他

使用prototype特性編程中的效率問題

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

    前幾天有位網友詢問了我一個問題，主要是關於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就會串到一個很高的佔用峰值。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More