Angular 2表渲染速度慢
我们有一个数据表组件,它在IE 11中渲染速度非常慢.在Chrome中它非常不错.但是我们的主浏览器是IE 11,所以它应该在IE 11中快速运行.
当我在IE 11中运行“UI响应”分析器时,最大的热情是在加载或排序表时的DomEvent.它有很多appendChild,用于td,tr标签的insertBefore语句,这些DOM操作大约需要8秒钟(截图如下).在Chrome中它需要大约2秒,这是可以接受的. 我浏览了一些角度为1.x的博客,他们解释了如何优化一个包含大量条目的表格,并在角度2中尝试了它们,但到目前为止在IE 11中没有运气. 我想知道是否有一种方法来编译所有行,只是将它们插入在一起而不是插入一行接一行. 我创建了一个plunkr(https://plnkr.co/edit/Wqh6RLwT6IP8ijoIpr4a?p=preview),它在加载时也在IE 11分析器报告中显示了相同数量的DOM事件. 任何其他建议也会有所帮助. //our root app component import {Component,NgModule,VERSION} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Component({ selector: 'my-app',template: ` <button (click)="loadTable()" class="btn btn-primary">Load</button> <table class="table"> <tr *ngFor="let item of items"> <td>{{item.id}}</td> <td>{{item.name}}</td> </tr> </table> `,}) export class App { name:string; items = []; constructor() { this.name = `Angular! v${VERSION.full}`; } loadTable() { this.items = this.getItems(); } private getItems() { let items = []; for (let i = 0; i < 5000; i++) { items.push({ 'id': i,'name': 'Name' + i }) } return items; } } @NgModule({ imports: [ BrowserModule ],declarations: [ App ],bootstrap: [ App ] }) export class AppModule {} 解决方法
使用trackBy选项可以提高性能的唯一方法是:
<button (click)="loadTable()" class="btn btn-primary">Load</button> <table class="table"> <tr *ngFor="let item of items; let i = index; trackBy: trackByIndex"> <td>{{item.id}}</td> <td>{{item.name}}</td> </tr> </table> 在您的组件中: trackByIndex(index) { return index; } 您可以阅读有关trackBy here的更多信息.如果它有价值,我建议使用PrimeNG’s datatable或ngx-datatable,因为它们具有内置分页并且它们非常容易实现,我不认为这样做的方式与您目前正在进行的方式相同它. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |