針對不同窗口尺寸觸發不同功能的最佳方式

Question

我有一個網站，該網站針對移動設備和桌面設備採取不同的行爲。我可以用這個選擇器選擇羯羊火災功能：

if($(window).width < 768) { 
    // fire functions for mobile 
} else { 
    // fire functions for desktop 
} 

請問這個片段的工作，如果我寫了很多東西到佔位符？它是否跳過整個if或else代碼（以減少加載時間）？

應創建變量函數像這樣，以保持它的清潔，或者我應該引發的一切我if {} else {}功能？

// Is this one better? 
if ($(window).width() < 768) { 

    // $('something').something(); 
    // var another = $('another'); 
    // another.something(); 
    // lets guess lots of stuff to do here 
    // like 200 lines of code 

} else { 

    // $('something').something(); 
    // var another = $('another'); 
    // another.something(); 
    // lets guess lots of stuff to do here 
    // like 200 lines of code 
} 

// Or this one? 
var mobileFunctions = function() { 

    // $('something').something(); 
    // var another = $('another'); 
    // another.something(); 
    // lets guess lots of stuff to do here 
    // like 200 lines of code 
} 
var desktopFunctions = function() { 
    // $('something').something(); 
    // var another = $('another'); 
    // another.something(); 
    // lets guess lots of stuff to do here 
    // like 200 lines of code 
} 
if ($(window).width() < 768) { 
    mobileFunctions(); 
} else { 
    desktopFunctions(); 
} 

Answer 1

短而最佳答案：首先寫代碼是清潔和維護，以及個人資料，如果你需要的東西更快後測量。

也就是說，我認爲你在探測器中永遠不會出現的地方冒險。如果你擔心函數調用的代價會像200行代碼一樣，那麼就像擔心一個賽車上的污垢會讓它變得更加沉重，當你可以調整時發動機代替。

微觀層面的東西，可能是值得擔憂的（測量後）會之類的高速緩存友好的內存訪問，有時（很少）分支預測。當您調整微效率時，您通常也希望尋找大循環，就像循環中執行一百萬次以上的一小段代碼一樣。

至於if語句的性質，通常會接近免費。我們現在使用的硬件試圖預測你的指令將要做什麼。當預測正確時，分支成本將降至零或接近。就你而言，移動設備永遠不會變成桌面，而桌面在應用程序運行時永遠不會成爲移動設備，因此它完全播放到分支預測器。

關於函數調用一般情況下，一般來說，你不應該去想他們有一個成本，尤其是你不應該直到你異形你的代碼後。但是有時候有更多的功能實際上可以加速你的代碼，因爲它聽起來反直覺。如果您將大量代碼嵌入到單個單片函數中，那麼您可能會因icache未命中增加而阻礙性能（有點像C或C++等語言中的過度內聯）。

這一切都非常適合編譯器，如果你的JIT是一個跟蹤編譯器，那麼事情是非常不同的。但是，特別是因爲編譯器在這個世界上有很大的差異，所以性能的最佳機會往往取決於以更正常的方式編寫代碼（不要將數百行代碼轉儲到一個函數中以避免函數調用）。這應該是您編寫代碼的基準默認方式，直到您的測量結果告訴您可以選擇性地調整特定區域。簡而言之，即使從性能的角度來看，通常情況下，您更喜歡使用更易維護的代碼編寫方式，而不是基於先入爲主的關於缺乏任何測量性能的預測開始對其進行混淆。