Web 应用程序中的多个光标 - 如何显示它们？

Question

我正在开发一个用于安排项目的应用程序。其主要功能之一应该是实时显示当前登录用户的光标。就像 Figma 中那样：

在后端，我将使用 Firebase 实时数据库，我将在其中存储鼠标光标坐标。但是，我在前端部分遇到了问题 - 我想知道在显示它们的方式方面最好的方法是什么？

最常见的解决方案是使用 html canvas，但我担心这意味着我必须完全重建我的应用程序前端；）

那么也许只是一些代表其他用户光标的小 div/svg 元素？使用此解决方案，恐怕光标会覆盖界面元素，因此无法单击这些元素。也许需要使用 z-index ？

请告诉我您认为最好的方法是什么。

Answer 1

画布是这里最好的选择。您可以将其用作页面其余部分之上的一层，并如评论集中所述，pointer-events :none;以确保它不会干扰其他页面功能。

在高频下更改多个 SVG 位置听起来性能效率很低，它会将渲染过程发送到回流阶段。

这是浏览器渲染过程的精彩解释

在这里您可以找到以下解释：

为了确保平滑的滚动和动画，所有占用主线程的事情，包括计算样式、回流和绘制，都必须让浏览器在 16.67 毫秒以内完成。在 2048 X 1536 分辨率下，iPad 有超过 3,145,000 个像素可绘制到屏幕上。这是大量必须快速绘制的像素。为了确保重新绘制比初始绘制更快，屏幕上的绘图通常分为几个层。如果发生这种情况，则需要进行合成。

绘画可以将布局树中的元素分解为图层。将内容提升到 GPU 上的图层（而不是 CPU 上的主线程）可提高绘制和重绘制性能。有一些特定的属性和元素可以实例化图层，包括 和 ，以及任何具有不透明度、3D 变换、will-change 等 CSS 属性的元素。这些节点将与其后代一起绘制到它们自己的层上，除非后代由于上述一个（或多个）原因需要自己的层。

层确实可以提高性能，但在内存管理方面代价高昂，因此不应过度使用作为 Web 性能优化策略的一部分。

（这意味着您可以为 SVG 创建一个图层，但您必须使用/transform来移动它们）topleft

祝你的项目好运:)