Vanilla JS element.getBoundingClientRect的替代方法

我一直在使用getBoundingClientRect（）函數來獲取元素的尺寸，同時用戶正在拖動一個項目。我一直在使用它，它一直運行良好;不過，在鼠標移動過程中正在執行此計算時，我開始遇到重大性能問題。被移動的節點越大，情況越糟糕。我在Chrome中使用了分析工具，並注意到這個函數被包裹在用戶拖動時觸發的鼠標移動事件中，需要很長時間（每次調用31.4ms--規模爲每調用一次）在研究這個問題時，我遇到了其他使用它的人，並注意到了性能問題（http://dcousineau.com/blog/2013/09/03/high-performance-js-tip/）。Vanilla JS element.getBoundingClientRect的替代方法

getBoundingClientRect（）在vanilla Javascript（絕對沒有jQuery）中有什麼替代方法？我的前端框架是AngularJS 1.5.8，我已經使用組件構建了應用程序（將來將把我們的大型應用程序遷移到NG2）。謝謝！

來源

2016-11-28 JRAnderson

獲得的第一次點擊的元素的初始位置，無需重新計算它的每個鼠標移動 –

你能發佈最少的代碼來玩嗎？ –

正如卡爾在回答中所說的那樣，它並沒有得到「更多」的香草。當然，如果你只需要一些價值，你可以要求擁有這些價值的單個屬性 - 但這可能不會更快。因此，提高性能的唯一選擇可能是不經常查詢值。看看反彈/節流。 https://css-tricks.com/the-difference-between-throttling-and-debouncing/，https://css-tricks.com/debouncing-throttling-explained-examples/ – CBroe

Element.getBoundingClientRect()是「香草」，雖然它是規範的working draft的一部分。要使代碼更具性能，請限制調用次數。您提到的提到類似性能的鏈接僅表示如下：

應該緩存或避免從DOM獲取任何計算維度的所有調用。

來源

2016-11-28 19:58:16

沒錯。所以我的問題是「使用getBoundingClientRect（）有什麼替代品（是否有替代品）？我明白這是香草，我的問題是「香草中有什麼替代品」？我看到的文章中的關鍵引用是「這個問題是WebKit喜歡重新計算dom的佈局，幾乎每次你使用類似於getBoundingClientRect的東西。」那麼，在getBoundingClientRect提供的數據中，如果沒有WebKit重新計算dom的佈局，可以做些什麼？ – JRAnderson

您可以使用'getBoundingClientRect（）'，並且您應該 - 在適用時。如果您可以提供一些示例代碼，我們可能會幫助您解決特定的性能問題。 –

！以下解決方案不與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

來源

2017-04-04 12:55:24 tdhulster

如果存在CSS3縮放轉換，則這不起作用。 –

謝謝@QuentinEngles，更新了我的回答 – tdhulster

我一直在尋找回退到getBoundingClientRect的方法，但是沒有簡單的方法可以很好地查看元素是否已經轉換。有getComputedStyle，但這和getBoundingClientRect一樣慢（可能更慢）。需要有一個'element.transformed'屬性，或者其他東西。 –

Vanilla JS element.getBoundingClientRect的替代方法

回答

相關問題