我正在渲染一个包含很多元素的画布。由于元素数量多且元素形状复杂，元素不会立即显示，而是延迟显示（有时超过 10 秒）。在此期间，整个应用程序冻结并且不显示加载指示。是否有可能在画布尚未完全渲染时以某种方式显示加载指示？
问问题
233 次
1 回答
1
这实际上取决于应用程序本身、图纸和应用程序的总体架构。
在某些情况下，该任务可能非常复杂。有一些选项：
1.使用网络工作者
这可能是最好的方法。您需要运行 webworker 并将所有绘图制作成屏幕外画布。如果您可以对所有绘图使用 2d 本机 API，那将很简单。如果您使用的是 Konva，请查看此处：https ://konvajs.org/docs/sandbox/Web_Worker.html#page-title
我不知道有什么方法可以在 webworker 中运行 react-konva 应用程序
2.使用增量绘图
您需要检查缓慢的来源。从渲染？从创建太多对象？如果 js 线程花费太多时间来初始化节点，您可以分步创建它们。就像创建 100 个节点 -> 绘制画布 -> 稍等 -> 再创建 100 个节点 -> 等等。这样绘图会慢慢出现在屏幕上，并且 UI 可能不会被冻结。
3.优化图纸
这里有很多提示：https ://konvajs.org/docs/performance/All_Performance_Tips.html#page-title
于 2020-07-17T15:17:34.960 回答