0

Is it better in practice to make sure the algorithm only initiates the function if there is a need to do so or to just initiate the function in jquery? as an example lets use these pieces of code. imagine a web page has a considerable amount of divs like 1000 or something some of them are nested like a regular web page and how would the programme behave in a $(window).scroll(function(){}); as apposed to a $("element").click(function(){});. the function fires regardless of weather or not it needs to doesn't it? and might that have performance side effects?

$("div").css({"display":"none"});

or

    $("div").each(function(){ 

if ( $(this).css("display") !== "none" ) { 
$(this).css({"display":"none"}); 
} 

});

or even

 $("div").each(function(){ 

if ( $(this).is(":visible") ) { 
$(this).css({"display":"none"}); 
} 

});

Please give a detailed explanation on which is better in practice

Jevon
  • 295
  • 2
  • 13
  • Checking the current CSS status is expensive, so the simple approach is best. – Pointy Nov 27 '18 at 17:33
  • 3
    "Which is faster" is usually solvable with actual time tests against your actual page, because things can be different. However, my *assumption* would be the first one, as it is less operations. – Taplar Nov 27 '18 at 17:34
  • 1
    It depends entirely on the state of the DOM, how many elements you're affecting and what you're doing with them. The first is by far the most succinct, though. I'd argue that If you're that concerned about performance then you shouldn't be using jQuery at all. If you want to test performance yourself go to http://jsperf.com – Rory McCrossan Nov 27 '18 at 17:34
  • 1
    Also, as a side note, that I would assume that adding/removing a class is much faster than specifically setting `display`, but I've not tested it – Rory McCrossan Nov 27 '18 at 17:35
  • Better in practice? The first one. If there is a performance problem and you need to do #2 or #3 hide it in its own function as far away as possible so you don't have to look at it. – IrkenInvader Nov 27 '18 at 17:40
  • someone make a test please :D I bet the first one is a little faster, but it's not really significant - still a test would solve that riddle – Velimir Tchatchevsky Nov 27 '18 at 17:45
  • 1
    @VelimirTchatchevsky It would "solve the riddle" in the specific circumstances of the test, not generally, and likely not in the circumstances of the OP. – Heretic Monkey Nov 27 '18 at 18:25
  • @HereticMonkey I agree. OP should make a test and 'solve the riddle' for this specific case, so we can get some closure. – Velimir Tchatchevsky Nov 27 '18 at 18:34
  • Im a self taught programmer whos been doing it for coming up to 2 years now. I developed a habit of doing the second one so i asked this question essentially seeking advice from other programmers on weather that is the best practice in general or if there is a better way. I dont just do this for css and classes, i also do it for if ( variable != true ) { variable = true;} etc. Looking at your responses, it seems as though most of the time the first one is actually the best way to do it however it seems as though in certain circumstances the other alternatives are better..... – Jevon Nov 27 '18 at 21:30
  • I anticipated it may vary which was why i requested a detailed answer for example if an element already has a class it might be good to make sure its not given more than one of the same class as that may confuse some functions involving that class so i tend to do if( !$(this).hasClass("class") ){$(this).addClass("class");}. If anybody has a detailed answer which includes the different circumstances please feel free to provide an answer to the question. – Jevon Nov 27 '18 at 21:30
  • Guys ive slightly changed the question to what is better in practice as this is more about whats better in practice in general as apposed to whats better in performance, the link i have been directed to wont answer my question. In a scroll function for example where you are constantly checking if a div is in view, would the function keep firing if you go for the first alternative regardless of weather display is allready equal to none or not etc. i asked about speed to try to not make the question appear to broad. – Jevon Nov 27 '18 at 22:11
  • The elements won't get two instances of the same class, jQuery handles that smartly. In general a good approach is to write code as simply as possible to keep things neat and readable (even if you suspect it is less efficient) then go in and optimize only after you find a performance problem. It's actually pretty tough to write slow code, try to be more reactive to performance issues rather than anticipating and agonizing over every tiny optimization. Even if option #1 takes 2ms to run on 1000 divs and option #2 takes 1ms - do you really care? Readability is all that matters at that point. – IrkenInvader Nov 28 '18 at 17:02
  • ^ Just a mindset I learned along the way that has worked well for me. Not trying to sound critical, only offering another perspective. – IrkenInvader Nov 28 '18 at 17:05

0 Answers0