動態地對DOM進行基準測試

我有一個頁面，其中大量的DOM元素都是動畫的。這主要適用於現代硬件和軟件，但我擔心在使用慢JavaScript解釋器的舊電腦上它可能會太遲鈍。動態地對DOM進行基準測試

我想要做的是獲取有關DOM性能的一些信息，並禁用某些動畫（如果這個值低於某個閾值）。通過添加10000個左右的透明元素並將其去除並測量所需的時間，這種方法可能很簡單。在實施這個之前，我想知道這種可能更精緻的東西是否已經存在。

您是否知道任何可以合理衡量DOM性能的工具？

來源

2011-10-27 Andrea

「DOM性能」 - >使用DOM方法（'document.getElementById，appendChild，...'）或JavaScript代碼的性能？請記住：網頁中最重要的部分是內容，而不是成千上萬的不必要的動畫。 –

那麼，這個特定頁面的內容是一個大動畫:-) – Andrea

是的，我的意思是DOM性能。我必須移動很多DOM元素，所以這就是我所感興趣的。 – Andrea

如果您測量動畫的實際幀速率，則可以將其與您嘗試動畫的幀速率進行比較。如果實際幀速率顯着較低，則可以以較慢的速度繪製，或者減少繪製速度。有一個谷歌在this answer這樣做的描述。

來源

2011-12-23 15:45:00 Douglas

問題是，在我的情況下沒有setInterval，因此沒有幀率的概念。我只是在鼠標移動的時候對某些DOM元素的位置進行了修改 - 也就是在mousemove回調中。後天，我意識到這樣做並不是最佳的，並且每隔幾毫秒輪詢鼠標位置會更好，並且允許我立即對幀速率進行基準測試，但現在改變這一點已經太遲了，謝謝。無論如何你的建議。 – Andrea

我發現（至少在過去）Firefox會觸發多於預期的鼠標移動事件，如果我經常更新dom，會導致動畫結局。如果鼠標事件的x和y實際上發生了變化，那麼修復只能在事件上進行。你可以做類似的事情，比如只處理事件，如果它是x毫秒[自上次]（http：//documentcloud.github。com/underscore /＃throttle），但如果你有多個鼠標移動處理程序，我可以看到很快變得複雜...... – Douglas

您可以使用Chrome開發人員工具或Web檢查器（「配置」面板）實施原型，並在基於WebKit的瀏覽器（Chrome/Safari）中對其進行配置。這會讓你深入瞭解實際上會減慢應用程序的速度：JavaScript代碼或WebKit內部結構。

來源

2011-12-23 15:32:18

今天的瀏覽器中，我的應用程序並不慢。它只是在舊的。也許我不清楚，但我*不*試圖對我的代碼進行基準測試。我試圖判斷我的代碼是否在緩慢的瀏覽器上執行，並在這種情況下選擇了某些功能。在開始動畫之前，必須在飛行中完成。 – Andrea

噢，那麼，這是_exactly_基準你的代碼在用戶的瀏覽器:)但從你評論到下一個答案我看到你真正需要的是鼠標事件處理程序調節，這通常通過運行你的實際處理程序在func（）主體中調用a'la'if（！this._timer）this._timer = setTimeout（func，）'並調用'this._timer = null;'（或'delete this._timer'）。 –

動態地對DOM進行基準測試

回答

相關問題