評估Javascript應用程序的CPU負載

Question

我需要測量其他Javascript事件綁定（使用jQuery live）的性能開銷，開銷可能會增加CPU負載並且很難從執行時間分析中注意到。

如何測量兩個不同版本的Javascript應用程序之間的CPU負載差異？

Answer 1

另一種分析選項是dynaTrace Ajax edition。 Resig有一個quick overview of it here。這是特定於IE瀏覽器（但...這是在大多數情況下性能最差的一個，所以...）

看一看，這裏的所有建議都很好，如果你在看IE瀏覽器問題（某些內聯網應用程序鎖定它），然後dynaTrace是一個很好的工具，仍然免費工具。

Answer 2

我認爲這個測量將會非常具體。如果您確定無誤，請在Chrome瀏覽器中查看內置的開發人員工具。可以選擇記錄性能並稍後比較結果。這裏是Getting Started guide（看看底部的剖析和優化視頻）。

Answer 3

除了關於Chrome Dev Tools的@Ivan回答，我還建議您也看看Chrome的Google Speed Tracer擴展。

Answer 4

Chrome開發工具非常棒，但由於Chrome瀏覽器不是瀏覽器，所以您不必擔心JS性能，並且它會優化很多事情，但對於查找其他瀏覽器的瓶頸沒有多大幫助。 IE 8 has dev tools可讓您進行配置，所以除了通常的Firebug探查器之外，您可能會發現它很有用。

但是對於你的情況，讓我說，只是綁定事件不會導致過多的CPU負載，更多的是內存的問題，但你不應該擔心，除非你正在做一些與衆不同在你的頁面上。

此外，如果你特別關心jQuery.live功能，讓我很快地解釋它是如何工作的： 比方說，你做$('#linksWrap a').live('click', fn);

• 這將創建一個，也是唯一一個事件處理程序，附加到#linkswrap。
• 當您點擊其中一個鏈接時，點擊事件會冒泡DOM樹，最終達到#linkswrap。
• jQuery.live檢測它實際來自哪個鏈接。此信息位於瀏覽器的Event對象中。
• jQuery.live應用fn是被點擊

所以鏈接的範圍內，你看，它實際上是相當有效的。瀏覽器只附加一個事件，所以內存使用率很低，並且不需要經常檢查新的元素，它以一種很酷的方式使用事件冒泡。

事實上人們可能會認爲，如果要連接數千個事件到一個頁面，該.live方法可能更有效，假設你使用好的選擇。 （例如。.something .foo .bar.baz需要大量的遍歷和冒泡，但#parentOfTheLinks a.links將很快）

Answer 5

對於比較CPU負載的非科學但快速的方法，您可以啓動Chrome的任務管理器，並在不同的標籤頁/窗口中打開兩個版本。如果您正在進行優化，它不會對您有所幫助，但它可以一目瞭然地告訴您新版本是否佔用較少的CPU。