Page freezes on Mobile - javascript

I'm testing on a webpage which displays a list of products, with photos, names, prices, etc. It works fine when I views it on my PC. When I visits the same page on mobile phones (Android and iPhone), the page first loads all its contents, and then freezes for few seconds, and then works again. When it freezes, I tried to scroll the screen up and down and it does nothing, and then after few seconds, it responds with all these actions. Any guess on what causes the freeze? There is some JS runs when the page loads, but it works just fine on browsers on PC.

It depends on your code. If you are displaying high resolution images on the device, it will slow down the scrolling. Also if you are downloading any data on the main UI thread, it will also cause the freeze which you are experiencing.

Sometimes on mobile if you're loading a lot of items or data at the same time it can take mobile phones a second to render all the new information. Perhaps loading less information could be a solution?

Related

IE and Edge renders page much slower than Chrome and Firefox

What can the problem be when a web page loads slow for 20-30 seconds when I am trying to request my server via IE or Edge over the internet but fast with Chrome and Firefox?
The attached picture shows that the request is over and done with after 3.85 s then there is about 20 s before the next request fires and after that it loads the entire page.
I was first thinking that it might have to do with rendering, but oddly enough it renders at similar speed as Chrome and Firefox when I try it on IE or Edge locally.
Is there some way to find out what the client is doing during these 20 or so seconds?
No other resource files are loaded or downloaded in between the two items shown in the picture.

safari could not open the page because the server stopped responding

I have one page which takes some time to load in asp.net website. It works with all Android OS, all MAC OS, all iOS except iOS with version 10.0.0.2 with safari browser
When I am trying to load same page with safari in iOS 10.0.0.2, it throws 'safari could not open the page because the server stopped responding'.
I know the reason for this error is, my page is taking time. But my page is already optimized and it has so many things, that's why it is taking time.
I want to prevent my page from this error in 10.0.0.2.
I tried all the possible ways to solve this issue like :
Clear cookie and browsing data
Added 8.8.8.8 to DNS server
Airplane mode on-off
iPhone restart
But nothing helps.
Please help me to figure out this issue.
I found that iOS 10.0.0.2 has default timeout approx 1 minute. My page was taking more than 1 minute to load. That's why safari assumed that server is not responding and it was throwing that message.
I did not get any setting or anything to extend timeout limit of safari. At the end I optimized my code.
I am using telerik rad grid in my page and its MasterTableView's property named 'HierarchyLoadMode' was set as 'client'. I changed it to 'ServerOnDemand'.
That solved my issue by reducing page load time.
As
1) 'Client' loads grid data at the time of page load.
2) 'ServerOnDemand' loads grid data at the time of grid expanding
My page load time has been reduced and safari stopped throwing message.
If you are using telerik rad grid, I hope this will help you.

How to get JS code running on mobile while it minimized or sleep

I'm getting a trouble while running JS code in a browser.
I've got a small web page which uses HTML5 location API for tracking a user.
User opens my website, logs in, and goes to a certain page on which I'm using location API to track user's location. Everything works fine until user's phone goes to sleep or user presses "home" button to minimize browser. The same thing happens on both Android and iPhone.
Is there any way to prevent the phone from going to sleep and let JS code work while browser is minimized?
one of the way I found is using video on a page where all JS located. but another problem is - screen became always ON, which can cause battery to discharge too fast (if I turn off screen manually using power button everything stops working)..
still looking for some ideas...

Chrome issuing GET requests for images already loaded?

I'm working on a JS game for Facebook and preloading all images. With chrome, but not yet seen on other browsers, once I open a new tab and surf a few sites chrome will issue fresh GET requests for images already in cache and on screen.
For the sake of testing I put ALL the images, at a 20x20 pixels size, on the side of the game. But if I open a new tab, then surf the web for 5 or so minutes, images that were not in the main game div will get reloaded when they get added to the page again (even though they are sitting on screen in a 'preloaded' div).
Rails 3.2 backend on Heroku.
I have tried disabling all Chrome plugins, clearing the cache, and a few different preloader strategies.
resolved
The page was caching fine, the images weren't. I added the following line to my rails production.rb, and the problem appears fixed.
The page was caching fine, the images weren't. I added the following line to my rails production.rb, and the problem appears fixed.
config.static_cache_control = "public, max-age=7200"
Thanks #chris for getting me on the right track!

Web Browser Kiosk - Recover From Network Outage

I am running Firefox as a non-interactive kiosk type application that iterates through several web pages on different sites. For implementation, I have a page that uses JavaScript to iterate through an array of location.hrefs.
I want my kiosk page to be able to auto-recover when there is a network outage between my kiosk application and my web server. Currently, the application has to be restarted if there is an outage. Is there any way to implement this in ANY browser?
It really depends. If the application is non-interactive it should be pretty simple. Just use two frames, load your application in one and have it change the URL in the other frame periodically. This way, the first frame never refreshes, so in case of a network outage it will keep cycling through the pages (although they will appear as errors) until the network is back (at which point the app will be back to normal on the next refresh).
Note that you don't have to show two frames. The first frame that only contains the required JavaScript to cycle through your pages can easily be invisible.
You could probably do more complicated stuff, such as polling with Ajax before a page change to see if you have a connection, but it's up to you to decide whether that is necessary.
Set your page as home page and add Firefox to the Autostart folder.
For the kiosk mode, I found an addon that claims to be helpful of this. Haven't tested it myself though...
EDIT (Thought it was your site that should restart)
For the problem with sites in your switcher that stops responding I would do something like doing an ajax call to the page first and checking the http status. If it's ok - load the page in the content area (iframe?), if not, move on to the next page. The pages will be checked every time in the loop, which means a down page will be displayed when it comes back up.
Quite sketchy, but I hope you get the point?
I have a similiar setup. I used Tab slideshow ( https://addons.mozilla.org/sv-se/firefox/addon/tab-slideshow/ ) in combination with ScrollyFox ( https://addons.mozilla.org/sv-se/firefox/addon/scrollyfox/ )
I have Slideshow setup so that it reloads the tabs every 30 second or so. I have one tab for each site that I want to demonstrate, and tab slideshow will cycle through them at a certain interval. Upside with this approach is that they will usually be fully loaded all the time.
For fullscreen in firefox 4, just F11 and then Alt + F4 and it will start up in full screen the next time it will load. I used Full Fullscreen for this before, but it hasn't been upgraded to support FF4 yet. It works in 3.6 though.

Categories

Resources