angular - 慢速表格渲染

我正在处理显示多个表的应用程序。我的约束是将所有内容显示在一个页面中。我设法将窗口限制为30天（60列）。不幸的是，我不能限制行数（也不限制表数），因为应用程序的全部目的是使所有内容都无需重新加载。

到目前为止，该应用程序包含15个表，平均10行，共计9000个单元格。某些用户想同时查看所有内容时，会看到“警告无响应脚本”。

我已经完成了基本操作：

OnPush
trackby

我已经隔离了ngFor显示内容的延迟源。每个单元格都有一个click，mouseenter，mouseleave，dblclick，ngClass和ngStyle绑定，我认为这是问题的根源。

我监视了detectChanges花费的时间（本地env）：在chrome上为1.5秒。结果在Firefox 5X（用户的主浏览器）上效果最差，Edge放弃了，我没有显示所有内容...

当我删除所有事件时，Chrome上的detectChanges降至400ms（应用程序首次加载时除外）。

测试：

我在类似生产环境（ng build --prod --aot）中进行了测试，并获得了更多数据。

Chrome：每次刷新之间在1.5-2s之间
Firefox：每次刷新大约需要6秒（和“警告无响应脚本”）

我已经使用了Firefox开发人员和Chrome上可用的性能分析工具来查找问题的根源，它似乎与渲染工作有关（更新层树...）

以下是软件包：

   "@angular/animations": "^4.2.2",
    "@angular/cdk": "2.0.0-beta.8",
    "@angular/common": "^4.2.2",
    "@angular/compiler": "^4.2.2",
    "@angular/core": "^4.2.2",
    "@angular/flex-layout": "2.0.0-beta.8",
    "@angular/forms": "^4.2.2",
    "@angular/http": "^4.2.2",
    "@angular/material": "2.0.0-beta.8",
    "@angular/platform-browser": "^4.2.2",
    "@angular/platform-browser-dynamic": "^4.2.2",
    "@angular/platform-server": "^4.2.2",
    "@angular/router": "^4.2.2",
    "@covalent/core": "1.0.0-beta.5-1",
    "@swimlane/ngx-charts": "^6.0.2",
    "@types/file-saver": "0.0.1",
    "@types/lodash": "^4.14.66",
    "@types/moment": "^2.13.0",
    "angular2-drag-scroll": "^1.3.5",
    "angular2-material-datepicker": "^0.5.0",
    "animate.css": "^3.5.2",
    "c3": "^0.4.13",
    "cheet.js": "^0.3.3",
    "core-js": "^2.4.1",
    "d3": "4.9.1",
    "file-saver": "^1.3.3",
    "font-awesome": "^4.7.0",
    "hover.css": "^2.2.0",
    "jQuery.print": "^1.5.1",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "md-multiselect": "0.0.1-alpha.1",
    "moment": "^2.19.2",
    "moment-business": "^3.0.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.12"

到目前为止，唯一的解决方法是无限滚动。问题是在一定条件下，我可以有一个包含100行的单个表，这肯定会引起与包含10行10行的表相同的问题。

我在这里有什么选择？

[UPDATE]：探查器屏幕截图

Profiler screenshot

在XHR LOAD中，检测变化耗时2s的99％右边的小间距线是“更新层树”。当我移除CSS时，它们之间的空间消失了，但我找不到产生此行为的确切CSS

慢速表格渲染

0 个答案: