加载超过100k的数据时，Angular 5- Browser选项卡会冻结

Question

我是角色5的新手，面临性能问题。

我已经使用autosuggestions实现了输入字段。对于这次自动提示，我们有近100k的数据。如果我们不将记录限制为特定数量，则浏览器会被冻结。

<td>
<input type="text" placeholder="Title" auto-complete [source]="titleList"
    value-property-name="id" display-property-name="name" 
    [list-formatter]="autocompleteListFormatter"
    (valueChanged)="onSelected1(ruleItem, 'title')"
    [(ngModel)]="ruleItem.titleSysId" class="disableInputClass"
    [disabled]="ruleItem.groupfromgroupFlag">
</td> 

Answer 1

从服务器获取数据以进行自我提示。 使用阵列过滤器拼接方法。这样可以确保即使结果数据太多也只会呈现部分数据，这可能无法完全解决您的性能问题，但这会有所帮助。

例如

    this.http.get("example.com")
        .subscribe(data:[] => { 
        this.allData = data;
        this.mydataArray = this.allData.splice(0,100);
    })

` 现在渲染myDataArray只是为了提升性能。

你可以做的另一件事是在服务器端进行分页，然后首先返回100条记录，然后返回100条记录，将浏览器从瓶颈中保存下来。