拖动元素时出现滞后

Question

拖动元素时出现滞后

rav*_*mar 5 javascript iframe draggable vue.js

我正在实现一个功能，可以在网页上添加、拖动和删除“便笺”。该应用程序是用 Vue js 构建的，但它也在 iframe 中渲染内容。添加到页面的所有注释都必须位于 iframe 的顶部（几乎占主 .vue 页面的 80%），因此在这里定位很重要，我还必须保留位置，因为我必须渲染注释在下一页重新加载时的同一位置。问题是拖动“note”元素有很多滞后。“便利贴”本身是一个重量非常轻的独立组件。
我注意到这是因为 vue 页面上存在 iframe，因为当我检查浏览器中的 DOM 并删除 iframe，然后尝试拖动“note”组件时，它会顺利工作。

我尝试过的事情：

使用节流：我尝试使用loadsh.throttle，但这没有任何区别。
在 iframe 内注入“便签”代码：我尝试将便签元素注入 iframe 并将其附加到 iframe 的主体中。它实际上使拖动变得非常平滑。但我不想继续使用这个解决方案，因为那样我将不得不编写大量额外的代码来维护多个笔记的状态（这可以使用 Vue js 轻松完成）。在此解决方案中，我没有使用document主页的来附加拖动事件，而是将所有事件附加到iframe.contentDocument.

所以这里的问题是如何在使用 vue.js沙箱链接时使拖动平滑： https://codesandbox.io/s/affectionate-jang-3c1hw ?file=/src/components/HelloWorld.vue

在这个 gif 中，背景实际上是 iframe，我降低了它的不透明度以隐藏它。
由于跨源问题，我实际上无法将 iframe 包含在沙箱代码中，但我在该沙箱中包含了很多额外的内容以使其变得沉重。

更新：使用 chrome 任务管理器，我发现该页面仅占用最大 200MB 内存，而 GPU 进程又占用 200MB。我在 16GB RAM 的系统上运行它。所以我不认为这是内存问题。但是当我开始拖动元素时，CPU 消耗突然激增（高达 40%）。

更新：
我已经找到了这个问题的解决方法。实际的问题不是滞后，而是鼠标拖尾，即可拖动元素无法跟上快速移动的鼠标光标。而慢是因为里面的方法e.preventDefault造成的。只需删除即可解决所有问题。此外，仅在方法末尾添加 a似乎会导致相同的滞后量。dragMouseDownNote.vuee.preventDefaultreturn falsedragMouseDown

function dragMouseDown(e) {
     e = e || window.event;
     
     // e.preventDefault(); --> this line causes the mouse trailing issue
   
     document.onmouseup = closeDragElement;     
     document.onmousemove = elementDrag;

     // return false; --> adding this line also causes mouse trailing problem.
}

Run Code Online (Sandbox Code Playgroud)

所以现在我刚刚preventDefault从这个函数中删除了。但我尝试搜索并找不到这种行为的任何解释。我也不确定不取消活动是否会导致任何其他问题。