如何調試使頁面運行緩慢的腳本（根據firefox）？

Question

我有一個腳本，有一些超時，使用Raphael繪制菜單，並使用各種動態屬性來完成此任務。 您可以在jsfiddle： JSFiddle版本的代碼中查看它

我的問題是Firefox偶爾會拋出“腳本運行緩慢等”。 此頁面打開時出錯，可能是半分鍾或更長時間。 通常我會在一個元素左右懸停，所以此時打開一個子菜單。 該錯誤通常不指向我的任何js文件，有時甚至是Firefox自己的文件。

我該怎么調試呢，它有可能嗎？ 任何提示都表示贊賞。 （我現在正在為計時器使用計時器，似乎沒有幫助）

Answer 1

描述您的代碼

你可能想要做的分析 ，即你的代碼的性能分析。 正如其他人所指出的，Firebug是Firefox中的一個很好的工具。 更具體地說：在Firebug中，單擊Console選項卡中的Profile 。 然后稍微使用導航並再次單擊“ 配置文件”以完成分析並獲得結果。 他們會告訴你哪些函數被調用的頻率和執行時間。 這將幫助您識別代碼中的性能瓶頸。

優化

快速瀏覽一下，我會說你可能仍然可以優化DOM查詢。 保存對昂貴查詢結果的引用。 如果可能，請使用上下文 ，以提高查詢效率。

此外， requestAnimationFrame()似乎是現在javascript動畫的方式，而不是setTimeout() 。

Answer 2

大多數瀏覽器都有某種機制允許用戶停止“長時間運行的腳本”。

腳本如何被視為“長時間運行”在瀏覽器之間略有不同，並且是在“執行上下文”中執行的指令數量或其經過的持續時間。

JavaScript在瀏覽器中運行時主要是事件驅動的（除了在解析頁面時立即執行JavaScript）。 在執行任何操作之前，瀏覽器將等待執行上下文完成，並且在等待JavaScript執行時可以阻止任何顯示刷新等。

您基本上需要將指示分解為對事件的響應。 如果你在任何地方有一個大規模的循環（例如做一個動畫），你真的需要使用一個間隔來分解執行周期。 例如var interval = window.setInterval(refreshDisplay, 50); - 這將每50毫秒調用一次refreshDisplay函數（沒有參數）（原始的20次調用每秒）。

Answer 3

用於調試javascript的firebug （Firefox插件）

使用F12顯示螢火蟲

這會對你有所幫助！

使用Firebug，您可以使用斷點調試javascript並查看所有ajax調用！

Answer 4

嘗試使用Firebug並使用如下屏幕截圖所示的內容 -

鏈接下載firebug -

http://getfirebug.com/downloads/

Answer 5

可能有些操作運行緩慢，或者其中一個循環的復雜性很差。 您可以使用二進制拆分：刪除一半代碼，查看時序是否有顯着增加，並在運行速度最慢的代碼中執行相同操作。