4

I want to use data-src attribute when screen.width > 767 and data-src-small when screen.width < 768. I have two methods in mind:

Method 1: 

var src = "data-src";

if($(window).width() < 768) {
    src = "data-src-small";
}
// do something with src variable.

Method 2:

if($(window).width() > 768) {
    var src = "data-src";
}
else {
    var src = "data-src-small";
}
// do something with src variable.

I have come across this situation twice. So I think it is is important to know which method is better performance wise as this situation may come across later too.

Edit : I don't mean this question to be specific to javascript. I mean in general which is fast, variable reassigning or an extra condition to be evaluated in else? The same situation could be in C language too like this: 

 string salary;
 ...
 ...
salary = "LOW";
if(person == "RICH") {
  salary = "HIGH";
}

Method2: 

string salary;
...
...
if(person == "RICH") {
    salary = "HIGH";
}
else {
    salary = "LOW";
}

If the answer depends upon the compiler or language then please answer for Chrome V8 engine for javascript language and gcc-4.9.2 compiler for C language. Thanks

Cœur
  • 37,241
  • 25
  • 195
  • 267
user31782
  • 7,087
  • 14
  • 68
  • 143
  • Method 2 can be written as `if($(window).width() > 768) { var src = "data-src"; return; } var src = "data-src-small";` – roberrrt-s Nov 24 '16 at 15:18
  • 1
    That is this a CSS class? Wouldn't media queries be a better choice? – Kiogara Nov 24 '16 at 15:18
  • @Endless you are right. Comment deleted – taguenizy Nov 24 '16 at 15:26
  • 1
    @Roberrrt Did you mean _Method 1 can be written as..._. Also I never saw `return` being used in a non-function -- here you used in `if statement`. – user31782 Nov 24 '16 at 15:28
  • @taguenizy true about the hoisting, but it is still ugly to see and more difficult to manage then having the variable declared only one. that would be my main reason to reject method 2 in a code review – alebianco Nov 24 '16 at 15:28
  • The `return` statement cancels the remaining code inside the scope, see http://stackoverflow.com/questions/1820839/using-return-instead-of-else-in-javascript – roberrrt-s Nov 24 '16 at 15:30
  • 1
    I would just go with `var src = ($(window).width() > 768) ? 'data-src' : 'data-src-small';`. Note: if `width` is 768 the methods get different results. – taguenizy Nov 24 '16 at 15:31
  • @taguenizy Thanks your method is more concise. But is it better performance wise too? – user31782 Nov 24 '16 at 15:34
  • 2
    You don't have to worry so much about performance for such a small thing. What i think you should focus more on is responsiveness (if the user rotate the device or resize the window) – Endless Nov 24 '16 at 15:36
  • @Endless I don't want to make more http request on window.resize or orientation change. – user31782 Nov 24 '16 at 15:37
  • @user31782 imo probably method 1 could have the worst performance but I agree with Endless, its such a small thing that it wouldn't even matter – taguenizy Nov 24 '16 at 15:38
  • @taguenizy You mean reassigning a variable takes more time than `if` statement need to check the condition? – user31782 Nov 24 '16 at 15:48
  • @user31782 No. You do the `if` statement in both cases. In method 1 although in worse case scenario you could do 2 assignments – taguenizy Nov 24 '16 at 17:00
  • 1
    @Roberrrt `if($(window).width() > 768) { var src = "data-src"; return; }` doesn't work in JavaScript because we cannot use `return` statement in a non-function. – user31782 Nov 28 '16 at 08:51
  • @user31782 my deleted answer mentioned a function, you should use that anyway, since resizing the windows requires a new calculation – roberrrt-s Nov 28 '16 at 08:52
  • @Roberrrt Why should I use a function where it is not needed? And what new calculation does window resizing require? I am not delivering new images on window resize. – user31782 Nov 29 '16 at 07:02
  • Also isn't calling a function more time taking rather simply executing the statements in that function? – user31782 Nov 29 '16 at 07:04

1 Answers1

3

I would suggest a 3th method that don't require any js or css

<picture>
  <source media="(min-width: 768px)" srcset="https://dummyimage.com/600x400/000/f00&text=big">
  <source media="(max-width: 768px)" srcset="https://dummyimage.com/300x200/000/fff&text=small">

  <!-- fallback if browser don't understand picture element -->
  <img src="https://dummyimage.com/600x400/000/0f0&text=small" alt="kitten-curled">
</picture>
Endless
  • 34,080
  • 13
  • 108
  • 131
  • But this would be problematic for IE browsers and other older browsers. – user31782 Nov 24 '16 at 15:25
  • 3
    It's not any problem for IE, this will just show kitten-curled for IE... This is progressive enhancement - meaning dose who understands it will get the best solution there is. Old IE users have only them self to blame (it's the same when you do develop video and you put a flash object inside of it but it won't get rendered or loaded if ` – Endless Nov 24 '16 at 15:29
  • Throw in a little bit of css like `max-width 100%` – Endless Nov 24 '16 at 15:29
  • But I want to support IE 11 and may be IE10 and Android mobile like kitkat. For all these I will have to use `data-src` method. And if I am already using `data-src` then I don't need your `picture method`. Don't get me wrong otherwise; thanks for your answer. – user31782 Nov 24 '16 at 15:31
  • 3
    If someone at home are sitting and watching a colored movie in black and white cuz he has a really old TV do you produce the hole movie black and white so everyone should get the same result? No. – Endless Nov 24 '16 at 15:32
  • No it is not like black and white TV. Many people use windows7. And with that IE11 is the default. And they might not have time to install chrome or firefox before visiting my website. I just want to be full proof. – user31782 Nov 24 '16 at 15:33
  • Would the `picture` element get revalidated on browser window change or orientation of mobile change? – user31782 Nov 24 '16 at 15:47
  • They get revalidate on window change - included a runnable example (open in full window) – Endless Nov 24 '16 at 15:55
  • Are both `small` and `big` images both downloaded on `min-width: 768px`? Or only one? And new http request for small image will be made when browser window will be compressed. – user31782 Nov 24 '16 at 16:05
  • The image that is visible will only be downloaded. and to your last question yes, only the one that is right for the media query will be requested – Endless Nov 24 '16 at 16:09