Javascript 为什么HTML5的拖放速度比鼠标事件慢

我想在Angular 2中实现一个可拖动窗口，我首先在中尝试了这个

然而，即使使用普通JavaScript，与随处可见的普通旧鼠标事件相比，它似乎也非常慢

我的示例在Safari上进行了测试，我知道该示例在Chrome/Firefox中不起作用，我认为Chrome会触发另一个坏的

drag

，Firefox不会在

drag

事件中暴露鼠标位置

此外，该示例在Chrome中工作得更好，可以产生零到零延迟。我发现有句谚语说，狩猎是唯一落后的

"use strict"
let el = document.getElementById("window")
let anchor = { x: 0, y: 0 }
let begin = { x: 0, y: 0 }
let newPosition = { x: 0, y: 0 }
let needsRedraw = false

let use = "drag"

if (use == "drag") {
  el.draggable = "true"
  el.addEventListener('dragstart', event => {
    begin = { x: Number.parseInt(el.style.left),
              y: Number.parseInt(el.style.top) }
    anchor = { x: event.clientX, y: event.clientY }
  })
  document.addEventListener('drag', event => {
    let dx = event.clientX - anchor.x
    let dy = event.clientY - anchor.y
    newPosition = { x: begin.x + dx, y: begin.y + dy }

    needsRedraw = true
  })
} else if (use == "click") {
  let moving = false
  el.addEventListener('mousedown', event => {
    moving = true
    begin = { x: Number.parseInt(el.style.left),
              y: Number.parseInt(el.style.top) }
    anchor = { x: event.clientX, y: event.clientY }
  })
  document.addEventListener('mousemove', event => {
    if (moving) {
      let dx = event.clientX - anchor.x
      let dy = event.clientY - anchor.y
      newPosition = { x: begin.x + dx, y: begin.y + dy }
      needsRedraw = true
    }
  })
  document.addEventListener('mouseup', event => {
    moving = false
  })
}

function draw() {
  requestAnimationFrame(draw)
  if (needsRedraw) {
    el.style.left = newPosition.x + "px"
    el.style.top = newPosition.y + "px"
    needsRedraw = false
  }
}

requestAnimationFrame(draw)

---

使用Angular 2进行测试时，我通过

ElementRef

直接访问元素，以最大限度地降低性能影响

无论是否使用

requestAnimationFrame

，Chrome都可以做得更好。然而，如果我关闭Safari的开发者控制台，一切似乎都很顺利

---

发现这一点，一切似乎都不是问题。（同时限制

dragover

/

drag

事件并不能提高性能，因为最大的性能影响是DOM更改，浏览器必须重新绘制元素）

哪些浏览器？在问题中添加，我主要在Safari中测试，因此该示例在Chrome中无法完美运行，Chrome的性能明显更好。