速度对比VueJS.md · OSCHINA-MIRROR/skyogo-Per.js

Per.js и Vue.js: сравнение скорости

Прежде всего, я хочу заверить, что, хотя я являюсь автором Per.js, в этом тесте я полностью придерживаюсь принципа честности и непредвзятости и не вношу никаких изменений в результаты теста.

Поскольку у Vue.js и Per.js очень много функций, невозможно протестировать все функции. В этом тесте я сначала протестирую два репрезентативных функционала: for и component.

Кроме того, чтобы избежать споров, позвольте мне кратко представить конкретные параметры:

Тестовый компьютер — MacBook Air 2015 13 дюймов, версия macOS — 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: (эффект: вывод 20 000 элементов данных в теге ul браузера).

Код 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 заняло около 220 мс, а последующие выполнения — от 160 до 202 мс. В браузере Firefox первое выполнение заняло 213 мс, а последующие — от 158 до 182 мс.

Далее рассмотрим время выполнения 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/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>

Результаты выполнения:
В браузере Chrome первое выполнение Per.js заняло примерно 46,5 мс, а последующие — от 38 до 41 мс. В Firefox первое выполнение заняло 39 мс, а последующие — от 36 до 39 мс.

Заключение:

Таким образом, в браузере Google Chrome Per.js в тесте «использование команды for для вывода 20 000 единиц информации» примерно в 5 раз быстрее, чем Vue.js. В браузере Firefox Per.js примерно в 4,5 раза быстрее, чем Vue.js.

Затем мы тестируем регистрацию и отрисовку компонентов.

Следующий код использует функцию компонента для рисования компонентов в 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/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 заняло примерно 67 мс, а последующие — от 51 до 70 мс. Первое выполнение в Firefox заняло 106 мс, а последующие — от 78 до 87 мс.

Давайте теперь проверим производительность 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/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("Per.js time");
            Per().use("Per.component");
``` **Выполнение времени конкретно:**

Удивительно, но (включая меня), Per.js в браузере Chrome первый раз выполняется примерно за 1,5 мс, а последующие разы — от 1,2 до 1,4 мс. В браузере Firefox первый раз Per.js выполняется за 2 мс, а затем — от 2 до 3 мс.

**Вывод:**

В браузере Google Chrome при тестировании Per.js на «регистрацию компонента и рендеринг компонента в 100 элементах» его скорость примерно в 45 раз выше, чем у Vue.js. В браузере Firefox Per.js примерно в 30 раз быстрее Vue.js.

* * *

Всем известно, что шаблоны данных — это наиболее часто используемая функция при использовании Vue. Теперь давайте рассмотрим создание шаблонов данных.

Далее код использует функцию шаблона данных для создания двух переменных в 100 элементов.

Используются версии Vue 2.5.17 и Per.js 2.0. Поскольку Per.js и Vue поддерживают только одноэлементные операции, здесь будет повторяться выполнение методов построения Per и Vue, что эквивалентно сравнению скорости создания метода.

Код Vue.js:

```html
<!DOCTYPE html>
<html>
    <head>
        <title>SPEED TEST</title>
        <meta charset="UTF-8">
    </head>
    <body id="body">
        <div id='data-demo'></div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <script src="http://per-js.skyogo.com/2.0/Per.js"></script>
        <script>
            for(var i=0;i<=100;i++){
                document.getElementById("data-demo").innerHTML += "<p id='p"+i+"'>{{var1}}{{var2}}</p>";
            }
            console.time("Vue.js time");
            for(var i=0;i<=100;i++){
                new Vue({
                    el: '#p'+i,
                    data: {
                        var1: "Hello",
                        var2: "World"
                    }
                })
            }
            console.timeEnd("Vue.js time");
        </script>
    </body>
</html>

Выполнение времени конкретно:

После тестирования в браузере Chrome первое выполнение Vue занимает примерно 58 мс, а последующее — от 48 до 53 мс. В Firefox первое выполнение занимает 143 мс, а последующая — от 148 до 137 мс.

Теперь протестируем производительность Per.js.

Код Per.js:

<!DOCTYPE html>
<html>
    <head>
        <title>SPEED TEST</title>
        <meta charset="UTF-8">
    </head>
    <body id="body">
        <div id='data-demo'></div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <script src="http://per-js.skyogo.com/2.0/Per.js"></script>
        <script>
            for(var i=0;i<=100;i++){
                document.getElementById("data-demo").innerHTML += "<p id='p"+i+"'>{{var1}}{{var2}}</p>";
            }
            console.time("Per.js time");
            for(var i=0;i<=100;i++){
                Per().do({
                    el: '#p'+i,
                    data: {
                        var1: "Hello",
                        var2: "World"
                    }
                });
            }
            console.timeEnd("Per.js time");
        </script>
    </body>
</html>

Выполнение времени конкретно:

Per.js в Chrome занимает примерно 16 мс для первого выполнения, а последующие — от 16 до 21 мс. В Firefox первое выполнение Per.js занимает 62 мс, а последующие — от 54 до 63 мс.

Вывод:

Таким образом, в браузере Google Chrome Per.js при тестировании «рендеринга шаблона данных» примерно в 3,5 раза быстрее, чем Vue.js. В Firefox Per.js примерно в 2,3 раза быстрее Vue.js.

Это окончательный результат. Честно говоря, я не ожидал, что Per.js будет таким быстрым. Если вы обнаружите какие-либо проблемы в тесте, пожалуйста, свяжитесь со мной, и я буду рад исправить проблему и провести повторное тестирование.

Также надеюсь, что поклонники Vue.js не будут постоянно критиковать наши работы. Результаты теста представлены здесь. Спасибо!

OSCHINA-MIRROR/skyogo-Per.js

Per.js и Vue.js: сравнение скорости

Заключение:

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/skyogo-Per.js .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Per.js и Vue.js: сравнение скорости

Заключение:

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/skyogo-Per.js