Javascript 拖动元素时滞后

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

我尝试过的事情：

使用节流：我尝试使用

loadsh.throttle

，但这没有任何区别

在iframe中注入“sticknote”代码：我尝试将一个sticknote元素注入iframe并将其附加到iframe的主体中。它实际上使拖动非常平滑。但是我不想继续使用这个解决方案，因为这样我将不得不编写大量额外的代码来维护多个注释的状态（使用Vue js可以很容易地做到这一点）。 在这个解决方案中，我没有使用主页的

文档

来附加要拖动的事件，而是将所有事件附加到

iframe.contentDocument

因此，这里的问题是如何在使用vue.js时使拖动平滑
沙盒链接：

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

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

更新：
我已经找到了解决这个问题的方法。实际的问题不是滞后，而是鼠标拖拽，即可拖动元素无法跟上快速移动的鼠标光标。缓慢是由于

Note.vue

中

dragMouseDown

方法中的

e.preventDefault

造成的。只需删除

e.preventDefault

即可修复所有问题。另外，仅在

dragMouseDown

方法的末尾添加一个

returnfalse

，似乎也会导致相同的延迟量

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.
}

---

现在，我刚刚从这个函数中删除了

preventDefault

。但我试着搜索，却找不到这种行为的任何解释。此外，我不确定不取消活动是否会导致任何其他问题。

作为您在评论中的额外说明

当屏幕上出现大量其他内容时，它开始滞后。有 沙箱里有一个v-for。让它做更多的迭代，它就会开始 拉吉

您遇到的问题是页面上的Dom元素太多，导致内存使用率过高。（实际上我试过

”，然后它占用了大约3GB的内存），最后，一切都变得缓慢而滞后

如果您的页面有大量的DOM元素，您可能需要考虑在滚动时动态地将可见项添加到DOM树中。

甚至有些软件包已经实现了这个特性

下面是一个使用回收滚筒的演示：

您将看到，即使项目的数量是100000，它仍然可以顺利工作

PS：您可能会注意到上述软件包的用户指南中的以下语句=

vue虚拟滚动条

浏览器对DOM元素有大小限制，这意味着 目前，虚拟滚动条显示的项目不能超过~500k个 取决于浏览器

---

问题在于，您使用的是

mousemove

，而没有使用

requestAnimationFrame

来消除抖动

通常，当您尝试使用javascript制作动画时，您需要使用requestAnimationFrame。您可以尝试的另一件事是使用transform来更改元素的位置，而不是绝对位置

这是关于请求动画帧

---

这里有一个关于使用变换而不是绝对定位来加速拖放的例子。

代码笔只是为我呈现了一个白色屏幕？@JohnSnow初始化确实需要一些时间。我在你的中尝试了粘贴说明，它似乎工作得很好。当屏幕上有很多其他内容时，它开始滞后。sa中有一个

v-for

ndbox。让它进行更多的迭代，它将开始滞后。可能只有当你打开inspector工具时它才滞后？或者像问题中提到的那样尝试一下，我只是在模拟我页面中的

iframe

中使用了

v-for

。iframe（自动生成HTML）确实有很多

absolute

定位DOM元素在其中。我不认为你提到的包可以帮助我做到这一点。而且，就像我提到的，如果

FormNote

组件的HTML附加到

主体

中的

iframe

中，滚动工作会更加顺畅。由于这最后一个行为，我很高兴相信lagg是因为太多的DOM元素而带来的麻烦（我在这里可能完全错了）我提到的包只是一个示例，它只能动态构建可见项。如果它不满足您的要求，您可能需要实现自己的包或在NPM中找到您需要的包。无论如何，如果您的iframe中有大量Dom节点，并且已经影响了执行