Whenever a page goes through an actual digest (with around only 600 watchers) the page load is about 6 times slower on ipad vs desktop (calculated by using console.time).
My current research:
There is the intentional delay upon touching a button on iPad, that was fixed by using fastclick.
I don't think its due to touch event as a tried on a touch screen with a mouse and the speed is about the same (when using mouse vs touching).
Both desktop/ipad seem to be caching responses as you'd expect.
By using developer tools it seems it has to do with something in digest, I couldn't find any add ons for safari (doesn't seem to exist) to break down timing in the digest.
No problems on safari on desktop, or any other browser for that matter. Problem exists on multiple iPads.
I've heard including jQuery slows it down and tried removing it but same problem exists
I'm not looking for general ways to increase performance but to fix/troubleshoot this .. bug? I've ran out of ideas, please help! :D
Edit:
I'm not using ionic, it's web based.
Looks like I found the issue, its not angularjs but Javascript. On iPads javascript is much slower (http://ajaxian.com/archives/ipad-javascript-shockingly-slow).
Confirmed by running Google Octane (https://developers.google.com/octane/). Desktop Safari Browser: 29942, iPad Safari Browser: 6795.
This kinda sucks.
EDIT:
Tested out various iPads:
Android (Using Chrome v49 (latest)):
Galaxy tab S2 9.7: Octane Score 6901
Galaxy Tab A 8.0: Octane Score 2650
Galaxy Tab A 9.7: Octane Score 2886
Samsung Galaxy Tab: Octane Score 2622
Chromebook (Using Chrome v49 (latest)):
Lenovo Chromebook: Octane Score 8641
Ases 2in1 Touch-Screen: Octane Score 7378
HP Chromebook: Octane Score 8688
Ipad (Safari)
Ipad Pro: Octane Score 20,632
Ipad Air 2: Octane Score 10,601
Ipad Mini 4: Octane Score 9,902
As Blazemonger pointed out the article is old but the point is still true, javascript is slower on iPads/Tablets, particularly on android.
We found with about only 300 watchers the magical octane number is 10,000 (of course there are many other variables but to give someone an idea). So as long as you don't need your application to be fast on all iPads/Tablets you can rely on AngularJs (Although I guess the real problem is just heavy javascript).
When you are using ionic, you make a precompiled app in a web, so you have one more layer to process(iOs-> browser -> webApp) , in the pc the browser is just one layer( browser -> webApp)
WebApp is slower than native apps.
Related
I have got a website that runs on php, javascript,and html. Im hopping there is a way to stop the mobile device (tablets, android and ios) from going to sleep.
I have done some research on this but they are not very helpful.
I have tried NoSleep.js and the answer from This answer from SO but they all seems not working, my android (ver 6.0) would still go to sleep and my iphone 6s goes to sleep too.
Any solutions?
Edit: For performance I prefer not to have an invisible video or audio playing in the background
I was working upon a website with a flipbook kind of jQuery effect provided by turn.js.
It was working very well on my development environment. Suddenly have found out that the mouseover effect and mouseclick has stopped working on browser Chrome V29.0.1547.66m.
It works perfectly with V26.0.1410.63 and on other browsers (Firefox).
Need to know the reason and some workaround solution for the same.
Here is the link to my webpage.
I had checked your link, I think there is some problem in turn.min.js script. Use turn.js script in place of turn.min.js it is working fine on your link.
As per issue no 399 posted on blasten/github https://github.com/blasten/turn.js/issues/399 change your turn.min.js to latest version of turn.js. This will surely solve your issue with chrome browsers' latest version on windows.
helloi was using the unminified version of turnjs and still had problems with some browsers, i read the code and discovered that mouse move events were not dispatched
i tested with 2 computers :
old Toshiba laptop with 1st-gen i7, Windows 7 Pro SP1, Opera 35.0.2066.68, Firefox 44.0.2 64Bits
brand new Intel NUC5i7RYH, Windows 8.1 Pro, same browser versions
mouse events
working properly on NUC + Firefox and Toshiba + Opera
NOT working on NUC + Opera and Toshiba + Firefox
uh ?
mouse || touch callbacks are set at line 28
touch capacity is detected at line 26
the isTouch test at line 26 returns true on some desktop browsers, which causes the mouse controls not to work
i noticed many tests provided on forum an blog posts didn't detect touch capacity properly, because they often check if touch APIs exist, which seems to be true in some Opera and Firefox browsers (i read some posts about people having the same problem with Chrome, mine works well)
i ended up using this test, which is far from perfect but does the job for now :
!(window.screenX != 0) && ('ontouchstart' in window || 'onmsgesturechange' in window);
i have no more problems, but this solution should be tested on many devices and the isTouch test must be improved
also, i got a bug in the zoom (line 90) while using latest version of jQuery, which i fixed by unchaining the two listeners as follows :
this.mousedown(zoomMethods._mousedown); // what ? chaining bug ?
this.click(zoomMethods._tap);
I am developing a web-app utilizing Application Cache, and everything is working great on desktop browsers and on Android (even very old & slow android handsets). However downloading the appcache is taking much much much longer on iOS 6 in both Safari and Chrome.
My application cache total size is a mere 2.1Mb, and I have a pretty solid 70Mbps (download) internet connection. I would expect caching to be pretty rapid.
Here are my times so far:
Desktop Chrome: <1s (similar times for Safari & Firefox)
Android 2.3.3 Stock Browser: ~4s (similar times for Chrome & Dolphin)
Android 4.2.2 (Emulated): ~7s (running inside a PhoneGap app)
iPhone 4S 6.0 Safari: 8 minutes!!! (around the same in iOS Chrome too!!)
iPad 2 6.0 Safari: as above!!!
All of these devices are using the same wifi and internet connection, and my iPhone/iPad are otherwise functioning fine (no native apps exhibiting internet speed issues, and regular websites load just fine). There just seems to be something absolutely decimating AppCache download speed under iOS.
The window.applicationCache.status throughout this time is appCache.DOWNLOADING, and I have a progress event running counting the files as they are downloaded, so I'm certain that it is not stuck elsewhere. This just appears to be the time it takes to download. What gives?
Addendum : The iPhone also runs ridiculously hot, and the battery ticks down very quickly during this operation. It seems that something is causing the CPU to run flat-out during this download.
(Note: I can't publish a link to the web-app here as we're still in private beta, but if you would need to see it before you think you'd be able to help diagnose it, email me at the address in my profile and I'll send a link to the app).
Okay, I figured it out with the help of the iOS Emulator, and Xcode Instruments to profile it. (I'm not sure if I should add my solution into the main question, or as an answer, but I thought I'd do it this way as my question is already a little cluttered).
As it turns out, it was actually some erroneous javascript causing the issue, but apparently only on iOS.
The web-app is intended to only be a single page high (no vertical scrolling, except within specific DIVs), so in addition to the usual standard JS code for hiding the address bar...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
...I had also added in the following:
$(document).scroll(
function(e){
window.scrollTo(0, 1);
});
From looking at the profile results, I was able to see that a lot of time was being spent in scrollTo, so it immediately pointed to this as the cause. Why the scroll event was being triggered so much, I have no idea (this was occurring with no touching of the screen whatsoever).
My initial fix is to throttle that code, but I am now evaluating whether or not I even need it at all. Here is the code I have that fixes it for now (using jquery-debounce, which I was already using for something else):
$(document).scroll(
$.throttle(function(e){
window.scrollTo(0, 1);
})
, 10);
The download time of the application cache is now in line with the Android times. Phew!
The code is getting itself into an infinite loop, as the initial scrollTo function call triggers the scroll event handler, which then repeatedly re-triggers itself! My best guess is that the iOS JavaScript engine handles this infinite loop differently to the other browsers' JavaScript engines.
We have an iPad/iPhone enabled web application which was working good on iOS 5.1 and AppleWebKit/534.46 when i upgraded the iPad to iOS 6.0 and accordingly the safari webkit upgraded to AppleWebKit/536.26 many functions stopped and the layout got corrupted as we depending on absolute positioning extensively,so there are to ways to go, the first is to restructure the whole application to handle the webkit changes (this option will take a lot of rework),the second is to find a work around to force iPad safari to use the previous version of webkit (this one will take 0 time and i prefer it).
So, is there any way to force the iPad safari to use a specific webkit version to render the HTML???
thanks in advance,
No.
The only version of webkit on Mobile Safari is whatever one that exists in the iOS version the device has installed.
Can anyone help me figure out why this page causes Android browsers to crash?
http://thewellcommunity.org
All sub-pages seem to work just fine, but when I load the home page on an Android, the browser app just closes without any warning or error messages. I've tried this on 3 Android phones and on a Kindle Fire.
When I completely disable JavaScript in the browser on the phone, the page loads successfully. Unfortunately this is a live website, so I'd prefer to save disabling chunks of JavaScript on the server side as a last resort.
On a side note, Opera Mini, Opera Mobile and Firefox on an Android phone do not crash, but Dolphin, Miren and the stock browser do.
UPDATE: It appears that I spoke too soon when I said this was fixed. I was able to reduce how often the browser crashes, but it still does occasionally crash when the page is loaded. :(
UPDATE #2: It now appears that the crash may be CSS related. After spending weeks enabling and disabling various JavaScript snippits, I tried disabling the stylesheet, and now I can't get it to crash.
Anyone know of an Android CSS bug that might be causing this? My guess is that it's related to some CSS that only gets accessed after the JavaScript does it's work.
I found the culprit... It appears that a css font-family rule was to blame. Although, I'm not sure why since the same font stack is used several other places on the site. :\
Here's the line that caused the problem...
.Site-Search .Buttons input
{
...
font-family: TeXGyreHerosRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
...
}
For whatever reason that line caused all stock Android browsers to crash. Weird.
Check out Weinre. An explanation can be seen in this youtube movie.
That way you can debug the Android webkit browser just like the well known Firebug.
In Eclipse's emulator (2.3) it loads fine but has some layout flaws.
If anyone came here looking for a possible reason why all of their mobile's different browsers crash after a several seconds when loading a particular website it may be due to the version of jQuery employed.
For example, the LG-p690f and HTC Incredible S are some of several Android 2.3.x phones known to have troubles with fade transitions in jQuery 1.8.1 and 1.8.2 due to a browser javascript bug that will cause jQuery's Animation function to fail at this line:
percent = 1 - ( remaining / animation.duration || 0 )
If you are the owner of the website you can try upgrading to 1.8.3 (or downgrading to 1.7.x if allowed). Otherwise, you can send an e-mail to the website.
Sources:
http://bugs.jquery.com/ticket/12497
https://github.com/jquery/jquery/pull/1019