Angular 慢表渲染

我正在开发一个显示多个表的应用程序。 我的限制是在一个页面中显示所有内容。 我已设法将窗口限制为30天（60列）。 不幸的是，我不能限制行的数量（也不能限制表的数量），因为应用程序的全部目的是在不重新加载的情况下拥有所有内容

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

我已经完成了基础课程：

• 推进
• trackby

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

我已经监控了detectChanges所用的时间（env local）：在chrome上为1.5秒。结果在Firefox5x（用户的主浏览器）上是最糟糕的，Edge放弃了，我没有显示所有内容

当我删除所有事件时，chrome上的detectChanges下降到400ms（应用程序第一次加载时除外）

测试：

我在类似于生产的环境（ng build--prod--aot）中进行了测试，并使用了大量的数据

• 铬：每次刷新1.5-2秒之间
• Firefox：每次刷新大约6秒（以及“警告无响应脚本”）

我使用了Firefox dev和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" “@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布局”：“2.0.0-beta.8”， “@angular/forms”：“^4.2.2”， “@angular/http”：“^4.2.2”， “@angular/material”：“2.0.0-beta.8”， “@角度/平台浏览器”：“^4.2.2”， “@angular/platform browser dynamic”：“^4.2.2”， “@angular/platform server”：“^4.2.2”， “@angular/router”：“^4.2.2”， “@共价/核心”：“1.0.0-beta.5-1”， “@swimlane/ngx图表”：“^6.0.2”， “@types/file saver”：“0.0.1”， “@types/lodash”：“^4.14.66”， “@types/moment”：“^2.13.0”， “angular2拖动卷轴”：“^1.3.5”， “angular2物料日期选择器”：“^0.5.0”， “animate.css”：“^3.5.2”， “c3”：“^0.4.13”， “cheet.js”：“^0.3.3”， “核心js”：“^2.4.1”， “d3”：“4.9.1”， “文件保护程序”：“^1.3.3”， “字体真棒”：“^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”， “时刻”：“^2.19.2”， “即时业务”：“^3.0.1”， “rxjs”：“^5.1.0”， “zone.js”：“^0.8.12” 到目前为止，唯一的解决办法是无限卷轴。 问题是在一定条件下，我可以有一个100行的单表，这肯定会引起与10个10行的表相同的问题

我的选择是什么

[更新]：探查器屏幕截图

在XHR负载中，检测变化占2的99% 在右侧，小间距线是“更新层树”。

---

当我删除css时，它们之间的空间消失了，但我找不到产生这种行为的确切css

如果从每个单元格中删除mouseenter、mouseleave、dblclick、ngClass和ngStyle绑定，会发生什么情况？@Rene Winkler我在原始帖子中添加了详细信息