i am working on the single page web application using angularJs.In My application when i go to each and every page cpu memory increased consistentely.I try with $destroy , Remove console and unbind the window event.but till i get the same error.How to resolve it?
you probably got some leak and its not related to angularjs.
$destroy is the right event to clean things up like window/document level bindings as you wrote, but you probably have other issues.
look in chrome profilers tab in the developer tools. it has ability to record what actions took most cpu, where memory is at and so on... very good tool.
you could use that to compare to runs of the same navigation to see what was added to the second run compared to the first.
Related
I'm inspecting a performance issue with an AngularJS application.
When performing specific actions, the CPU usage goes to 100%, the Chrome window freezes, and I have to manually terminate the process using Chrome's task manager.
I tried to debug the app (DevTools' Sources tab), but the application is quite large and the code is minified, which means that finding the issue won't be easy: I see a lot of code triggered by the digest cycle, and can't figure out which code is the actual culprit.
What could be helpful is to be able to profile the application once it freezes; I'm pretty sure the profiler will immediately show the actual bottleneck. I can successfully start the profiler (Performance tab) before the freeze happens, but once the application freezes, when I click on Stop button, the Loading profile window is stuck at zero percent (I waited for fifteen minutes just to be sure, it's still at zero), so I suppose that it's frozen as well.
Therefore my question is:
How do I find what causes the application to freeze when I'm unable to figure it out by simply debugging the application?
To answer my own question, the solution was to use a different browser. Surprisingly, Firefox let me profile the application during the freeze. The remaining part was easy, as I expected: by comparing the profiling results before the freeze with the ones after it, one could figure which code is executed repeatedly.
Thanks to Aleksey Solovey as well for his comment.
This is a weird one I've only recently noticed since Chrome 60.0.3112.90 on Mac OS X 10.11.6, and it really impacts my daily work.
Chrome is creating a new console context every time an Angular application is reloaded, and the previous instances (presumably) stick around. This makes working in the console difficult because the context of the console sometimes remains on an old context. Whats worse is you cannot even interact with an old context so why does it remain?
I'm unsure if this is a UI bug or an actual issue with the Angular application possibly keeping reference to something from the previous context (not sure how or what would even do that).
This occurs on both the product I work on, and on the Angular documentation website.
Here's a gif of it happening:
http://i.imgur.com/lVjLJnu.gifv
Every time you see me click outside of the console, I'm performing a reload.
Any ideas? This is absolutely obnoxious. I've disabled all extensions with no difference. My colleagues on Linux do not have this problem.
AngularJS batarang is unusable. It freezes and is unresponsive. How do you figure out where the bottlenecks are? What kind of tools can I use to profile my application to figure out if its my directives or if I have too many watchers?
This problem is perhaps caused, because you broke the watch-apply-digest cycle of the Angular framework by causing digest cycles where they should not be. This can cause Angular to create almost infinite loops watching variables for refresh, thus making your app really slow. But you can confirm that by just disabling Batarang, since the app would be slow by its own.
Anyway, if your app is efficient and only Batarang creates this issue, you can skip using it and start debugging with developer tools. I have also switched to this path various times and I can say it is quite fast (I did not expect it either). To follow this strategy, you have to simply select an element with developer tools and then execute in the JS console :
var scope = angular.element($0).scope()
So, you now have the scope of this element and you can simply check any field you want inside the scope at any time, thus testing the whole watch-apply-digest cycle of Angular.
You can learn more about the watch-apply-digest cycle here
I'm attempting to write some UI tests for a RequireJS-based Backbone application, utilizing FluentAutomation.SeleniumWebDriver and NUnit. The HTML page in question contains a typical data-main attribute for loading the RequireJS module for the application. My struggle is in properly detecting when the application is fully loaded with these tools; the only thing I've gotten to work consistently so far is using an explicit wait in seconds, like so:
I.Open("http://myapp")
.Wait(5)
.Enter("foo").In("input[name=username]")
.Enter("bar").In("input[name=password]")
.Click("button")
.Wait(5)
.Expect.Text("Welcome").In("#welcome");
This is less than ideal -- my test as written above will always take at least 10 seconds to run, when in reality the app might be "ready" much faster than that. What I'd like to be able to do is something like this:
I.Open("http://myapp")
.WaitUntil(() => I.Assert.Exists("input[name=username]"))
.Enter("foo").In("input[name=username]")
.Enter("bar").In("input[name=password]")
.Click("button")
.WaitUntil(() => I.Assert.Exists("#welcome"))
.Expect.Text("Welcome").In("#welcome");
However, this doesn't work -- using WaitUntil here actually seems to prevent the app from loading, for reasons unclear to me, as I simply receive timeout exceptions after the default wait period (30 seconds), stating that it was unable to locate the element in question within that timeframe.
I see that Selenium 2 provides a WebDriverWait for this kind of scenario, and possibly that would work here, but am unsure how I would use this within FluentAutomation (and a quick search of the FluentAutomation code on GitHub doesn't seem to indicate it's in use within the library).
What can I use in FluentAutomation to properly wait for a RequireJS module (or DOM loaded by it) to be ready?
Additional details:
This might not be a RequireJS compatibility problem at all. I've looked further into the app and found that what's happening after the Click("button") is actually a window.location.replace -- not a RequireJS async module load. It's the one place in the app that this is occurring, apparently. So, is a window.location redirect a known scenario that would cause problems with WaitUntil, and is there an alternate approach (aside from a simple Wait(5)) that would properly handle this?
I have a problem that seems pretty specific to my plugin but I don't know enough about backbone.js to solve.
Pretext:
My plugin injects some DOM elements to control its features and script elements to interface with the page and send events to my plugin's backend.
The Problem: Backbone does some sort of cleaning of the page and removes all of my elements but leaves the original page alone. I know this is backbone because I traced the remove event to part of backbones script. I also know its not plug.dj because they have no reference in their code to anything that could detect my elements. I need to know how to prevent backbone.js from removing my elements or find a way to detect when backbone is done culling the page so I can inject at that time.
If anyone knows of a flag I can put on the elements to prevent this from happening or some sort of flag that tells me backbone is finished, it would be greatly appreciated.
My plugins code is available here: https://github.com/tyduptyler13/PlugPlus/tree/dev (Keep in mind its the dev branch! Master branch is the last stable version, the dev has some new beta features I was testing.)
This code is the most up to date version available to the public and all versions have this issue after plug.dj made the change to backbone.js.
For plug.dj code you will need to dig manually on their site http://plug.dj/
And finally, to test their site with my code you will need to add it from the chrome store.
I ended up ignoring the fact that backbone was culling my content by doing an interval based check to see if backbone was finished "rendering" the page. If you add content after backbone has finished it won't overwrite it or remove it.