React VS Angularjs vs Knockoutjs: сравнение производительности

Автор оригинала: Chris Harrington.

Эта статья будет сравнивать производительность реактивных js против угловых js js vs rushout js в трех разных браузерах: Chrome, Firefox и Safari.

Недавно я написал статью, сравнивающую RECT JS и угловые JS, и становится справедливым вниманием, поэтому я подумал, что я пойду на шаг вперед и покажу, как хорошо каждый из двух выполняет. Я также добавил в нокаут JS в смесь здесь только для ради сравнения, а также некоторым необработанным манипуляциям DOM JavaScript DOM, чтобы дать базовую линию относительно того, насколько хорошо вещи работают через доску.

Я собрал быструю страницу, которая позволяет увидеть разницу времени рендеринга между тремя рамками, а также манипулированием необработанного дома. Это то, что я использовал, чтобы выяснить, как долго каждые рамки принимают большие списки, как видно в таблице результатов ниже. Посмотрите здесь Отказ

Тестирование методологии

Это ни в коем случае не является научным тестом относительно того, насколько хорошо выполняет каждую структуру. Тем не менее, я попытался сделать его равным всем каркасам, поэтому к этому окончанию, я собираюсь пройтись по тому, как я написал тест каждой рамки ниже. По сути, я генерирую список 1000 предметов, которые получают в UL Тег, а затем измерить, как долго требуется, измеряя даты до и после рендера. Пользователь может выбрать элемент в списке тоже, поэтому это не просто прямой HTML-рендер; Есть связанные события. Это не идеальный тест любой растягивающейся, но он получает точку.

Примечание: Если вы заинтересованы в этом разделе вообще, вам нужно понадобиться, по крайней мере, проходящее понимание о том, как построить что-то в каждом из рамок. Учебники по реагированию, угловым и нокауте находятся за пределами этой статьи.

Реагировать js.

var Class = React.createClass({
    select: function(data) {
        this.props.selected = data.id;
        this.forceUpdate();
    },

    render: function() {
        var items = [];
        for (var i = 0; i < this.props.data.length; i++) {
            items.push(
                React.createElement("div", { className: "row" },
                    React.createElement("div", { className: "col-md-12 test-data" },
                        React.createElement("span", { className: this.props.selected === this.props.data[i].id ? "selected" : "", onClick: this.select.bind(null, this.props.data[i]) }, this.props.data[i].label)
                    )
                )
            );
        }

        return React.createElement("div", null, items);
    }
});

$("#run-react").on("click", function() {
    var built = new Class({ data: data, selected: null });

    var data = _buildData(),
    date = new Date();

    React.render(built, $("#react")[0]);
    $("#run-react").text((new Date() - date) + " ms");
});

Таким образом, как быстрый спуск, когда пользователь инициирует прогон, я создаю новый список 1000 элементов, обратите внимание на текущее время, что делает класс React, а затем измерить, как долго потребовалось и написать это время страница. Сам класс простын, с быстрым циклом в функции рендеринга для толкания всех созданных Ли Теги в массив, а затем рендуринг этого массива в содержащую Div Отказ Там есть OnClick Привязка набор на Ли выбрать это тоже.

Угловые js.


    
        
            {{item.label}}

angular.module("test", []).controller("controller", function($scope) {
    $scope.run = function() {
        var data = _buildData(),
        date = new Date();

        $scope.selected = null;
        $scope.$$postDigest(function() {
            $("#run-angular").text((new Date() - date) + " ms");
        });

        $scope.data = data;
    };

    $scope.select = function(item) {
        $scope.selected = item.id;
    };
});

Вся страница производительности помечается как угловое приложение, поэтому наращивание модуля довольно просто. Обратите внимание, здесь есть $$ postdigest Крючок, который является внутренней угловой конструкцией. Это позволяет нам указать обратный вызов, чтобы пожар после завершения завершенного цикла.

Нокаут js.

ko.applyBindings({
    selected: ko.observable(),
    data: ko.observableArray(),

    select: function(item) {
        this.selected(item.id);
    },

    run: function() {
        var data = _buildData(),
        date = new Date();

        this.selected(null);
        this.data(data);
        $("#run-knockout").text((new Date() - date) + " ms");
    }
}, $("#knockout")[0]);

Здесь мы используем анонимный шаблон для привязки нокаута. Мы устанавливаем щелчок, текстовые и CSS-связывание для указания, какой элемент выбран, и A foreach петля в нокауте HTML, чтобы на самом деле сделать рендеринг.

Сырая домо-манипуляции

Я добавил RAW DOM Manipulation для предоставления базовой линии относительно того, как запустить тот же тест без каких-либо Fancypants Framework.

$("#run-raw").on("click", function() {
    document.getElementById("raw").innerHTML = "";
    var data = _buildData(),
        date = new Date(),
        template = $("#raw-template").html(),
        html = "";

    for (var i = 0; i < data.length; i++) {
        var render = template;
        render = render.replace("{{className}}", "");
        render = render.replace("{{label}}", data[i].label);
        html += render;
    }

    document.getElementById("raw").innerHTML = html;

    $("#raw").on("click", ".test-data span", function() {
        $("#raw .selected").removeClass("selected");
        $(this).addClass("selected");
    });

    $("#run-raw").text((new Date() - date) + " ms");
});

Для сырья, я схватив шаблон из Сценарий Тег (отмечен типом Text/HTML ) и замените некоторые ключевые слова, завернутые в двойные фигурные скобки с соответствующим текстом. Click События подключены через jQuery.

Полученные результаты

Я провел все испытания в Chrome 39.0.2171.95, Firefox 34.0.5 и Safari 7.0.2, открыв Тестовая страница и нажав кнопку запуска для каждой структуры в десять раз. Если вы заинтересованы в необработанных данных, я сделал его доступным здесь Отказ Существуют некоторые необычные графики, которые показывают результаты.

Анализ

В среднем реагируют реагируют самые быстрые при рендеринге списка 1000 предметов. Это удивительный результат, потому что я бы ожидал, что манипулирование необработанным домом, чтобы быть самым быстрым, так как ничто не слишком подключено и так далее. В тесте Chrome есть интересный выброс в том, что второй пробег теста React React занимает очень долгое время: почти 600 мс. Это происходит каждый раз, когда второй тест работает в Chrome после свежей перезагрузки, и я не уверен, почему. Сырые манипуляции DOM приходят во втором, что меня не удивляет, так как это, очевидно, намного легче, чем угловой, либо нокаут, ничто другое, чтобы зацепить или заботиться о сценах. Угловой приходит в третьем, а выбивает в последний раз. Нокаут занимает особенно долгое время в Firefox (~ 420 мс). В соответствующем примечании Safari является лучшим браузером через доску для всех проверенных структур, но самых медленных для необработанного теста.

Если производительность – это ваша основная мотивация, Rect – хороший выбор для рамки, особенно если вы показываете большое количество данных. Я понимаю, что этот пример относительно утеряется, так как никто в своем правом уме не будет отображаться 1000 предметов все сразу, но я чувствую, что это ориентируется на то, к какой структуре лучше всего работает в целом.