针对不同窗口尺寸触发不同功能的最佳方式

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是一个跟踪编译器，那么事情是非常不同的。但是，特别是因为编译器在这个世界上有很大的差异，所以性能的最佳机会往往取决于以更正常的方式编写代码（不要将数百行代码转储到一个函数中以避免函数调用）。这应该是您编写代码的基准默认方式，直到您的测量结果告诉您可以选择性地调整特定区域。简而言之，即使从性能的角度来看，通常情况下，您更喜欢使用更易维护的代码编写方式，而不是基于先入为主的关于缺乏任何测量性能的预测开始对其进行混淆。