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之间。

结论：

由此能够得出，在google chrome浏览器中，Per.js在“注册组件并在100的元素中渲染组件”的测试中，比Vue.js速度快大约45倍。在firefox浏览器中，Per.js的速度比Vue.js的速度快大约30倍。

这就是最后的结果，说实话，我也没想到Per.js会如此之快，若是各位在测试里面找到了一些小问题，欢迎私信我，我会从新修改问题并测试的。

也但愿那些钟爱Vue.js的人们，不要总是喷咱们的做品，咱们并无恶意，测试结果摆在这里。谢谢！