I have got 6-7 pages application which is using backbone views, jQuery and high charts. I have noticed that it is leaking memory. It become unresponsive if I leave it running for 10 minutes. Someone suggested me to destroy views when not in use and I did this according to this answer.
Destroy or remove a view in Backbone.js
Which improved app but still I have got memory issues. I'll appreciate if someone could guide me in correct direction. Is there anything else I can do to improve memory leaks?
Most of memory leaks happen because of ghost events.
I suggest using listenTo when binding to events inside views. Calling view.remove() will automatically unbind them.
First of all you need to detect the root cause and only then fix it.
Tools for debugging memory leaks in JavaScript
Also I suggest to watch this screencast http://www.youtube.com/watch?v=L3ugr9BJqIs
Related
In a recent AngularJS-based job interview, the client discussed the need for Web UI regression testing.
The client briefly presented a scenario where they had rolled out a last minute DOM change to production, but it turns out that the new button they added was causing some issues on the page (I believe the exact issue was that the new button was getting hidden, but no one caught the issue ahead of time).
The main thing that came out of the conversation was that it would be great if I could come up with a Web UI regression test that compares old UI with new UI.
Not being a regression testing expert myself, I seek some advice regarding the best UI testing tools.
Having some AngularJS experience, my first approach would be to use Protractor - which I know is based on Selenium WebDriver.
I've also come across some Visual UI regression tools such as https://github.com/garris/BackstopJS, http://screenster.io/ , and https://www.parasoft.com/capability/web-ui-testing/ .
So my main question here is for the AngularJS testing folks: What would be the best solution to test for DOM changes in an application ?
I apologize ahead of time if this question is too vague, but I am seeking advice on the best approach for UI Regression Testing.
thank you in advance...
Bob
I took sometime to answer this one as I feel this is important and your client's scenario is pretty much valid and happens in real time. I hope this would clear out some concepts regarding web UI testing & automation.
I am assuming that you are aware that why and how the DOM changes.It is mostly due to changes in javascript functions or ajax calls which happen rapidly that our test scripts trying to locate Web Elements might not catch them in that specific time window leading to the famous Stale Element Exceptions. Now let us focus on how this happens in the background -
As you can see the DOM structure above, everytime a webdriver instance/session is created a reference of the web elements is stored which is in turn stored as JSON ref and passed to selenium webdriver and Protractor which is built on top of it.This drives the browser as we see in browser testing and automation.
When a browser refreshes, navigates or reloads, the DOM tree gets destroyed and recreated again, hence every reference to this DOM element become invalid. Element references could be lost or broken in that specific time frame and thus we get the stale element exceptions.
To be honest avoiding these scenarios is not possible and the worst part is it might not happen as often, So how do we tackle this annoying scenario? There are quiet a few work arounds to catch them efficiently-
To recreate entire reference hierarchy in catch block and call the same method recursively until maximum tries or unbound until some another exception.
To reference the element locators as a String rather than referencing them using the WebElement because Strings do not go stale.
Both of the above methods are discussed in detail in the following links please go through them as I do not want put code in this post just to keep it simple for understanding concepts.
http://darrellgrainger.blogspot.in/2012/06/staleelementexception.html
http://www.assertselenium.com/java/what-is-staleelementexception-in-webdriver/
http://softtechlabs.com/2015/09/deal-with-staleelementreferenceexception/
I hope this clears out many things for you!
I would vote for use of protractor. You can have test cases that include testing of control states so in the example you mentioned if you have a test that verified when the button was supposed to be enabled and another when disabled (or displayed/not displayed), it would have failed.
I am working on big application built using angular. I have read a lot articles how to improve performance.
I have implemented below mentioned things -
Avoid Watchers
ng-repeat with track by
single binding
Used ng-if instead of ng-show
used $compileProvider.debugInfoEnabled(false) to remove ng-binding and ng-scope classes in production.
But I have tried a lot plugin but not able to get satisfactory result.
Could anybody tell me how to measure performance of angular app ??
I haven't tried it yet, but it looks promising: https://opbeat.com/angularjs
Other ideas:
Check how many watchers do you have: https://github.com/bahmutov/code-snippets/blob/master/ng-count-watchers.js
Check for memory leaks: http://www.dwmkerr.com/fixing-memory-leaks-in-angularjs-applications
I've made a stripped down fiddle, and you'll have to interact with the map to see the issue:
JSFiddle Link
You'll notice, or at least I hope you will, that if you make a quick drag, the map seems to flash completely gray for an instant. It does not happen every time, so you may have to quickly drag several times to see this. Furthermore, it seems to happen more frequently at lower zoom levels.
This is after the tiles have been cached, so it's not google maps fetching the tiles that causes this. Furthermore, I've tested the behavior on a standard google maps example and it does not cause this flicker. I think it may have something to do with $scope.$apply() being called from the directive and forcing a repaint, because I notice sometimes that the flicker happens while google is loading the tiles, i.e. the two events happen independently of one another.
While my last resort is to dig into the directive, this seems like a pretty fundamental problem from a UX standpoint, and I suspect that some of you must have run into this issue. Perhaps most importantly, the example at
http://angular-ui.github.io/angular-google-maps/#!/demo does not suffer from this issue, though they have set a minimum zoom level, and so I wonder if this is simply a cheap fix for the issue I'm describing.
Thank you for any help you can offer, I've been tearing my app apart at the seams all day trying to pinpoint what's happening, and any advice would be greatly appreciated.
why does stack overflow require a code-line for a jsfiddle link? seems totally contrary to the point of making a fiddle...
I have few queries on selecting Ionic framework for our Hybrid app project. Since I have not used Ionic before, few queries may seem idiotic. But i would request all to share their thoughts.
Q1. How easy it is to customize any ionic components as per project requirement in both JavaScript and CSS level?
Q2. How much overhead ionic components create in terms of DOM, Memory usage?
Q3. In case of collection-repeat, say i want to display 10 items out of 1000 items at a time. So at any point in time only say, will there be only 10 divs and will only new data be injected in the previous created divs?
Q4. Say, I have selected Ionic for our project but don't need all the UI or other components in it. So does Ionic gives the flexibility to exclude those components from the framework itself and use the rest?
Q5. How easy it is to include an external library into Ionic if required?
Q6. How easy to debug and Ionic app and the tools available?
Q1. Since Ionic is based on SCSS, it's really easy to customize the visual aspects. I did a video about working with scss and Ionic. As for the javascript side of things, if you know how to work with directives, you should be good.
Q2. Ionic aims to the keep the DOM nice and lean, and not change the DOM like you would with jQuery. As far as memory usage, that really depends on the code you write. You still need to write good code to make sure there aren't memory leaks any where.
Q3. Collection-Repeat doesn't really work that way. Plus when you start dealing with different screen heights, it's not going to be easy to deal with. The best why that we've come up with to deal with that is to just render how ever many it will take to fill the view.
Q4. At the moment no, if you start a project with the CLI, you get the whole bundle. Down the road we're thinking about breaking things into external components, but it's not set up yet.
Q5. It's Angular, so if you have another angular directive that you want to include, the process is really simple. Just include the script tag and inject the module as a dependency. If it's not an angular module, then it's a bit more work to wrap it in a directive, but there are plenty of tutorials out there to help.
Q6. The best thing to remember is that we're dealing with a webview, so you can do a lot of debugging right from chrome on desktop. If you need more debugging once you're on a device, iOS lets you debug right from safari on desktop, and android 4.4+ let's you debug app on a device with chrome.
I started using ng-grid, and honestly seems it's not easy to tame that beast. I'm having various problems and this is one of them. I'm using ui-router and before ng-grid I was using my own implementation based on ng-repeat and haven't encountered this, so I'm assuming somehow ng-grid is responsible.
So I have a few tabs and ui-view with a grid underneath. Everytime you switch a tab, controller initiates a request and fetches data for the grid. Very first time when you open the app, everything seems to be fine, but whenever you switch to a different tab, for a few milliseconds it shows ugly, unbound content.
I tried to hide grid with ng-if, ng-hide and ng-show - (data.length <= 0), but that didn't work. I tried to place a few $timeout functions, that didn't help either.
Any ideas how to fix that?
UPD: first time when I posted this question I thought what if I make the grid transparent and then change opacity after it gets the data. So it kinda did the trick.
jQuery.animate({opacity:1})
and then I deleted the question, but soon I realized this is not very good way to solve the problem - not very anguleresque. Question remains open.
UPD: Had to abandon ng-grid and currently looking for something better. ng-grid in its current state is horrible. It's painfully slow, full of strange bugs and pretty much useless. Version 3 if far from being ready, and current version is abandoned. Very, very sad.
Actually after using ng-grid for awhile, I have to admit - it's really, really bad. Anyone who values own time and nerves should stay away from it. In its current state project is completely broken, have tons of bugs and authors won't even accept any tickets. They all working hard on a new version and honestly God knows when they ship it. So, for your own sake DON'T use it! I mean I believe in this product and that team. After all those guys gave us awesome ui-router and amazing angular-ui directives. Check the date, who knows maybe this answer already is obsolte and by the time you run across this post all the problems in ng-grid are already solved. But simple fact still remains - the product was so bad, they even decided to rename it.
For now I switched to ux-angularjs-datagrid. It may not be a complete grid solution and doesn't have a cool name and many features you're gonna have to build yourself, but it's amazingly fast and responsive.