角度拖放性能答案

【问题标题】：Angular drag and drop performance角度拖放性能
【发布时间】：2019-12-18 08:54:13
【问题描述】：

我正在开发一个在前端使用 Angular 7 的应用程序，并且我正在使用角度拖放 cdk。在拖动元素时，我有一个必须执行的算法，但不幸的是，该算法会减慢拖放速度，所以有进行这种处理并加快拖放的方法。顺便说一下算法的调用在dragMove(event)方法中。

dragMove(event: CdkDragMove<Cycle>) {
    this.parentClientRect = event.source.getRootElement().parentElement.getBoundingClientRect();
    this.clientRect = event.source.element.nativeElement.getBoundingClientRect();
    this.leftPosition =
        this.clientRect.left - this.parentClientRect.left - ((this.clientRect.left - this.parentClientRect.left) % ConstantesGda.STEP);
    if (this.leftPosition < 0) {
        this.leftPosition = 0;
    }
    event.source.element.nativeElement.style.transform = `translate3d(${this.leftPosition}px, 0px, 0px)`;
this.callAlgo();
}

【问题讨论】：

放慢是什么意思？反应迟钝？
拖动时的慢动作

标签： angular drag-and-drop angular7 angular-cdk

【解决方案1】：

如果您运行的算法需要一些 CPU 并且可以冻结 UI，您可以将其分成几部分并使用 setTimeout 将其排队。例如，像这样：

function heavyProcess(params) {
  for (let i=0;i< 1000; i++) {
     doSomething(params[i]); //needs 0.005 secs
  }
}

这会使浏览器无响应大约 0.005 * 1000 = 5 秒。但它可以重构为：

function heavyProcess(params) {
  for (let i = 0; i < someSize; i++) {
     setTimeout(()=>doSomething(params[i]));
  }
}

所以现在您有 1000 个小函数排队等待处理，事件可以在其中两个中间处理。

【讨论】：