如何分析和获取 Javascript 性能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2140716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to profile and get Javascript performance
提问by Eli
Possible Duplicate:
What is the best way to profile javascript execution?
I have a few scripts that use jQuery, and I think I have a memory leak in one of them.
我有一些使用 jQuery 的脚本，我认为其中一个存在内存泄漏。
How one could profile and find what parts of the scripts that I have are using the most memory/CPU?
如何分析并找到我所拥有的脚本的哪些部分使用了最多的内存/CPU？
采纳答案by Miguel Ventura
Regarding memory consumption
关于内存消耗
Memory leaks in JavaScript are usually ignored except when they turn into browser memory leaks (that is, even after the user navigates away from the page, the memory continues allocated and there's no way to free it). The reason for this is that while your web application may have some memory leaks, users will go from one page into another so the leaks are minimized. However they may not restart the browser, so browser memory leaks may be serious. Some JavaScript code is known to cause memory leaks on certain browsers, being Internet Explorer probably the worst in this area. For it you may find Microsoft JavaScript Memory Leak Detectorto be very useful.
JavaScript 中的内存泄漏通常会被忽略，除非它们变成浏览器内存泄漏（也就是说，即使在用户导航离开页面之后，内存仍会继续分配并且无法释放它）。这样做的原因是，虽然您的 Web 应用程序可能存在一些内存泄漏，但用户会从一个页面转到另一个页面，从而最大限度地减少泄漏。但是它们可能不会重新启动浏览器，因此浏览器内存泄漏可能很严重。一些 JavaScript 代码会在某些浏览器上导致内存泄漏，Internet Explorer 可能是这方面最糟糕的。对于它，您可能会发现Microsoft JavaScript Memory Leak Detector非常有用。
Regarding times
关于时间
IE, Chrome and Safari have built in profilers in the web development tools that ship with the browser. For Firefox you may use Firebug. Also useful may be, since you're using jQuery which means your profiling report will be filled with anonymous functions and alike, making it quite unreadable, John Resig's jQuery profiling plugin, which will give you a clearer output on the matter.
IE、Chrome 和 Safari 在浏览器附带的 Web 开发工具中内置了分析器。对于 Firefox，您可以使用 Firebug。也可能有用，因为您使用的是 jQuery，这意味着您的分析报告将充满匿名函数等，使其变得非常不可读，John Resig 的 jQuery 分析插件，它将为您提供更清晰的输出。
回答by msanders
Use Firebug. To quote from http://getfirebug.com/js.html:
使用萤火虫。从http://getfirebug.com/js.html引用：
To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You'll then see a detailed report that shows what functions were called and how much time each one took.
要使用分析器，只需转到控制台选项卡并单击“配置文件”按钮。然后稍微使用您的应用程序或重新加载页面，然后再次单击“个人资料”按钮。然后，您将看到一份详细报告，其中显示调用了哪些函数以及每个函数花费了多少时间。
回答by pkaeding
I would suggest taking a look at the profiler in Firebug, and the Dripplugin for IE to help look for memory leaks.
我建议查看Firebug中的分析器和用于 IE的Drip插件以帮助查找内存泄漏。
Also, just keep in mind that most javascript memory leaks come from circular references between DOM objects and javascript objects not being broken when the DOM object is unloaded. To prevent that, I would suggest avoiding creating references to javascript objects in DOM object properties (ie, avoid something like document.getElementById('foo').bar = myObject;). If you must create these circular references, be sure to break them yourself in a function that runs when the page unloads, or when removing the DOM objects prior to unload.
另外，请记住，大多数 javascript 内存泄漏来自 DOM 对象之间的循环引用，并且在卸载 DOM 对象时不会破坏 javascript 对象。为了防止这种情况，我建议避免在 DOM 对象属性中创建对 javascript 对象的引用（即，避免类似document.getElementById('foo').bar = myObject;）。如果您必须创建这些循环引用，请务必在页面卸载时运行的函数中自行中断它们，或者在卸载之前删除 DOM 对象时。
回答by Vestel
Google Chrome also has profile options
谷歌浏览器也有个人资料选项
回答by sid
Though chrome has profiling options inbuilt it does not give precise information about the object.So i prefer using leak-finder-for-javascript tool which helped me in my code.
尽管 chrome 内置了分析选项，但它并没有提供有关对象的精确信息。所以我更喜欢使用leak-finder-for-javascript 工具，它在我的代码中帮助我。
https://code.google.com/p/leak-finder-for-javascript/
https://code.google.com/p/leak-finder-for-javascript/
I hope this helps.
我希望这有帮助。
回答by macca1
Another simple way to test a specific piece of code is to add a timer around it.
测试特定代码段的另一种简单方法是在它周围添加一个计时器。
var testStart = new Date();
// code to be tested here
$('#jstest').html("selected function: "+ (new Date() - testStart) + " milliseconds");
Where jstest is a span element somewhere visible on your page.
其中 jstest 是页面上某处可见的 span 元素。
回答by Eimantas
Firebug or Google's Page Speed for Firefox have profiling tools.
Firebug 或 Google 的 Page Speed for Firefox 有分析工具。
回答by David Murdoch
This post by John Resig (jQuery) may be helpful for detecting memory leaks in IE:
John Resig (jQuery) 的这篇文章可能有助于检测 IE 中的内存泄漏：
