Javascript 绘制大画布时显示加载指示

我正在渲染一个包含大量元素的画布。由于大量元素和元素的复杂形状，元素不会立即显示，而是延迟显示（有时超过10秒）。在此期间，整个应用程序冻结，没有显示加载指示。是否有可能在画布尚未完全渲染时以某种方式显示加载指示？

中的加载指示实际上取决于应用程序本身、绘图和应用程序的总体架构

在某些情况下，这项任务可能非常复杂。有一些选择：

1.使用网络工作者 这可能是最好的办法。您需要运行webworker并将所有图形制作成屏幕外画布。如果您可以对所有图形使用2d本机API，这将非常简单。如果您正在使用Konva，请查看以下内容：

我不知道如何在webworker中运行react konva应用程序

2.使用增量绘图 你需要检查慢度的来源。从渲染？避免创建太多对象？如果js线程花费太多的时间来初始化节点，您可以分步骤创建它们。如创建100个节点->绘制画布->稍等->创建100个节点更多->等。这样，绘图将缓慢出现在屏幕上，UI可能不会冻结

3.优化绘图

---

这里有很多提示：

我想如果您将对屏幕外画布上的webworker的draw调用外部化，然后将其取回并在画布上显示渲染的图像，这应该是可能的。因为这是一个网络工作者在做的工作，网页不应该被阻止，你可以在这个过程中显示一个加载器。