Per.js速度對比Vue.js

來源:互聯網
上載者:User

標籤:net   component   輸出   16px   col   data   瀏覽器   button   document   

Per.js速度對比Vue.js

首先,我要承諾,儘管我是Per.js的作者,但是我在這次測試中完全保持公平公正的原則,不對測試結果有一點改動。

由於Vue.js和Per.js的功能巨多,所以無法測試全部功能,我就在這次測試裡先測試2個有代表性的功能,分別為:for和component。

同時,為了避免糾紛,現在我就先簡單介紹一下具體的參數:

  • 測試電腦為macbook air 2015 13英寸款,mac os版本號碼為10.11.6 (15G31)
  • 測試瀏覽器為google chrome(52.0.2743.116 (64-bit)版)和firefox(61.0.2 (64 位元))
  • 測試Vue.js版本為2.5.17
  • 測試Per.js版本為1.3

現在讓我們先開始測試for指令:(效果:瀏覽器ul標籤輸出20000條資料)

【以下是Vue.js代碼】

<!DOCTYPE html><html>    <head>        <title>SPEED TEST</title>        <meta charset="UTF-8">    </head>    <body>        <ul id="v-for-object" class="demo">          <li v-for="value in object">            {{ value }}          </li>        </ul>        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>        <script src="Per.js"></script>        <script>            var arr = new Array();            for(var i=0;i<=20000;i++){                arr[arr.length] = i;            }            //請看清console.time語句位置!避免產生不必要糾紛            console.time("Vue.js time");            new Vue({              el: ‘#v-for-object‘,              data: {                object: arr              }            });            console.timeEnd("Vue.js time");        </script>    </body></html>

執行時間具體說明: 經過測試,在chrome瀏覽器中,第一次Vue的執行時間大約為220ms,之後每次的執行時間在160到202ms之間。在firefox瀏覽器中,第一次的執行時間為213ms,之後每次的測試時間在158~182ms之間。 接下來我們來看看Per.js的執行時間 【以下是Per.js代碼】

<!DOCTYPE html><html>    <head>        <title>SPEED TEST</title>        <meta charset="UTF-8">    </head>    <body>        <ul id="v-for-object" class="demo">        </ul>        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>        <script src="Per.js"></script>        <script>            var arr = new Array();            for(var i=0;i<=20000;i++){                arr[arr.length] = i;            }            arr[arr.length] = "";            //請看清console.time語句位置!避免產生不必要糾紛            console.time("Per.js time");            Per().do({                el: "#v-for-object",                for: arr            });            console.timeEnd("Per.js time");        </script>    </body></html>

執行時間具體說明: 經過測試,Per.js在chrome瀏覽器裡的第一次的執行時間大約為46.5ms,之後每次的執行時間在38~41ms之間。在firefox瀏覽器裡,Per.js的第一次執行時間為39ms,之後每次的執行時間在36~39ms之間。

結論:

由此可以得出,在google chrome瀏覽器中,Per.js在“使用for指令輸出20000條資訊”的測試中,比Vue.js速度快大約5倍。在firefox瀏覽器中,Per.js的速度比Vue.js的速度快大約4.5倍。

接下來,我們來測試組件的註冊與繪製。 以下代碼使用組件功能在100個元素中間繪製組件。 【以下是Vue.js代碼】

<!DOCTYPE html><html>    <head>        <title>SPEED TEST</title>        <meta charset="UTF-8">    </head>    <body id="body">        <div id=‘components-demo‘></div>        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>        <script src="Per.js"></script>        <script>            for(var i=0;i<=100;i++){                document.getElementById("components-demo").innerHTML += "<button-counter></button-counter>";            }            console.time("Vue.js time");            Vue.component(‘button-counter‘, {              data: function () {                return {                  count: 0                }              },              template: ‘<h1>Hello World</h1>‘            });            new Vue({ el: ‘#components-demo‘ });            console.timeEnd("Vue.js time");        </script>    </body></html>

執行時間具體說明: 經過測試,在chrome瀏覽器中,案頭搜尋引擎,第一次Vue的執行時間大約為67ms,之後每次的執行時間在51到70ms之間。在firefox瀏覽器中,多肉植物,第一次的執行時間為106ms,之後每次的測試時間在78~87ms之間。 下面我們來測試Per.js的效能。 【以下是Per.js代碼】

<!DOCTYPE html><html>    <head>        <title>SPEED TEST</title>        <meta charset="UTF-8">    </head>    <body id="body">        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>        <script src="Per.js"></script>        <script>            for(var i=0;i<=100;i++){                document.getElementById("body").innerHTML += "<button-counter></button-counter>";            }            console.time("Vue.js time");            Per().use("Per.component");            Per().component().set("button-counter","<h1>Hello World</h1>");            Per().component().apply("button-counter");            console.timeEnd("Vue.js time");        </script>    </body></html>

執行時間具體說明: 令人及其驚奇的是(包括我),Per.js在chrome瀏覽器裡的第一次的執行時間居然大約只有1.5ms,之後每次的執行時間在1.2~1.4ms之間。在firefox瀏覽器裡,Per.js的第一次執行時間為2ms,之後每次的執行時間在2~3ms之間。

結論:

由此可以得出,在google chrome瀏覽器中,Per.js在“註冊組件並在100的元素中渲染組件”的測試中,比Vue.js速度快大約45倍。在firefox瀏覽器中,Per.js的速度比Vue.js的速度快大約30倍。

 

Per.js速度對比Vue.js

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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