angular-gettext icon indicating copy to clipboard operation
angular-gettext copied to clipboard

Performance Problem

Open GeekOnGadgets opened this issue 9 years ago • 4 comments

Hi,

In my application i am using translation at many places. After doing some debugging, i found out that for each translate there is a watcher, which is destroying the performance of entire app. Is there a way to do the one way binding for this ? or any other way to increase the performance ? I am on recent version 2.1.0.

Hoping to hear from you soon.

GeekOnGadgets avatar Jun 11 '15 02:06 GeekOnGadgets

You're right about the watchers. But they should be rather light.

To diagnose this correctly:

  • Do you have an unusually high number of strings on your page? As in: thousands of spans.
  • Have you profiled your code to find the exact cause of the slowdown? The Chrome devtools profiler is a great help here.

Angular.JS doesn't have a problem with large numbers of watches (and we go to great length to make sure they're light): what you do in each watch is much more important than how many you have.

Use a profiler first to pinpoint the exact cause of slowdowns. If it turns out that angular-gettext is the problem, do provide us with the profiling results and (if possible) a sample of code to show how you've brought it to its knees. I'm very interested in how this happened.

rubenv avatar Jun 11 '15 13:06 rubenv

Sorry for the late reply,

  1. yes I use high number of strings on a page > 500, and some are within ng-repeat
  2. I did the update to your latest version, it did decrease some amount of watches .

I am still very much interested in one way binding, as we detect the language from users language preference in google accounts. So we only change on runtime and we don't really have to change it ones app is loaded (hope i am making sense).

You are partially right about "Angular.JS doesn't have problem with large number of watches" - it depends upon how much memory your browser uses . And considering Chrome most memory-intensive browsers out there - does get effected with number of watches on not so powerful machines such as chrome book.

Decrease in number of watches did improve the performance. I am still investigating but so far I found out

  1. It also depends on how you design underlying architecture of your front-end (by making a chance here, I was able to decrease substantial amount of watches in my app).

But overall thank you for this awesome translation :+1: But would love to see one way binding.

Please let me know if you have any questions.

Thanks

GeekOnGadgets avatar Jun 18 '15 23:06 GeekOnGadgets

Can't you just use one-time bindings on the result? {{:: 'your string' | translate}}

tinusn avatar Aug 12 '15 11:08 tinusn

On this note, we've forked angular-gettext to remove the <span> replacements as we're not that interested in IE support and would much prefer a lighter/quicker DOM.

Another area for improvement we were looking at is removing the $watch on each of the translations. At the moment each translation listens for gettextLanguageChanged to update strings.

When we change our language, we're forcing a page refresh, as we've got quite a few other cases to handle (refreshing data within components, re-translating the URL etc etc). I think it would be nice to have the two-way binding configurable. I'm sure there are a few other people who would prefer to force-refresh than add 500 watchers per page :)

There's a PR pending #140 for turning the directives into providers. Perhaps it would be good to also add the configurable option there for:

  • ieLegacySupport: true/false - <span> wrapping for lighter DOM
  • listenLanguageChange: true/false - for updating text without forced refresh

intellix avatar Aug 18 '16 14:08 intellix