HTML5ドラッグアンドドロップがマウスイベントと比べて遅いのはなぜですか

Question

ドラッグ可能なウィンドウを角度2で実装したいと思っていましたが、これは最初にa codepenで試しました。

しかし、プレーンJavaScriptを使用していても、どこでも使用されている普通の古いマウスイベントに比べて非常に遅いようです。

私の例はSafariでテストされていますが、この例はChrome/Firefoxでは動作しないことが分かっていましたが、Chromeはdragというエラーを発生し、Firefoxはdragイベントでマウスの位置を公開しません。

また、この例はChromeの方がはるかに優れているため、ゼロからノーラグを生成できます。私はreference on StackOverflowが、Safariが遅れている唯一のものだと判断しました。 2だけ角度と

"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) 

Answer 1

テストは、私は、パフォーマンスへの影響を最小限に抑えるためにElementRefを通じて直接要素アクセスを使用しました。

クロムは、​​の有無にかかわらず、より良く機能しました。ただし、Safariのデベロッパーコンソールを閉じると、すべてがスムーズに機能するように見えます。

これを発見すると、すべて問題ではないようです。 （パフォーマンスの最大の影響はDOMの変更にあり、ブラウザは要素を再描画する必要があるため、dragover/dragイベントの調整もパフォーマンスを向上させません）