I have made an application using YUI-2 which uses different effects from YUI animation module. i have created a form works just like this: http://tympanus.net/Tutorials/FancySlidingForm/
In the application YAHOO.util.Scroll() is used to create animated effect.
var myAnim1 = new YAHOO.util.Scroll('container1', {
left: {
to: 500
}
},1,YAHOO.util.Easing.easeOut);
myAnim1.animate();
The above code works perfect in Chrome but animation runs slow in Firfox and Internet Explorer.
Can anyone suggest me what could be the problem causing the code to run slow in these browsers?
The usual reason for slow animations is the speed of the browsers rendering engine.
Depending on what you are animating and how it affects the rendered part of the html page, the browser is forced to re-render the page for each step of the animation.
IE is usually very poor at this, firefox is usually fairly good, but has problems with some layouts. Chrome is nearly always very good at this and thus you rarely see problem there.
Related
When I'm testing my website on a normal notebook, I have no problem with my website but when I'm testing this website on a Netbook (mini laptop) it has a strange behaviour.
You can see the website here:
http://www.benskesblog.com/projects/frontend/project/index.htm
(it works on IE9 and other modern browsers).
When I try it on my netbook the images aren't displayed completely. When I scroll I see another part of the images. Very strang. I've tested it on another netbook (and on other browsers) and I have the same problem. You can see it here:
http://img259.imageshack.us/img259/5168/titel1.jpg
http://img683.imageshack.us/img683/374/titel2k.jpg
Does someone now what's going on?
Thanks!
For starters, IE9 isn't "modern" - it's "bleeding edge".
Also, your page doesn't work at all in IE6 - which is arguably the most common browser out there.
So you've really got two questions you need to ask:
1) What is the minimum browser I'll support (for example, IE9+FF7+Safari5 #1024x768 truecolor resolution)?
2) How will I degrade gracefully for users who don't support my minimum requirements?
A few questions here:
Is there anyway to keep iOS from freezing javascript on the page while scrolling?
Does iOS freeze javascript when your in another tab or if you switch apps?
Are there any other major javascript limitations on iOS?
iOS 6.x suspends all event timers in response to touch events like scrolling and has a tendency not to start up all the timers again once the event is done. It's a well known iOS 6 bug that is super-annoying. It pretty much breaks parallax and stuff. Some people have resorted to building their own scroll functionality.
Here's another StackOverflow on the same topic:
iOS 6 safari, setInterval doesn't get fired
and another:
setInterval pauses in iphone/ipad (mobile Safari) during scrolling
and here is the closest thing you'll get to a bug report on it (Apple doesn't make bug reports public to maintain the illusion of perfection, so developers made their own bug site): http://openradar.appspot.com/12756410
This bit of code will unfreeze timers that are broken / lost / destroyed by iOS during a page scroll: https://gist.github.com/ronkorving/3755461
This is another attempt to fix the freeze: iOS 6 js events function not called if has setTimeout in it
Unfortunately, there is nothing you can do to fire events WHILE page scrolling. Like fade out a back-to-top link when scrolling up the page. When it comes to scrolling, iOS6 is incapable of rubbing it's tummy and patting it's head. (iOS5 works fine, btw. This is a regression)
To answer the third question, a decent-sized limitation is that sometimes innerHTML just plain doesn't work. From the accepted answer:
It happens when the CPU of the phone is very busy (say 100%). Then the rendering engine sometimes forget about innerHTML settings.
The solution included in my unify project is to test if there is an element in childNodes, otherwise apply it again.
I've built a Javascript-heavy web app and recently tweaked it to work on iPad (it needed tweaks because it allows drawing by moving the mouse around, and onmousedown/onmousemove would not get triggered until finger release).
Now, with the tweaks, the app runs fine on Mobile Safari. I'm seeing a problem, however, where the first time I try to load the app on the iPad, it often crashes Mobile Safari. However, reopening the browser and refreshing the page loads the app perfectly and it's fully usable. After doing some research I found out that the most common cause for Mobile Safari crash is over 6MB of pictures or multiple pictures loaded through Javascript. My app only uses images for icons, so the total image size is actually very small (probably under 100KB total), my JS code, however, is 2.5MB uncompressed and 350KB compressed using gz (which is how I'm sending it to the client).
I've also read that loading images through CSS can avoid crashes due to the image size limit. I figured it was worth a try since it's also possible the crash is due to large number of images, not just total image size. After changing some of my icons to be rendered using CSS background-image property, the crash seemed to have gone. I decided to go a step further and tweak all other icons to render using CSS backgrounds as well. After changing all of my images to be rendered using CSS, all of a sudden the crash seems to be back.
Which leads me to several possible conclusions:
A.) Even the partial CSS fix I made did not actually help but somehow I got extremely lucky and saw no crash while reloading my app and restarting the iPad multiple times (then the crash is likely somewhere with my JS code or other parts of the page)
B.) I introduced some other issue when changing the rest of my icons to load through css (if that's the case, I wouldn't expect reloading the page to fix the issue, but it does)
C.) The crash is due to something in my Javascript unrelated to images (but then why does it load and work correctly after reload)
D.) iPad chokes when trying to render/uncompress that much Javascript at once (I haven't heard of this being an issue, but it's also rare to see a chunk of Javascript this big)
Does anyone know what other issues aside from 6MB image limit can cause Mobile Safari to crash the first time a page is loaded, but not the second?
If it helps, here is the link to my web app (this is the old version that loads images through JS): http://www.grafpad.com/grafpad/canvas/demo (it's written in Pyjamas, which is why there is so much generated Javascript).
Thanks
You need to remember that compared to your desktop the iPad is seriously underpowered. Its particularly limited in memory. I noticed right away that there were many, many script blocks on the page. Without tearing your app apart completely to try and find the culprit you might start by combining, just to see if its just dealing with that many nodes that is causing the crash.
The page is rendered within an nyroModal (loaded via ajax) and the DOM is manipulated quite a bit using several plugins before actually showing the page.
Everything is fine in non-IE-Browsers and IE7, but in IE8 the resizable and draggable of an div is very slow and crawles along.
I know IE8 is slow. I know my DOM is big. I know i use a lot of plugins. My question is, what exactly slows it down, as other Browsers do it well?
I deactivated every plugin after each other to locate the culprit. Only having resizable activated it is still slow.
I used IE8 profiler and it says offset uses most of the time.
EDIT: I analyzed the page using dynaTrace AJAX Edition and it showes me that these 2 functions are responsible for the most exec time:
jQuery.fn.offset = function(options)
and
jQuery.expr.filters.hidden = function(elem)
both in jquery.js
i read somewhere that IE8 has problems with offset, but how can i circumvent this?
Edit2: I builded a test-page with just a link to open the page with all the resizing in a modal. works nice also in ie8 ! so i guess the big DOM of the modal-parent-page is the problem.
any advice appreciated!
Dynatrace has a very good javascript profiler. Check it out.
Check that your browser is not running in IE7 emulation mode.
In IE Java-script load slower than Firefox, Safari and Chrome?
Is there a way to load JavaScript quickly in IE also?
General best practice is to keep JavaScript at bottom of the page, does it make Js rendering more slow in IE?
Edit:
When we apply any jquery plugin to website to make any usable or interactivity then in IE effect shows slower than Other browsers.
We can easily identify the effect of condition on the page, before and after loading JS, which looks odd.
The IE8 or below JavaScript engine sucks, it's better in IE8, but comparatively, it's still way behind...there's not a ton you can do about this if you're doing any heavy operations.
JavaScript is loaded and parsed each page, so the slower the engine, the slower the load...and that's the case with IE. Keeping JavaScript at the bottom of the <body> is one option, to prevent blocking, but likely your issue is not the loading (as this would be from cache, if your headers are set correctly), but the execution.
If it's any consolation, it seems IE9 is a major step forward, over IE8 at least.
It's a bit more general, but if you're looking to speed up your pages there are a few things to consider, Google has a good list for this and Yahoo does too.
Not IE specific, but BetterExplained has some good points on how to increase load times or in some cases, Web page response times.
In terms of today's browsers, IE8's JS engine is slow, but IE9's will perform much better.
It's execution time that's slowing you down. Unfortunately, there's not a whole lot you can do about it.
I believe your talking about the unsightly FOUC (flash of un-styled content).
Paul Irish has some tips to avoid this which is more prevalent in ie.
You really shouldn't see that much of a difference for most interactive uses of JavaScript, which is the kind you find on most websites. However, if you have a lot of loops or do a lot of computation in your script, then you'll see a huge difference between various JS engines. In my experience, Chrome > Firefox > IE in terms of JS engine speed.