I am a beginner in web-designing. I use css, javascript, jquery for web development.
There are times when an effect can be achieved with all of the three. Like a simple mousehover effect can be achieved with css :hover, javascript's onmousehover(), and jquery's $(#id).hover()
jquery fade-in, fade-out effect can also be simulated using css transition.
My question is: If an effect can be achieved using all three. Do i need to give preference to stylesheet language or javascript or jquery. using which among above will increase performance and will load the webpage faster.
First of all give a preference to that way which you can do faster (computers cost a little, programmer cost a lot). Also pay attention of how you do it - if you have to write tons of css code instead of couple lines in jQuery - use jQuery for sure.
css speed > javascript speed > jquery speed. As i seen some benchmarks native js is like 10-100 times faster than jQuery (depending on browser/selectors etc...).
Depending on situation - if you really need to optimize your interface -> find a bottlneck first, dont't optimize too early, it's evil
jquery has the advantage of working across multiple browsers but suffers some slowdowns to do this. A custom javascript solution may or may not work on all browsers, but it might be faster than jQuery if you're really good at writing fast javascript. Using css to achieve an effect has the advantage of working on all browsers that comply to the css standard and browsers should be highly optimized to render css very fast.
I think it's more an issue of what browsers you want to support, personal preference and coding styles than it is an issue of speed, but here is some information and benchmarks:
Which is faster? - modifying css property or adding class in jquery
http://jsperf.com/jquery-css-vs-native-dom/16
http://jsperf.com/jquery-css-vs-css/4
http://jsperf.com/jquery-css-vs-getcomputedstyle/2
Edit: Agree with Sergio, early optimization is the root of all evil. Write the code first, look for bottlenecks and treat them last.
Depends on what you want to achieve or the scenario.
I personally like css,but sometimes to achieve cross browser compatibility or some fancy effects i use jquery.
Jquery can be customized a lot,lots of options are also available,but it affects the page loading time. I prefer jquery or javascript.
With CSS3,lots of effects that could only be done with jquery are achievable now,but it only supports modern browsers.
Related
I'm working on an iPad HTML5 app and I've already implemented ontouch support to trigger events faster and I'm using jQuery to target the elements easier, but for the animations I'm using CSS3 transitions
What do you think is faster? using jQuery animations since I already have imported the library or use CSS3 transitions when targeting elements with jQuery?
According to this link, jQuery animation is much slower then css animation.
Reason can be because jquery has to modify the props of the DOM element using timers and a loop. The CSS is part of the browser engine . which depends pretty much on hardware of system. You can also check that in profiling of Chrome or Firefox.
CSS animations will almost always be faster.
A head to head comparison of CSS transitions and jQuery's animate.
Rather than setting a timer to run repeatedly, transitions are handled
natively by the browser. In my rather unscientific testing,
transitions are always quicker, running with a higher frame rate,
especially with high numbers of elements. They also have the advantage
that colours can be animated easily, rather than having to rely on
plugins.
http://css.dzone.com/articles/css3-transitions-vs-jquery
Related Question:
Performance of CSS Transitions vs. JS animation packages
CSS3 Transitions should be faster because they are native to the browser.
Its css3 its faster and consumes lesser memory and is smoother.
CSS processor is written in C++ and native code executes very fast whereas jQuery (JavaScript) is an interpreted language and the browser can't predict JavaScript ahead in time.
http://dev.opera.com/articles/view/css3-vs-jquery-animations/
View the above link to know about the experiments held over CSS3 vs jQuery
This article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) does an excellent comparison of CSS transforms vs. jQuery animations vs. GSAP (another JavaScript library).
CSS animations are significantly faster than jQuery. However, on most devices and browsers I tested, the JavaScript-based GSAP performed even better than CSS animations
So CSS transforms are faster than jQuery animations, but don't let this make you assume that CSS transforms are faster than JavaScript. GSAP shows that JavaScript can outperform CSS.
CSS3 will be faster as it comes standard with the browser where as JQuery is another file that has to be loaded, however I have found that depending on the animation that JQuery can run a lot smoother. Sometimes it's also nice to experiment with pure Javascript now and again.
The Mozilla developer documentation raises some interesting points regarding CSS3 animation:
Letting the browser control the animation sequence lets the browser
optimize performance and efficiency by, for example, reducing the
update frequency of animations running in tabs that aren't currently
visible.
WebKit (which powered Safari) also makes use of hardware accelerated compositing, which can have a much greater effect on performance than anything Javascript can do at this time. (I think this will change very soon though as more functions are added to manage calculations) This is because it will take advantage of dedicated hardware if it available to perform the calculations, rather than making it happen through a translated language like Javascript.
I am not 100% certain whether WebKit on the iPad is hardware accelerated; however it would stand to reason that because it is standardized and increasing in popularity, that this would only improve with time.
From here
A head to head comparison of CSS transitions and jQuery's animate.
Rather than setting a timer to run repeatedly, transitions are handled natively
by the browser.
In my rather unscientific testing, transitions are always quicker, running with a
higher frame rate, especially with high numbers of elements. They also have the
advantage that colours can be animated easily, rather than having to rely on
plugins.
A test here along with this conclusion.
Javascript animations based on timers can never be as quick as native
animations,
as they don't have access to enough of browser to make the same optimisations.
These animations should be used as a fallback only in legacy browsers.
Also notice this,
CSS3 animations are terriffic but do use a lot of your processor’s
power.
There is no way to fine tune the animation with CSS3 the same way you can using a
framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you
better stick with jQuery.
If you're using jQuery/javascript animation with the canvas tag (which if I'm not mistaken still relies upon a timer... new to playing around with it though), then it gives you the advantage of hardware acceleration with javascript. If you're just looking to move something around when you hover then transitions work great. CSS transitions may run a little smoother but it's a trade off, you're relinquishing a ton of javascript control over the animation by using transitions. I like to keep style in CSS and behavior in JS - isn't that how it's supposed to work anyway? CSS transitions kind of broke that logic...
Native is supposed to be faster, but if browser developers are sloppy (or lazy), they write bad code, which leads to poor results with CSS animations (or transitions).
Nowadays, jQuery has a plugin which overides the "animation" function with an "improved" one. see Velocity. I'm not getting into other ways to animate the DOM with javascript because it's outside the scope of this question.
So, as-is, jQuery is slower than CSS. also, CSS is easier to write because you already have the element style probably, so adding a few rules is easy, compared to a situation where you need to start writing JS somewhere and manage it..but for complex, heavy stuff, JS is faster, sadly.
A very good article about this exact question - http://davidwalsh.name/css-js-animation
I've just learned javascript and jquery a few weeks ago, since then I always use it to position all my divs and stuff in the screen by knowing the size of the screen and the window which I find extremely useful, but now I don't know if is this a good practice, cause it makes my web-pages fully dependant on jquery which I don't know if it may cause some troubles with different browsers.
I would really like to find answers like "Sure is a good practice, use all the scripts you want" cause I'm really loving this javascript stuff but well just tell what you think.
Use JavaScript for behaviors and CSS for styling.
Styling with JavaScript is slower and difficult for another developer/designer to figure out what you did.
Also if you use Firebug or Chrome Web Inspector you can not see where your styling is coming from.
Optionally set classes from JavaScript and not specific styling. You can transition between classes to create a nice effect. But at least your colleague can see where the styles are defined and change it.
I'm sorry, but I'm going to burst your bubble, somewhat.
It's somewhat OK to do it - as long as the page looks OK if you disable Javascript, as well. I would say it should look even better than OK. I would also say that you should only do that if the functionality of your site really demands Javascript, as well.
Keep in mind that a certain percentage of users will have Javascript disabled. I've seen sites that look horrible this way (I use NoScript on Firefox, and selectively enable Javascript as I browser), and a couple where nothing at all appears without JS enabled.
Bad.
As Darin notes, you can (and should!) use CSS for positioning and styling. That is what it was made for! Feel free to enhance the page with Javascript, but keep in mind what I say above!
You could use CSS for positioning and styling of elements. That's what it was designed for.
It's okay to use it for positioning in some cases, but using CSS is the better practice whenever applicable.
Well, In my opinion you should avoid it as often as possible. But I know sometime you don't have the choice.
And yea you can make great web apps using scripts.
It depends what you're positioning.
CSS should be your first choice for positioning standard, run-of-the-mill sections and elements of a webpage. To opt for JavaScript in these cases suggests a lack of understanding of CSS.
Likewise if you find yourself using JS to position things for different devices. Again, CSS has evolved; media queries came along for that. Rule: always exhaust CSS possibilities first.
That said, it would be oversimplification to suggest that JavaScript never be used for positioning. All of us, rightly or wrongly, have resorted (and it is just that, resorting) to JS in order to get things to look right cross-browser, particularly where support for older IEs is concerned.
But by far the biggest use case for JS positioning is for modern web aps and games. If you're building a game with random asteroids dotted around, JS is absolutely the choice for that, since the positions are based on calculation and computation.
Finally, bear in mind that when you position in JS, you are of course still using CSS. JS doesn't have its own, concurrent styling/positioning system - it simply sets CSS properties. It is simply able to do so more dynamically and conditionally than flat CSS.
It is almost certainly bad practise. Use CSS for styling - JavaScript to do this is slower, more work, and more prone to breaking.
If you're positioning everything absolutely (fixed coordinates) it won't look good on screens of different resolutions. There's no real answer to this question.. scripts have their place, and you can use all the scripts you want... Positioning all of the elements of your layout, however, is not a job for JS. Use CSS for that.
I'd start here: Starting with HTML + CSS
There is not one method for all situations. Each web application needs to employ the right tools and practices to achieve its goals. This varies so much between applications that there is not a "correct" answer to your question.
I have written a Javascript/jQuery script. Its purpose is to serve as a responsive background image slider.
It is viewable here:
http://new.upserver.co.uk/rbis/
My question is this;
While the code functions correctly, it can be slow/laggy. Especially when additional animation related plugins appear on the same page (i.e. nivoslider).
I have seen many similar sliders that handle chunky images perform effortlessly and am concerned and wondering how this code could be optimised to perform better? the javascript in question is located in file http://new.upserver.co.uk/rbis/rbis.js
Many thanks for all suggestions.
Regards
jQuery animate is rarely the right tool for providing animation. Take a look at this rather contrived example I produced recently: http://css3.bradshawenterprises.com/demos/speed.php.
I would recommend using CSS transitions in normal browsers, and only using the old way of doing it using javascript in old browsers.
A good way to do that is to use something like http://playground.benbarnett.net/jquery-animate-enhanced/, though I have had some issues with that, and instead use my own methods of doing it.
I'm just starting to use HTML5 and CSS3 in my documents.
I understand the need for JavaScript to bring Internet Explorer up to speed with these new tags and styles, but I don't know which to use and when!
My plan was to use html5shiv and IE9.js to look after the HTML5 tags as well as the transparent pngs (and whatever other pesky errors they fix) but then Modernizr and CSS3 Pie were brought to my attention.
My question is, if I use Modernizr, does it look after my need for html5shiv as well as IE9.js? Or should I include these as well? What is the overlap, if any?
And what does CSS3 Pie do that Modernizr or the others doesn't? Or vice versa?
I appreciate your guys help. Let me know what you do!?
I've got extensive experience with all of these, having used them for a few years each.
Modernizr
Includes HTML5shiv functionality
Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, just fixes html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
Conclusion
My advice would fall into two categories:
If you are just using the new (is 2 years new on the internet?!) elements, and CSS3 selectors, then use ie9.js + the html5shiv. This is lightweight, and just lets you get on with things without having to remember that IE6 doesn't support anything.
If you are using a lot of CSS3 stuff, then CSS3PIE will sort out border-radius and box-shadow. The gradient support seems a little flaky, so I've always used a fallback image instead. Modernizr lets you easily deliver different properties to browsers with different support. I've mainly used this for determining whether a browser has CSS transitions and transforms, as they are useful for any image sliders or content carousels. It's worth using the customisation tool to only include the functionality that you want – the webforms stuff shows a textbox with 50 in it for a couple of milliseconds, so it's worth disabling if you don't want it.
Hope that's helpful!
I would recommend you use only what you need. Build your app in a browser that supports the features you are using, and periodically test in other browsers that you support. If something isn't working correctly, find the appropriate fix, whether it be html5shiv, IE9.js, Modernizr, or CSS3 Pie. You are not going to use all of the new features in HTML5 and CSS3 all in one page, so you don't need to include every polyfill library in existence. Wait until you find problems with the features you're trying to use, then try and find the library necessary to do that.
I've used mainly CSS3Pie...it works great. But this afternoon i tested it on my laptop with I.E8 and there was an problem with it...it was disabling some css lines...when i removed the css3pie code my site gained twice the speed...then i came accross the posts with people arguing about the css3 slowdown...So at the moment i'm busy to find another way for IE7 & IE8 to have border-radius and shades.
If you want to use it...please test alot as it is NON-official fixes
I understand how JS is run and I think I understand most of the DOM but I've no idea about animation. Does anybody here know of a good guide that can explain to me how it's done in Javascript?
In addition, should I even consider Javascript for animation? Should I instead be looking to learn flash?
Avoid flash, its a horrible requirement, uncrawlable by Google, unsopported by a bunch of browsers and systems (eg iPhone) and most importantly: it forces you to reinvent web standards (e.g. scroll bars and whatnot), Javascript on the other hand is easier to maintain and code for in the noscript case.
try scriptaculous for your animations;
here's a quickie 3-line tutorial so
you can see it working
here's a more complete tutorial
here's the scriptaculous wiki
note that there are a gazillion JS animation libraries, some really good jQuery comes to mind. Usually they're just a script tag and an onclick event to setup.
Good luck!
/mp
if your animation is simple, change colors over time, move from x to y in 3 seconds. Javascript is fine. If you want all kinds of wizbang buttons and coordinated rotation of the screen, straight up js + dhtml will be clunky at best. Silverlight vs Flash are you questions at that point. Interestingly enough, you program Silverlight with javascript, and that would be the major benefit to simply upgrading to a faster and more dynamic DOM that is implemented in Silverlight but still writing the same code. Flash programmability is very limited in my experience, you can do anything, but it will be slow and take thousands of lines of code to get there. For simple JS animations look at jQuery or Scriptaculous.
Check out a JS animation framework like Bernard Sumption's Animator.js. It's pretty light-weight and has some excellent examples.
Personally, I wouldn't be animating things in JS. Flash FTW.
If you aren't concerned with IE support, you could also try experimenting with the canvas element:
MOZILLA DEVELOPER NETWORK Basic animations