Question

我正在创建一个角度应用程序，它返回需要在页面上呈现的对象列表（大约30个项目）。

为了提高渲染性能，我使用反应组件。整个事情用打字稿写成，反应组件如下所示：

namespace app {
    'use strict';
    export interface IServiceOrganicProps extends IOrganicResultProps {
        result: Service;
    }

    export class ServiceOrganic extends React.Component<IServiceOrganicProps, {}> {
        render(): any {
            return (
                <div className="service-organic flex">
                    <div className="layout-row">
                        <div className="icon">
                            <img src="img/service.ico"/>
                        </div>
                        <div className="flex layout-column">
                            <div className="title" title={"score: " + this.props.result.score}><a href={this.props.result.url}>{this.props.result.name}</a></div>
                            <div className="link">{this.props.result.url}</div>
                            <p className="body">{ this.props.result.description }</p>
                            <div className="tags">
                                <ul>
                                    {this.props.result.tags.map(function (tag) {
                                        return <li key={tag}><a href="#">{tag}</a></li>;
                                    }) }
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }
    angular.module("app").value("ServiceOrganic", ServiceOrganic);
    angular.module('app').directive('serviceOrganic', function (reactDirective: any, $log: angular.ILogService) {
        return reactDirective(ServiceOrganic, ['result'], {}, { $log: $log });
    });
}

这对chrome非常有用：

加载时间：1s
渲染~160ms
绘画：~1.5ms

但在IE11上，这是：

加载时间+ 4s
DOM事件（加载）：~1.7s
布局：~750ms

有没有办法增加IE上的加载时间？

提高IE11的React渲染速度

0 个答案: