Javascript - Page slow to show after not being the active tab - javascript

So I have developed a webpage containing some javascript and a couple of HighChart charts.
The page generally works great, every few seconds data is fetched from the server using an ajax request, and the chart is updated.
The issue happens when I have switched to a different tab for a few minutes and then want to go back. The page can take a very long time to show up. This happens on both Chrome and Firefox.
I couldn't really find out how the browser is handling javascript and page updates in non-active tabs, but it seems to be related at least.
Any ideas on how to improve the time it takes for the page to show?
To be perfectly clear, the page has no visible performance issues while it is the active tab.

So it turns out we froze highcharts just a couple of versions before this fix went in.
When we upgraded the version, everything worked great!
Many thanks to #WojciechChmiel for pointing me in the right direction.

Related

Next.js page rendering glitch when refreshing pages

I'm having a weird problem that I originally just dismissed as a development glitch, but now I'm more concerned because It happens every time I refresh the page.
The issue is when I navigate to another page (localhost:3000/otherpage), sometimes it wont render that page at all. The page will turn completely white and have no HTML elements on the page (according to the dev tools inspector). However If I'm on that page and refresh this will always happen. Theses pages are dynamically rendered pages that have logic written that tells them to load a skeleton page while fetching the data, or render an error page if there's a problem with the request. I'm stumped as to why this is happening and have not been able to find anyone else that has experienced this problem yet.
My question is:
Why does this happen? and how can I work around this?
I have a screen recording to better explain whats going on.
(link to unlisted video):
https://youtu.be/mJPp3P4ElsI

Ionic Lag Between Transtions

I'm working on an Ionic v1 tabbed application with a few images and lists displayed.
When I'm testing the app on any Android Device, I experience a 1-5 second lag between selecting the device's back button and when the transition takes place.
This happens when I navigate to a new page within a tab, scroll down, then select the back button.
The back button on the app itself works just fine with no lag
If I navigate to the new page and don't scroll, the device back button works fine
I'm not displaying a lot of data at one time. This lag occurs even with a single image displayed
I've had this issue for quite some time, there's several Github tickets on this but none of them have a solution. Anyone have any ideas whatsoever on how to resolve this?
Turns out that enabling JS Scrolling where I have a fair amount of content fixes my issue. By default I leave it disabled on Android, and utilize overflow-scroll="true" on views where it's needed.
Note this issue does not occur when using collection-repeat

Firefox redraw very slow (5 secs)

I'm developing a lazy scroll table with resizeable columns. It retrieves data from the server if the user is scrolling to a position where the data is not loaded yet. Because I want to the user to be able to scroll million of rows, I actually only put two list of 32 items in the DOM. If once of these lists scrolls out-of-the-viewport, I put it back on the other side of the visible list and refresh the items.
This all works great in Chrome, but Firefox (on ubuntu linux) gives me headaches, as it only redraws the screen after 5 seconds instead of instantly.
Does anybody know why FireFox behaves like that and maybe also how to fix/prevent this?
[EDIT]
The code finishes very quickly, I can see that in the console where I log the actions. The javascript places some nodes in the DOM. When inspecting the elements, their properties are ok, so the layout-calculation seems to be done and OK.
I will try to factor out the specific code, as it works together with the server to generate settings and some events. (I use Wicket, and refresh each of the two lists by Wicket ajax. Wicket then renderes html and replaces the dom-entries). This makes it somewhat complicated.
The issue came form a CSS setting. The table had a overflow:hidden setting. Removing it helped and resolved my issue.

Drupal view taking too long to load

I developed a site in drupal and for the most part all of the pages in the site load just fine, except for one page which takes an average of 2.8 seconds to load. This is obviously not expectable but I was fairly new to drupal when that section of the site was developed.
The site is in testing and can be viewed now # xltrust.mayaco.com/properties
Right now it is loading everything into the dom. So all of the properties, information, images, and google map. Is there a way to only have what is needed for that page to load and then when one of the properties is clicked on then and only then would the properties images, map, etc load. Instead of everything loading when a user first goes to the page.
hey everyone who tried to answer this question.
i am the new developer that took this persons job. i have rewrote the entire page he was trying to fix. now everything works...his problem was loading 1000000000000+ photos / google maps on initial load. i stripped everything out and process it all on the fly with an ajax request. site speed ~ 2 seconds to load up. load a map ~3 seconds to fetch the map initially then it just shows the old on when clicked again.
EDIT::
ooh yeah i also remade the map functionality no more images on that. now it is a vector map recoded to work with my new functionality. i basically took the dev package of jqvmap.com
and hacked the sh!t out of it. binding in my function calls on click. yeah the other developer elodev. was a newbie. entry level very eager to learn to i hear. i just hope he checks this feed again. i'd like to let him know where he went wrong. not to gloat. but to teach.

Javascript jquery locks up in Safari (only)

I've created a website which uses javascript to run a jquery gallery viewer. A problem surfaces when using the gallery in Safari only (but not with Chrome, Firefox, etc).
At first, the gallery runs smoothly. But if you click through enough pictures (on a single gallery page, or over several pages containing different galleries) eventually the gallery script stops working. At that point, all of the gallery functions stop, even if you visit a different gallery on a different page in the website. Neither refreshing the page, a hard refresh, clearing the cache, visiting a different gallery/page, or closing the tab and re-opening in a new tab, brings back the functionality. The only way to get it working again is to close the Safari window, open a new window, and go to the page again. (I wonder what the browsing session has to do with this?)
I have tried using the console, and tried using Firebug Lite, to diagnose the problem, without success. No errors appear in the console when the script stops working; the controls just stop working.
I can duplicate the problem reliably on different machines running Safari (most easily by repeatedly and quickly cycling through the pictures in a gallery over and over till it locks up). I cannot duplicate the problem using any other browser.
Any help in figuring out what's wrong, or even suggestions of how to troubleshoot the problem, would be greatly appreciated!
The galleries can be found here:
http://www.gailcohenphotography.com/galleries.html
Many thanks,
- Paul

Categories