如何在浏览器中有效地渲染数百个角度高图而不崩溃？

Question

我有一个应用程序，需要在单个页面中以3个图表的行形式绘制数百个高图散点图。数量范围从100+到2000+。这些图表的计算和创建速度非常快，但瓶颈实际上在于将它们呈现到页面本身中。通常最多需要1分钟到5分钟的时间，这确实很慢且效率低下。

有什么建议可以加快速度？我曾尝试实现Cdk Virtual Scroller，但就我的经验而言，这确实是个难题。每当您上下滚动时，图表的顺序将被打乱。有时，图表会完全消失，并在其位置保留空白图表。

代码段：

 <cdk-virtual-scroll-viewport itemSize="500" class="viewport" style="width: 2000px; height: 1100px;">
    <div class="row">
      <div class="col" *cdkVirtualFor="let nth_chart of chartObjects; index as i">
        <div class="clearfix" *ngIf="i % 3 == 0"></div>
        <div class="col-md-4">
          <div style="width: auto; height: auto;" [chart]="nth_chart"></div>
        </div>
      </div>
    </div>
  </cdk-virtual-scroll-viewport>

分页能否解决问题？我认为分页会遇到相同的问题，因为它必须先返回图表到每个页面，然后再返回整个“分页” div？

Answer 1

我建议将Change detection strategy设置为OnPush。很好地解释了here

另一种方法可能是web workers。使用Web Worker，您可以在“后台”线程上运行代码，并释放主线程以能够更新用户界面。

您可以在应用程序中的任何位置添加网络工作者。例如，添加一个Web工作程序到根组件src / app / app.component.ts，运行以下命令命令。

ng generate web-worker app

来源：https://angular.io/guide/web-worker