Реагировать renderToString() Производительность и кэширование реагирующих компонентов

Ответ 1

Используя response-router1.0 и react0.14, мы ошибочно сериализуем наш объект потока несколько раз.

RoutingContext будет вызывать createElement для каждого шаблона в маршрутах вашего реагирования. Это позволяет вам вводить любые реквизиты, которые вы хотите. Мы также используем поток. Мы отправляем сериализованную версию большого объекта. В нашем случае мы делали flux.serialize() внутри createElement. Метод сериализации может занимать ~ 20 мс. С 4 шаблонами это будет дополнительный 80 мс для вашего метода renderToString()!

Старый код:

function createElement(Component, props) {
    props = _.extend(props, {
        flux: flux,
        path: path,
        serializedFlux: flux.serialize();
    });
    return <Component {...props} />;
}
var start = Date.now();
markup = renderToString(<RoutingContext {...renderProps} createElement={createElement} />);
console.log(Date.now() - start);

Легко оптимизируется к этому:

var serializedFlux = flux.serialize(); // serialize one time only!

function createElement(Component, props) {
    props = _.extend(props, {
        flux: flux,
        path: path,
        serializedFlux: serializedFlux
    });
    return <Component {...props} />;
}
var start = Date.now();
markup = renderToString(<RoutingContext {...renderProps} createElement={createElement} />);
console.log(Date.now() - start);

В моем случае это помогло сократить время renderToString() от ~ 120 мс до ~ 30 мс. (Вам все равно нужно добавить 1x serialize() ~ 20ms к общей сумме, что происходит до renderToString()). Это было хорошее быстрое улучшение. - Важно помнить, что всегда делайте все правильно, даже если вы не знаете непосредственного воздействия!

Ответ 2

Идея 1: Кэширование компонентов

Обновление 1: я добавил полный рабочий пример внизу. Он кэширует компоненты в памяти и обновляет data-reactid.

Это на самом деле можно сделать легко. Вам следует monkey-patch ReactCompositeComponent и проверить наличие кэшированной версии:

import ReactCompositeComponent from 'react/lib/ReactCompositeComponent';
const originalMountComponent = ReactCompositeComponent.Mixin.mountComponent;
ReactCompositeComponent.Mixin.mountComponent = function() {
    if (hasCachedVersion(this)) return cache;
    return originalMountComponent.apply(this, arguments)
}

Вы должны сделать это, прежде чем require('react') где-нибудь в вашем приложении.

Примечание из веб-пакета: Если вы используете что-то вроде new webpack.ProvidePlugin({'React': 'react'}), вы должны изменить его на new webpack.ProvidePlugin({'React': 'react-override'}), где вы вносите свои изменения в react-override.js и экспортировать react (т.е. module.exports = require('react'))

Полный пример, который кэширует в памяти и обновляет атрибут reactid, может быть следующим:

import ReactCompositeComponent from 'react/lib/ReactCompositeComponent';
import jsan from 'jsan';
import Logo from './logo.svg';

const cachable = [Logo];
const cache = {};

function splitMarkup(markup) {
    var markupParts = [];
    var reactIdPos = -1;
    var endPos, startPos = 0;
    while ((reactIdPos = markup.indexOf('reactid="', reactIdPos + 1)) != -1) {
        endPos = reactIdPos + 9;
        markupParts.push(markup.substring(startPos, endPos))
        startPos = markup.indexOf('"', endPos);
    }
    markupParts.push(markup.substring(startPos))
    return markupParts;
}

function refreshMarkup(markup, hostContainerInfo) {
    var refreshedMarkup = '';
    var reactid;
    var reactIdSlotCount = markup.length - 1;
    for (var i = 0; i <= reactIdSlotCount; i++) {
        reactid = i != reactIdSlotCount ? hostContainerInfo._idCounter++ : '';
        refreshedMarkup += markup[i] + reactid
    }
    return refreshedMarkup;
}

const originalMountComponent = ReactCompositeComponent.Mixin.mountComponent;
ReactCompositeComponent.Mixin.mountComponent = function (renderedElement, hostParent, hostContainerInfo, transaction, context) {
    return originalMountComponent.apply(this, arguments);
    var el = this._currentElement;
    var elType = el.type;
    var markup;
    if (cachable.indexOf(elType) > -1) {
        var publicProps = el.props;
        var id = elType.name + ':' + jsan.stringify(publicProps);
        markup = cache[id];
        if (markup) {
            return refreshMarkup(markup, hostContainerInfo)
        } else {
            markup = originalMountComponent.apply(this, arguments);
            cache[id] = splitMarkup(markup);
        }
    } else {
        markup = originalMountComponent.apply(this, arguments)
    }
    return markup;
}
module.exports = require('react');

Ответ 3

Это не полное решение У меня была та же проблема с моим изоморфным приложением реагировать, и я использовал несколько вещей.

1) Используйте Nginx перед вашим сервером nodejs и короткое время кешируйте полученный ответ.

2) В случае отображения списка элементов я использую только подмножество списка. например, я буду отображать только элементы X, чтобы заполнить область просмотра, и загрузить остальную часть списка на стороне клиента, используя Websocket или XHR.

3) Некоторые из моих компонентов пусты при рендеринге на стороне сервера и будут загружаться только из кода на стороне клиента (componentDidMount). Этими компонентами обычно являются графики или компоненты, связанные с профилем. эти компоненты обычно не приносят никакой пользы с точки зрения SEO

4) О SEO, из моего опыта 6 месяцев с изоморфным приложением. Google Bot может легко читать веб-страницу React на стороне клиента, поэтому я не уверен, почему мы беспокоимся о рендеринге на стороне сервера.

5) Сохраните <Head > и <Footer> как статическую строку или используйте шаблонизатор (Reactjs-handellbars) и визуализируйте только содержимое страницы (в нем должны быть сохранены несколько визуализированных компонентов). В случае одностраничного приложения вы можете обновить описание заголовка в каждой навигации внутри Router.Run.

Ответ 4

Я думаю, fast-react-render может вам помочь. Это увеличивает производительность рендеринга вашего сервера три раза.

Для этого вам нужно всего лишь установить пакет и заменить ReactDOM.renderToString на FastReactRender.elementToString:

var ReactRender = require('fast-react-render');

var element = React.createElement(Component, {property: 'value'});
console.log(ReactRender.elementToString(element, {context: {}}));

Также вы можете использовать fast-react-server, в этом случае рендер будет в 14 раз быстрее, чем традиционный рендеринг. Но для этого каждый компонент, который вы хотите визуализировать, должен быть объявлен вместе с ним (см. Пример в quick-react-seed, как вы можете это сделать для webpack).