简体繁体 English

JavaScript应用程序中的运行周期

[英]Running cycles in JavaScript application

原文 2016-06-29 14:04:59 3 2 javascript/ debugging/ infinite-loop/ developer-console

I have a large JavaScript application using only vanilla, jQuery, jQuery-UI and a WYSIWYG library which has performance issues and I'm suspecting it having infinite cycles running in the background. 我有一个仅使用香草，jQuery，jQuery-UI和WYSIWYG库的大型JavaScript应用程序，该应用程序存在性能问题，我怀疑它在后台运行着无限循环。 Is there a way to find what is really being done on the background from the developer console in the browser or is there some other way? 有没有办法从浏览器的开发人员控制台中找到在后台实际执行的操作，还是有其他方法？

For example there are functions which do reverse tree traversing which are done with a while condition. 例如，有一些功能可以进行反向树遍历， while这是在while条件下完成的。 If it's not met it obviously runs infinite without the user knowing. 如果不满足，它显然会在用户不知情的情况下无限运行。 Other problems might be unterminated intervals, etc.. 其他问题可能是未终止的时间间隔等。

2 个解决方案

Chrome has a "timeline" tab in the web inspector, which can be used to record which JavaScript events are firing. Chrome在网络检查器中有一个“时间轴”标签，可用于记录触发哪些JavaScript事件。

Press F12 to open it, then go to the "timeline" tab and begin a recording. 按F12打开它，然后转到“时间轴”选项卡并开始录制。 Once you stop the recording, you can inspect closely which events are being fired and when. 停止录制后，您可以仔细检查正在触发的事件以及何时触发。

This can help you spot things like an infinite loop in the code. 这可以帮助您发现代码中的无限循环之类的东西。

See also: the documentation for this tool . 另请参阅：该工具的文档。

I believe you could use the Timeline in the chrome inspector to see which functions are running at what time and for how long. 我相信您可以使用Chrome检查器中的“时间轴”来查看哪些功能在什么时间，运行了多长时间。 I've found it easiest to always name my functions so I can inspect in the functions performance. 我发现始终为函数命名是最容易的，因此我可以检查函数的性能。

https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=en#profile-js https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=zh-CN#profile-js