So I heard angular change detection can cause lag in application if data from websocket is comming fast in huge qty. My flow is such that Data comes from socket. That data updates variable in component and change detection runs and html updates . What if I directly use variable that gets update from socket in my template? Will It remove change detection and improve my performance ?
-----------------------------------------------.
Yes, this will improve performance, as the change detection will not need to be run each time the variable is updated. However, you should still be careful when working with data coming from web sockets, as this could potentially cause unexpected errors or issues if not handled correctly.
Related
I need to be able to update an image on a website thats in HTML while using Spring Boot as a backend. Right now I'm using JavaScript to update the image after a set amount of time but it's not in time with when the image is updated in my database making it skip some of them. It also uses a lot of requests to the server and I don't know if that is good or bad. Is there a way to be able to send an event from java to javascript or use a javascript function in java to update the image. I've tried looking it up before but I haven't found anything that has done exactly what I needed it to do. Some of the stuff have found doesn't work in my project either.
I've tried using eval engine in java to use a javascript function in java but I never got it to work. I made a loop in javascript to request an api url to retrieve the image from the databse but it was off time. That's all I've been able to try and nothing else has been close to what I needed to happen.
I think you can use WebSocket to establish connections between the frontend and the backend so that you can push notification to frontend and reflect the changes. This too has its own complexity like managing all the connections. This is only recommended if you really need real time reflections or else what you are doing is fine.
Apologies if this sounds strange, but I'll try to describe what's happening as best I can. We were provided a small service that provides a single form UI that we capture the results of via an event. We've integrated this into two applications and we're seeing some different behavior when we load the UI in a modal window via an iframe. When integrated into one UI it loads pretty quickly. However, in the other UI it takes several seconds to load. Now, the only difference I could find is that setTimeout is being triggered sever seconds after the model is created. I discovered this using the Firefox development tools in the Performance tab.
Now, I believe that the UI for this form is built in a non-recent version of Angular (AngularJS?) based on some Google searches using strings that I could see in a minimized polyfill.xxxx.js file. However, I can't understand the code that was minimized and I have no version information to help me get back to a version that I can try to read and understand.
I did testing using the Performance API before the iframe is created in case the issue was something in my code, but the tested code is finished in < 100ms, so that didn't appear to be the issue. It's not a network issue as the requests occur pretty quickly. Also, both applications are referencing the same instance, so the only difference is the app that it's integrated into.
So, my primary question is what could be causing Angular (AngularJs) to set a timeout on page load? My secondary question is what advice is there for trying to debug this? I don't use Angular at all, so I'm not even sure where to begin outside of what I've already tried. The only custom app code I see looks to be Angular configuration/properties, so no JavaScript to debug.
The best advice with setTimeout() in such a situation is to not use any setTimeout().
I ran into same situation not only angular most of the framework treat setTimeout() a bit differently.
What I mean setTimeout() in a plain JS app and angularJS app and Angular App will differ the time interval.
setTimeout() is set to execute after a certain time, but that's is not guaranteed by the thread.
Some time angular completing change detection and watcher life cycle, all mingle with setTimeout() and you will end up with strange behavior.
So better not to use that unless you are sure it's not gonna mingle with other running things.
Please share the code snippet if possible
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am developing a website which is a Single Page Application (built on AngularJS).
However, my client complains that using the website is causing user devices to heat up and drains the battery faster.
Technologies used for the development.
For back-end
- PHP / Codeigniter
For front-end
- Angular JS
I have a lot of codes written in native Javascript too.
Is it possible for a website to cause these issues? If yes, how can I solve this?
Poorly coded JavaScript can cause the browser to use more resources and hence device heats up or the battery drains faster.
Things to look for: Network calls , Unnecessary event listeners (touch , scroll), Expensive animations etc.
How to solve:
Try to remove some animations and event listeners which cause lag to the web-app , those might be the ones using the most of the resources. This way you need to filter our the culprit code and optimise it.
You can refer to this BBC article for a detailed report on this : http://www.bbc.com/news/technology-17811557
There are many factors, for example:
Animations causing multiple repaints
If you have many watchers, frequent updates will cause a lot of work to perform digest cycles
Maintaining TCP connection is also very costly, so if you query your backend server for live data it will hurt on mobile (another example is collecting analytics data like clicks and sending them immediately to the server)
Fixes for this cases would be to reduce number of watchers and perform updates less frequently on mobile. Updates like those from analytics should be send in batches.
There is no solution that would apply to every case, if you want to save your customer's battery you can profile your application, see what parts of code are expensive and decide if they are necessary to perform on mobile devices.
And one important thing - verify yourself that it is your application causing the drains, because it may be something different and you would be wasting your time trying to optimize something that works ok.
Long story short: yes, it is possible.
When developing, you can pick two ways to handle calculations:
you can process them locally, on the server-side
you can process themremotely by pushing them to the client-side
The latter, mostly when poorly coded, can genereate high and constant CPU usage on the client-side, thus resulting in a hot device and quickly drained battery.
I have a question I tried googling but couldn't get what I was expecting. Hope people around here will make me clear.
Am working on AngularJS from last few months and now I have a situation where there is a list of data. This list is loaded via a server(PHP).
Each list has a tracking image which changes according to the status set in the database.
Now I want this tracking image to change when the admin changes the status of that list in the database.
Right now it happens when I reload the page or when I go back and come again on this listing page.
I know there is something called $watch and in js we have setInterval.
But is this a good idea to use $watch or setInterval as it will check continuously in the database for change. Am just wondering if this will lead to the crash or it will make my application to get slow.
Please note am developing a PhoneGap application using AngularJS.
Please throw your ideas it might be helpful. Thank you
Well, this is probably not the right place to answer your question but there is no problem in using $watch in AngularJS.
But, using setInterval and continuously polling your server will be expensive and is a waste of resource. You should probably go for the something called WebHooks.
Resources:
https://en.wikipedia.org/wiki/Webhook
http://www.webdesignermag.co.uk/automate-mobile-app-development/
Since you are developing a PhoneGap application, you can also use the Push Notification concept of Android and iOS.
If you want to let the server update your client, without the client repeatedly asking for it, then you will need to use websocket libraries. If your server is not able to supply a websocket service, then i fear that doing a $http.get every certain timeperiod is your only option. But yes it sucks, because of the often unneccesary data travels.
I am building an ASP.Net MVC 2 application using jqGrid 3.8.2 (a javascript grid component) to present some data I have stored in a DB. On my page I also have a Google map with a tiled overlay.
I have noticed a significant worse performance in loading times of the map and the tile overlay in this application than what I have in other applications that does not use jqGrid. It would be natural with a slow-down if both jqgrid and the map were requesting data at the same time, but when I am zooming/panning the map there are no server requests run by the grid.
After doing some debugging in my code (adding/removing functionality bit by bit) I boiled it down to this: If I configure my jqgrid to use "datatype : local", it brings the performance back in the map!
Once I set "datatype: json" and "url : [myAspNetMvcController]" the loading of the map tiles takes a big hit.
My question is: Does anyone know why this happens? It seems that jqGrid is doing stuff continuously in the background even though it has not been asked to fetch any new data. I have breakpoints on the server, so I know that it does not fire requests. As I see it, it must be some jqgrid "magic" that causes the other javascript components on the page to run slowly, and hence causes the requests to be delayed.
It is very important for me to get to the bottom of this, and I really do not want to have to scrap jqGrid, since I really love it.
Will be thankful for all feedback that can point me in the right direction!
Found the answer, and it turned out not to be jqgrid that was the bad guy, but the server-side Session store! I used Session as a cache for the grid data, because I needed the filtered data for other purposes than the grid, and wanted to avoid redundant trips to the DB. Once I wrote something to the Session object, the server took a hit and started handling all incoming requests slower (often several seconds!). I have later learned that using the Session object for caching is not advised in most cases, but I still don't know why it would cause nasty side-effects like this. If someone would enlighten me, that would be great! It cannot be an issue of taking up alot of RAM on the server, because the performance dropped just by writing
Session["test"] = "test";
Since I actually needed the data to be cached in a session scope, I solved the problem by instead using the HttpContext.Cache and a session-specific key.