2

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.

Optimus Prime
  • 6,817
  • 5
  • 32
  • 60
shubendrak
  • 2,038
  • 4
  • 27
  • 56
  • Personally I think that it depends on what you are using it for - usually I would prefer to use CSS though instead of JavaScript/jQuery. At times, doing one or the other is premature optimisation, other times it makes things more readable, and sometimes you really have to take performance into account. This is rather debatable though... – Qantas 94 Heavy Aug 03 '13 at 10:23
  • CSS will be the fastest as I know. Javascript which use native api (like document.getElementById(ID) and getElementsByName etc.) will faster than jQuery feature. – Clxy Aug 03 '13 at 10:27
  • Its nt a suitable question, jquery / javascript are scripting language and css only for styling, in jquery javascript we call ajax requst, function n all n yes we can set css to a particular element aftr some response, whch we cnt do in css. So this is hard to answer to your question. Also if u want set effect aftr any response den u hv to use jquery or js – Satinder singh Aug 03 '13 at 10:30

3 Answers3

0

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

Sergio
  • 6,900
  • 5
  • 31
  • 55
0

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.

Community
  • 1
  • 1
Spencer
  • 1,527
  • 1
  • 10
  • 23
0

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.

majorhavoc
  • 2,385
  • 1
  • 24
  • 26