Question

我们遇到性能问题，它与具有大量元素的网格有关。最坏的情况（非常罕见）最多10000个DOM元素连接到angularJS，但更常见的情况是1000-2000左右。

我已经对性能进行了一些测试，并且我们认为在angularJS和angular中的性能非常相似。我有点惊讶，因为据说这是升级到棱角分明的原因之一。

该特征是在第一次加载，绘制和连接元素到网格。当然后改变元素角度稍微快一些，但它不是一个大的。

我来回混合很多，但代码看起来像这样：

为什么Angular不会更快？在这种情况下，瓶颈是否在DOM中？除了分页和永久滚动之外，还有另一种方法可以让它更快吗？

AngularJS： HTML：

<body ng-controller="MainCtrl">
    Angular 1
    <span ng-click="loadData(1000)" style "height:500px; width:200px; background-color:green">{{title}}</span>

    <span ng-click="resetData()" style "height:500px; width:200px; background-color:green"> - Reset</span>
    <!-- <table class="table table-hover table-condensed bs-body-table" infinite-scroll="myPagingFunction()" infinite-scroll-distance="3"> -->
    <table class="table table-hover table-condensed bs-body-table">
        <tbody>
            <!-- Level 1 Groups -->
            <tr ng-repeat="row in reportList track by $index">
                <td>{{::row.column1}}</td>
                <td>{{::row.column2}}</td>
                <td>{{::row.column3}}</td>
                <td>{{::row.column4}}</td>
                <td>{{::row.column5}}</td>
                <td>{{::row.column6}}</td>
                <td>{{::row.column7}}</td>
                <td>{{::row.column8}}</td>
                <td>{{::row.column9}}</td>
                <td>{{::row.column10}}</td>
                <td>{{::row.column11}}</td>
                <td>{{::row.column12}}</td>
                <td>{{::row.column13}}</td>
                <td>{{::row.column14}}</td>
                <td>{{::row.column15}}</td>
            </tr>
        </tbody>
    </table>
</body>

使用Javascript：

controller() {
    var data = [];

    for (let i = 0; i < 500; i++) {
        data.push({
            id: i,
            column1: 'column1' + i,
            column2: 'column2' + i,
            column3: 'column3' + i,
            column4: 'column4' + i,
            column5: 'column5' + i,
            column6: 'column6' + i,
            column7: 'column7' + i,
            column8: 'column8' + i,
            column9: 'column9' + i,
            column10: 'column3' + i,
            column11: 'column11' + i,
            column12: 'column12' + i,
            column13: 'column13' + i,
            column14: 'column14' + i,
            column15: 'column15' + i,
        });
    };
}

角：

HTML：

<span (click)="loadData()">{{buttonText}}</span>
<span (click)="resetData()">Reset</span>
<table>
    <tr *ngFor="let row of reportList; trackBy: let i=index">
        <td>{{row.column1}}</td>
        <td>{{row.column2}}</td>
        <td>{{row.column3}}</td>
        <td>{{row.column4}}</td>
        <td>{{row.column5}}</td>
        <td>{{row.column6}}</td>
        <td>{{row.column7}}</td>
        <td>{{row.column8}}</td>
        <td>{{row.column9}}</td>
        <td>{{row.column10}}</td>
        <td>{{row.column11}}</td>
        <td>{{row.column12}}</td>
        <td>{{row.column13}}</td>
        <td>{{row.column14}}</td>
        <td>{{row.column15}}</td>
    </tr>
</table>

打字稿：

  public loadData() {
    this.buttonText += '!';
    this._ngZone.run(() => {
      this.reportList = this.data;
    });
  }

  public resetData() {
    this.buttonText += '!';
    this.reportList = new Array();
  }

  public calcData() {
    for (let i = 0; i < 10000; i++) {
      this.data.push(<Item>{id: i,
        column1: 'column1' + i,
        column2: 'column2' + i,
        column3: 'column3' + i,
        column4: 'column4' + i,
        column5: 'column5' + i,
        column6: 'column6' + i,
        column7: 'column7' + i,
        column8: 'column8' + i,
        column9: 'column9' + i,
        column10: 'column3' + i,
        column11: 'column11' + i,
        column12: 'column12' + i,
        column13: 'column13' + i,
        column14: 'column14' + i,
        column15: 'column15' + i,
      });
    }
  }

许多dom元素。性能AngularJS vs Angular

0 个答案: