Per.js速度對比Vue.js

時間 2019-11-13

標籤 per.js 速度對比 vue.js vue 欄目 JavaScript 简体版

原文原文鏈接

Per.js速度對比Vue.js

首先，我要承諾，儘管我是Per.js的做者，可是我在此次測試中徹底保持公平公正的原則，不對測試結果有一點改動。html

因爲Vue.js和Per.js的功能巨多，因此沒法測試所有功能，我就在此次測試裏先測試2個有表明性的功能，分別爲：for和component。vue

同時，爲了不糾紛，如今我就先簡單介紹一下具體的參數：chrome

測試電腦爲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條數據）npm

【如下是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/vue@2.5.17/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代碼】app

<!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/vue@2.5.17/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代碼】google

<!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/vue@2.5.17/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代碼】.net

<!DOCTYPE html>
<html>
    <head>
        <title>SPEED TEST</title>
        <meta charset="UTF-8">
    </head>
    <body id="body">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/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之間。