4

screen.width < 768の場合属性を使用する場合はscreen.width > 767data-src-smallとします。if +変数とif + else条件をオーバーライドします。どの方がパフォーマンスが良いのですか?

方法1:

var src = "data-src"; 

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

方法2:私は心の中で2つのメソッドを持って、私は二回このような状況に遭遇している

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

。だから私は、この状況が後で出てくるかもしれないので、どちらの方法がパフォーマンスが良いかを知ることが重要であると思う。

編集:この質問はJavaScriptに固有のものではありません。私は一般的に、速い、可変の再割り当て、または余分な条件が評価されることを意味します。else?同じ状況があまりにもこのようにC言語で次のようになります。

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

方法2:

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

答えは、コンパイラや言語に依存している場合、javascript言語とgcc-用クロームV8エンジンにお答えください言語の4.9.2コンパイラ。おかげ

+0

を必要としない第3回メソッドは 'IF($(ウィンドウ).width()>のように記述することができますを示唆しています768){var src = "data-src";戻る; } var src = "data-src-small"; ' – Roberrrt

+1

これはCSSクラスですか?メディアの問い合わせがより良い選択ではないでしょうか? – Kiogara

+0

@あなたは正しいです。コメントは削除されました – taguenizy

答えて

3

は、私は方法2任意のJSや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>

+0

しかし、これはIEのブラウザや他の古いブラウザでは問題になります。 – user31782

+3

これはIEにとっては問題ではありませんが、これはIE用の子猫カールを表示します...これはプログレッシブな機能強化です。古いIEのユーザーは、自分自身に責任があります(ビデオを開発してフラッシュオブジェクトを内部に置いても同じですが、ブラウザで '

+0

'max-width 100%'のようなCSSのほんの少し – Endless

関連する問題