vanilla JSの代わりにelement.getBoundingClientRect（）

Question

私はアプリケーション内でgetBoundingClientRect（）を使用して、ユーザーが項目をドラッグしている間に要素の寸法を取得しています。私はこれを使用してきており、うまくいきました。しかし、この計算がマウスの移動中に実行されている間は、大きなパフォーマンス上の問題が発生し始めています。それはノードが移動しているほど大きなものになることはさらに悪化します。私はChromeでプロファイリングツールを使用しました。ユーザーがドラッグしている間にマウスの移動イベントにラップされているこの関数は、長い時間がかかっています（呼び出しごとに31.4ms ---毎回呼び出されるマウスを動かす時間）問題を研究している間に、私はそれを使用した他の人たちと出会い、パフォーマンスの問題にも気づいた（http://dcousineau.com/blog/2013/09/03/high-performance-js-tip/）。

バニラJavascriptでのgetBoundingClientRect（）の代替手段は何ですか（jQueryは絶対にありません）。私のフロントエンドのフレームワークはAngularJS 1.5.8です。コンポーネントを使用してアプリケーションを構築しました（大型のアプリケーションを将来NG2に移行することを目指しています）。ありがとう！

Answer 1

Element.getBoundingClientRect()は、仕様のworking draftの一部ですが、「バニラ」です。コードをより効率的にするには、呼び出し回数を制限します。同じようなパフォーマンスに言及したリンクでは、次のように言います。

DOMから計算されたディメンションを取得するためのすべての呼び出しは、キャッシュまたは回避する必要があります。

Answer 2

!!ソリューションに従うことを変換CSS3スケールとの組み合わせで動作しますが、それは代替だしません：

function getPosition(elm) { 
    var xPos = 0, yPos = 0; 

    while(elm) { 
    xPos += (elm.offsetLeft - elm.scrollLeft + elm.clientLeft); 
    yPos += (elm.offsetTop - elm.scrollTop + elm.clientTop); 
    elm = elm.offsetParent; 
    } 

    return { x: xPos, y: yPos }; 
} 

Source